Web vs. Print Basics: Color

A color is a color whether it's online or offline, right?  Well, not quite.  In fact, would you believe that web and print projects actually use entirely different color systems?  Come dive into the color pool with me today to learn the basics of color for web and print projects.


We'll start with those online colors.  Electronic devices run on a color model called RGB.  R = red, G = green, and B = blue.  Electronic devices use combinations of these 3 colors in varying amounts to create every color you see on a screen.  And these web colors are written in a hexidecimal format (also know as HEX codes) or as a triplet of red, green, and blue values.  For example, the color white (which has a full value of red, green, and blue together) would be #FFFFFF as a hex code and 255, 255, 255 as an RBG triplet.  Black (which is an absence of red, blue, and green together) would be written as #000000 or 0, 0, 0.

And have you ever wondered why that pine green shirt you bought online looked a little different on your cell phone and your computer and in real life?  Well, that's because different devices display these RGB colors with their own unique sets of color elements, as described here.  So maybe your shirt's RGB value is #003C0F or 0, 60, 15, but what you really were seeing were different interpretations of that green color on your different devices.  And those digital interpretations were probably a bit different from what you saw with your own eyes when you took the shirt out of the shipping package at home.


Now let's talk about printed colors.  Printers use a color model called CMYK.  C = cyan, M = magenta, Y = yellow, and K = black.  Printers combine these 4 colors in various ways to produce a huge range of printed colors (go here for a taste).  These colors are written as percentages of each of the 4 basic colors.  So white in CMYK is 0%, 0%, 0%, 0%, which lets a white paper background show through.  Black would be 0%, 0%, 0%, 100%, which only uses the black color option.

And what about the color of that shirt you ordered?  Maybe you decided that the pine green color of your shirt is the PERFECT color for the ink on your holiday cards this year.  So that same pine green color might be written as 100, 0, 100, 80 in the CMYK model for physical printing.  And of course, different printers might vary a bit in their exact interpretation of this color, just like different screens.


All right.  You now know the basics of the color worlds for web and print projects.  But, in the end, what does it mean for you and your creative projects?  Well, it means 2 things.

1) If you have the opportunity to pick your color system when you are creating something, choose RGB for online projects and CMYK for printed projects.

2) And if you don't have that opportunity to choose your color system, just know that these differing color systems will explain why what you make on your computer may not look exactly the same on another computer or when it's printed.

Color is a fiddly and sometimes slippery (as in hard to pin down exactly) part of making creative projects.  But the good news is that while your computer monitor or printer will be able to distinguish tiny differences in colors, the average human eye is nowhere near that good.  So close enough is usually good enough. *Insert sigh of relief here*

P.S. I wrote a related post on color that you can find here.


Posted in Creative Speak and tagged , , .