It’s a fact. If you are working with graphics for web or print, you’re eventually going to come up against the question of RGB and CMYK colour models. When you do, it is important to know the difference. Let me explain why.

Even though an image may appear normal when you open it up in a program like Adobe Photoshop or Corel Painter, that does not mean that that same image is necessarily ready for use in a design or layout. For instance, you may have developed an image for a website in CMYK, just because that was the default when you first created the image. But, when you open your site or page, the image is either missing or appears as a broken link. you could run around frantically checking names and references, but you'll never fix the problem until you convert the image to RGB colour space. Why? The internet is designed to work exclusively with RGB (for reasons that will become clearer as we move forward), and as such web browsers will not display images in CMYK!

Conversely, if you use an RGB image in a design that you are going to be sending out for print, don't be surprised if the proof comes back with dull and washed out colours, or at the very least colours that look very different from what you expected. Again, it’s an issue of purpose, since RGB is not designed to provide colour profiles for print. Instead, you need to use proper CMYK.

So, then, let's look at the two colour models, how they work and what they are used for.

The RGB colour model works on the premise of additive colour, which works through the combination of different colours of light. By mixing different intensities of red, blue and green light, new variations of colour are created. For instance, if you were to combine 100% red light with about 50% green light, you would get a very vibrant orange. Increase the green to 100% and you get yellow. The following graphic demonstrates the way that red, blue and green combine together at their highest luminosity.

Now, this may seem to go against everything you ever learned about primary colours (of which green is not one, I know), but remember that we're talking about additive colour here. Traditional colour theory, which is based on the mixing of paints, focuses on subtractive colour (we'll talk more about subtractive colour below).

The important thing is to realize that RGB, or additive colour, is the colour model that drives monitors, televisions and other light-based displays. A monitor's screen is comprised of many small units called pixels. Each pixel is, in turn, comprised of three light units, one for red, one for green and one for blue. RGB values are applied to these pixels, thereby setting the luminosity for each of the three light-units in each pixel. Together, all of these individual pixels, which are too small to be seen by the naked eye, ultimately work together to form the illusion of an image appearing, and even moving on the screen. Without the proper RBG values, however, nothing can be displayed.

This is the reason that RGB is so important for web design, or any other media that will be displayed digitally. Essentially, RGB is like the native tongue of digital display, and though some applications are capable of translating CMYK, many others cannot understand it at all.

As for how to read or set and RGB value, there are three common methods. The first, which is common in most graphics packages that I have worked with over the years, is comprised of three distinct numeric values, one for each of red, green and blue. These numbers always contain a value between 0 and 255 (giving a total of 2553 or 16,777,216 different colours). This is probably the simplest of the three methods.

The second system is a form of hexadecimal notation, which is commonly used in HTML and other computer languages. You may have seen notation such as #3FD72F, which denotes a particular shade of lime-like green. To look at it, this might seem rather arbitrary, but the notation actually follows a very logical pattern. First, the notation always comprises six characters. These characters are then broken down into three pairs. The first represents red, the second green and the third blue, as follows:

Now, each character pair represents a number in hexadecimal (a sixteen character numerical system that uses the our normal ten digits 0-9 plus the letters A-F). It just so happens that the decimal equivalent of the hexadecimal number FF is actually 255, which means that each pairing in the notation can have a unique value of between 0 and 255, just like the method described above.

It may seem a little obtuse, and you may never be able to just look at a notation and say, “that’s bright, lime green,” but as long as you understand how the notation works, it is a simple enough process to translate to or from standard hexadecimal notation.

The final method that can be used with RGB is percentages. Though less precise than the other two, certain programs will allow you to designate a percentage for each colour. From there, the program will simply translate the percentages into the appropriate number in the 0 to 255 range.

Unlike the RGB colour model, the CMYK colour model works on the premise of subtractive colour, which is more closely aligned to traditional theories of colour, though instead of blue, red and yellow, we have cyan, magenta, yellow and black. We’ll begin by considering the first three colours. The following graphic demonstrates the ways in which cyan, magenta and yellow can be combined to create different colours.

