RGB? CMYK? WTF?

RGB: On-Screen Color
Screens (televisions, computers, and phones) create images from millions of little dots of red, green, and blue light. That’s the R, G, and B. Varying combinations of these R, G, and B dots can create almost any color and combine to create the colors and shapes in an image. Full strength of all three colors makes white (it is essentially all the colors in the spectrum at once or “white light”) and having none of the 3 colors present makes black (ie: no light=darkness).

RGB colors are specified with 3 numbers that indicate how much R, G, and B are present. Each number can be anywhere from 0 to 255 which represents the range each “dot” on the screen (which are each one “byte”) can display. Since black is none of the RGB colors, its value is 0, 0, 0. Conversely, white is all of them, so its value is 255, 255, 255. Pure red would be 255, 0, 0, etc. But making other colors doesn’t work quite like you’d imagine—for instance, adding a little blue to that red mix (255, 0, 100) does not create purple. That is what we expect because we think in terms of “Subtractive Color,” which is how physical colors (like the ink in CMYK printing) work—the physical surface is absorbing (subtracting) all of the wavelengths of light except the ones reflected back to our eyes. But light is “Additive,” meaning when different colors of light are added together, all those wavelengths reach our eyes, and what is registered is very different. The upshot is: on-screen colors can always be represented by some combo from 0 to 255 of each of the 3 RGB colors.

On-Screen Color Wild Card
There is one other way to describe on-screen colors, made prevalent thanks to HTML and web design. “Hex colors” are single 6 character (hence “hex”) alphanumeric identifiers for specific colors. The anatomy of these is not worth getting into, but a hex color code like #FFFF00 is just another name for RGB 255, 255, 0, or yellow.

CMYK: Printed Color

CMYK also uses the combination of its component colors to create a full range of perceived colors. Although CMYK is the printed equivalent. C=cyan (bright blue), M=magenta (deep pink), Y=yellow (appropriately), and K=black (inexplicably.) The varying sizes of dots in these colors are arranged in a careful “rosette” pattern when printed (rather than simply overlapping) which is imperceptible to the naked eye.

Below, you can see the “color separations”—each of the individual 4 colors that go into making up the image.

Like RGB, specific colors can also be described by a series of numbers/values for the amount of the C, M, Y, and K being put onto the paper. They’re indicated as a percentage—a light color uses a low percentage, where the dots have more of space between them. A darker color uses a high percentage, which is bigger dots or even a solid block of the color (for 100%). There are millions of combinations in between—a medium green might be 100% (solid) yellow combined with 50% cyan (medium-sized dots). It would be written as 100, 0, 50, 0.

Printed Color Wild Card
CMYK is the dominant form of printing these days, and is now much cheaper than it used to be. Fifteen years ago, it was still more common (and cost-effective) to print things as “1 color” or “2 color” when possible. That meant using “spot colors,” which are inks mixed to be the specific color you’re after—more like paints. If your logo used bright green, you might use the spot color Pantone 375. Certain industries still prefer spot colors—for example, if you’re putting your logo on a pen or a mug or a T-shirt. But it’s much less common these days, though we usually still specify a spot color on our logo guidelines because someone will probably ask for it at some point.

hazen-instagram   hazen-twitter  hazen-facebook
 
Sign Up for Emails