A computer can display millions of different colors, and the complexity involved in these colors makes its models and profiles worth focusing on in your design projects.
Simply saying you’d like “red” or “blue” doesn’t cut it. You may imagine a royal blue while another person imagines a robin’s egg blue. Color psychology can come into the equation when picking a color, too. Do you want your shade of red to express danger, or do you want it to express love? Does that mean bright candy apple or deep merlot?
Here is where color models are valuable. Color models can give you precise values for the color you’re looking for, down to subtly different shades of merlot, royal blue, and every other color of the rainbow.
Designers have a fluent knowledge of color models; they’re the “back-end” of color. Every color that exists comes with a unique code. Whether you’re coding a webpage, designing a graphic, creating a palette for your brand, or deciding which color profile to save a file as, knowing how to decode it all can be a game-changer.
If you’ve ever interacted with a color model, like HEX, RGB, CMYK, etc., you’ve likely wondered what it all means.
RGB – rgb(255,255,255)
RGB stands for Red Green Blue, the primary colors in an additive color model. Each value in the RGB color model indicates what amount of red, green, and blue is within each color. Color coding traditionally uses a digital 8-bit per channel RGB notation. Each color expresses as an RGB triplet (r,g,b), with each value varying from zero to a maximum defined value of 255. If all values are at zero – rgb(0,0,0) – the color is black. If all values are at 255 – rgb(255,255,255) – the color is white.
RGB should be used for projects that involve a digital screen, i.e., anything that involves computers, smartphones, tablets, TVs, cameras, etc.
Hex Codes (Hexadecimal, or Base 16)
Rather than figuring out the exact amount of Red, Green, and Blue you need for each color, Hex codes allow you to code each color with six digits. The six digits of a hex code are composed of three two-digit numbers, representing each level of red, green, and blue. For example: #9E9EE8.
Hex codes use the hexadecimal (or Base 16) numeral system to make it possible to represent all 256 values with only two digits. Instead of counting 0 through 10, the values are displayed 0 through 16. In this system, numbers 0-9 are numerical, and letters A, B, C, D, E, and F are used as values from 10 to 15 where A=10, B=11, C=12, D=13, E=14, F=15. There are 256 combinations in total, or 16*16, but 0 takes up this extra space, so 255 remains the highest value.
Hex codes allow us to represent 256 numbers using only two digits. So, the highest possible two-digit number is not 99 but FF (equal to 255). So – the hex code for white is #ffffff, and the hex code for black is #000000.
(source: HTML Color Codes)
Want to get more technical and write your own hex code? There are some important instructions to remember when it comes to displaying hexadecimal/Base-16 numbers in two digits:
- You always need to multiply the first number by 16.
- You multiple the second number by 1.
- Add these totals together to get your final value.
By following these rules, you can see that the highest value possible in just two digits would be “FF” or 255. To get this, we multiply the first F (or 15) by 16, and then multiply the second F (15) by 1 and then add the two together: (15 x 16) + (15 x 1) = 255.
CMYK
While RGB uses Red, Green, Blue, CMYK uses Cyan, Magenta, Yellow, Key/Black. CMYK is the color space for printed materials. Unlike additive RGB colors, CMYK colors are subtractive. A printing machine combines CMYK colors to varying degrees with ink, like RGB and HEX combine color codes to varying degrees.
(source: Hackworth Co.)
(source: Printing Center USA)
Summary
Knowing how colors interact can give you better control over how your final color looks, which will provide you with better control over your design. The more you work within a particular color model, the better you’ll get at predicting how the design will translate to your end product.
While knowing each color model’s value can prove helpful, it’s not required. The World Wide Web provides endless resources for selecting colors and their corresponding codes, as well as palettes, pickers, gradients, and more. You can find some of those resources below.