Notice that, while the combination of the three additive colours of RGB creates white, the combination of the three subtractive colours of CMYK creates black (or at least a colour close to black). This reflects the fundamental difference between on-screen display and print. With the former, light is actually being projected from the screen, and the more that is projected from a single pixel, the closer it will be to pure (white) light. On the other hand, inks actually absorb light, reflecting only those wavelengths associated with ink’s colour. In other words, the non-essential wavelengths are subtracted from the light the strikes the ink, while the balance of the light is reflected back at our eyes, giving the impression of colour. The more colours of ink you mix together, the more light gets absorbed and the less light gets reflected back at your eye. The result is the perception of a darker colour.

So, if mixing different inks creates darker colours why does CMYK include a black ink? First, while mixing cyan, magenta and yellow will, in fact, produce a black-like colour, it will not produce a strong, rich black. By adding in the extra black ink, however, it is much easier to achieve a truer and more elegant black.

The other reason for including black ink in CMYK is to darken other colours. For instance, if you wanted to create orange, you might mix yellow and magenta. However, if you wanted a darker shade of orange, adding cyan would not work. Instead, you would have to increase the amount of black in order to achieve the specific shade you’re looking for.

But what if you want a lighter shade? While a painter might mix in some white paint, there is no white ink with CMYK. Instead, CMYK works under the assumption that you will be printing onto white paper. Thus, because images are printed using tiny dots of ink (theoretically comparable to pixels) laid out across the page, lighter shades can be achieved by using lower percentages of ink, and letting more white remain visible between the dots.

Which brings us to how CMYK values are calculated. Essentially, colours are determined by a series of four percentages, one for each of the four colour values. Each percentage must be between 0 and 100%, which means that total ink coverage can be upwards of 400%. However, putting that much ink down on the paper can present a problem, in that it will take longer to dry. So, as a rule of thumb, try not to let your total percentage (in other words, the sum of the four percentage values) exceed 300%.

One other thing to remember about CMYK is that there is no perfect correlation with RGB. This has two important ramifications. First, even if your image is saved in CMYK mode, what you are seeing on screen is still just a RGB approximation, because the screen is only capable of displaying in RGB. Second, because of this approximation (and the fact that not all displays are created equal), what you see on your monitor is unlikely to be exactly what you see on the printed piece. Thus, on projects where you need a very specific colour, it is a good idea to get proofs, which can then be used to adjust your colours appropriately.

Now that we’ve run through both RGB and CMYK, it should be clear that the two colour spaces work very differently. As such, it should come as no surprise that conversions from one colour space to another are not always perfect. Take, for instance, the images below. On the left, we have the original RBG image; on the right, we have the same image after having converted it to CMYK.*

Notice how the blue in the second image appears washed out. This is a common occurrence when converting from RGB to CMYK. Often, a few simple adjustments with Photoshop (or a similar program) can compensate for this wash-out, but it is important to be aware of it in the first place.

Interestingly, converting from CMYK to RGB tends to result in fewer visible changes in colour (at least on the monitor). This is likely a result of the fact that CMYK files are still being displayed in RGB.

It is also important to recognize that different applications can affect the appearance of colours, even within the same colour model. Take, for instance, these two versions of our RGB colour combinations. The version on the left was screen-captured out of Corel Photo-Paint 8, while the version on the right was captured out of Adobe Photoshop CS2. Notice the dramatic difference in luminosity.

Obviously, this kind of variation can have a strong impact on design, so be sure to watch for any such variance and take it into account during your development.

Obviously, there is still a lot that could be said about RGB and CMYK colour modes. The purpose of this article has been simply to familiarize you with the basic concepts surrounding them, so that you will have a better understanding of how they can affect your work.

If you are looking for more information about either the RGB or CMYK colour models, we would recommend visiting Wikipedia.

^* Because the web browsers cannot display CMYK images, I used a screen capture to be able to display the difference between the two images.

We provide a diverse range of solutions and services to help support you in all your direct marketing needs. Take a moment to browse through our various solutions. We’re sure you’ll find something that is right for you!

Based on 15 years of experience, our knowledge base is full of helpful hints, packaging concepts, real-world case files, reference documents and more, all available to help you make the most of your direct marketing efforts.