ABC's of the RGB and CMYK Color Models
Executive Summary
The two major color model differences:
| Color Model | Colors Used | How colors are created | Resolution Used | Used for |
|---|---|---|---|---|
| RGB | 3 Primary Colors: Red, Green, and Blue |
Display devices EMIT light to display colors (additive) | Low Resolution: Typically 72 dpi or more |
Display devices (Computers, tablets, phones) |
| CMYK | 4 Process Colors: Cyan, Magenta, Yellow, and Black |
Paper ABSORB light to display colors (subtractive) | High Resolution: |
Printers (Ink / Paint) |
RGB Color Model
The RGB is an additive color model in which red, green, and blue light are added together to create an array of colors in the visible spectrum.
It is helpful to think of each color in the RGB color model as a dimmable spot light that can be turned on or off or dimmed against a wall in a dark room. For example:
- If all lights are turned off, the wall would be black
- If all lights are turned on, the wall would be white (see middle of screen-shot below where all lights intersect)
- If only one light is turned on, the wall would be that color
- If all of the lights are dimmed equally, the wall would be a shade of gray.
- If the lights are mixed as seen below:
- red and green yields yellow
- green and blue yields cyan
- blue and red yields magenta
While you can use a HEX color chart to ascertain the hex value of colors, it is good to learn know how write some of the more common color yourself.
NOTE: The values of the intensity of the light ranges from 0 to 9 and A to F; where 0 is off, F is FULLY ON, and all other values in between are PARTIALLY ON.
| Color(s) Displayed | RED CHANNEL | GREEN CHANNEL | BLUE CHANNEL | How many light(s) needed |
How many color(s) | HEX value |
|
|---|---|---|---|---|---|---|---|
| Black & White | Black | 0 | 0 | 0 | ALL lights are OFF in ALL channels | 1 | 000000 |
| White | 255 | 255 | 255 | ALL lights are FULLY ON in ALL channels | 1 | FFFFFF | |
| Red, Green, Blue (RGB) | Red | 255 | 0 | 0 | ONLY the RED light is FULLY ON | 1 | FF0000 |
| Green | 0 | 255 | 0 | ONLY the GREEN light is FULLY ON | 1 | 00FF00 | |
| Blue | 0 | 0 | 255 | ONLY the BLUE light is FULLY ON | 1 | 0000FF | |
| Cyan, Yellow, Magenta (CYM) | Cyan | 0 | 255 | 255 | Lights are FULLY ON in the LAST TWO channels | 1 | 00FFFF |
| Yellow | 255 | 255 | 0 | Lights are FULLY ON in the FIRST TWO channels | 1 | FFFF00 | |
| Magenta | 255 | 0 | 255 | Light are FULLY ON in the FIRST and LAST channel | 1 | FF00FF | |
| Shades of Color | Shades of Red | 1-255 | 0 | 0 | Lights are PARTIALLY ON in the RED channel. | 255 | Vary |
| Shades of Green | 0 | 1-255 | 0 | Lights are PARTIALLY ON in the GREEN channel. | 255 | Vary | |
| Shades of Blue | 0 | 0 | 1-255 | Lights are PARTIALLY ON in the BLUE channel. | 255 | Vary | |
| Shades of Gray | Shades of Gray |
Same value | Same value | Same value | SAME amount of light ON in ALL channels | 16.7 M | Vary |
| Array of Colors | Other Colors | Vary | Vary | Vary | PARTIAL amount of light ON or OFF in ALL channels | 16.7 M | Vary |
NOTE: Each channel is measured using decimal numbers from 0 to 255 (256 total). A total of 16.7 million colors can be displayed (e.g., 256 x 256 x 256 = 16.7 different colors using all three channels). RGB colors can also be represented by HEX values. See next topic for details.
Don't Be Vex By Hex (For Geeks only)
The Hexadecimal (Hex for short) format is used by the web (e.g., HTML, XML, CSS, SVG) and other applications to represent colors. Each HEX number is represented by values between 0-16 (using 0-9 and A-F)
| HEX | VALUE |
|---|---|
| F | 15 |
| E | 14 |
| D | 13 |
| C | 12 |
| B | 11 |
| A | 10 |
| 9 | 9 |
| 8 | 8 |
| 7 | 7 |
| 6 | 6 |
| 5 | 5 |
| 4 | 4 |
| 3 | 3 |
| 2 | 2 |
| 1 | 1 |
| 0 | 0 |
A HEX color code is a six digit hexadecimal number based on the three RGB byte channels. Each byte represents a decimal notation number between 0 to 255. However, in hexadecimal notation, the range is 00 (no light) to FF (full light) for each channel color. A hexadecimal codes starts with a hash tag:
#FF0000 | FF = Red, 00 = Green, and 00 = Blue | RESULT: RED
Converting RGB to HEX
To convert a RGB value to a HEX value, all you need to do is DIVIDE each RGB color channel by 16 to get the quotient for the first number and ADD the remainder for the second number for each color channel. For example, if we want to convert the RGB value of 55, 160, 229 to a Hex value, do this:
R = 55 / 16 = 3 with a remainder of 7 | RESULT: 37
G = 160 / 16 = 10 with a remainder of 0 | Remember, 10 = A in hexadecimal, see chart above | RESULT: A0
B = 229 / 16 = 14 with a remained of 5 | Remember, 14 = E in hexadecimal, see chart above | RESULT: E5
55, 160, 229 in RGB becomes #37A0E5 in HEX
RGB TO HEX converter: https://www.rgbtohex.net/
Converting HEX to RGB
To convert a HEX value RGB to a value, all you need to do is MULTIPLE the quotients by 16 and ADD the remainders for each color channel. For example, if we want to convert the HEX code #37A0E5 to a RGB value, do this:
R = 3 x 16 + 7 = 55
G = 10 x 16 + 0 = 160 | Remember, 10 = A in hexadecimal, see chart above
B = 14 x 16 + 5 = 229 | Remember, 14 = E in hexadecimal, see chart above
#37A0E5 in HEX becomes (55, 160, 229) in RGB
CMYK Color Model
The CMYK is an subtractive color model in which cyan, magenta, yellow, and black process colors are subtracted because the inks "subtract" red, green, and blue (rgb) from white light by reducing the amount of light that would be reflected. For example:
- white light minus red leaves cyan
- white light minus green leaves magenta
- white light minus blue leaves yellow
In the CMYK model, white is the natural paper color or background, while black is created from a full mixture of colored inks.
Link to excerpted video from Lynda.com on CMYK.
Why use CMYK for Print
While merging red, green and blue can create all colors, display devices can only display a limited range of those colors. So, for PRINT RGB is converted to CMYK.
While some printers can accept RGB colors, they will be converted to the CMYK spectrum but will not have accurate color printed.