What are Color Models?

From Color Models to Color Spaces and Profiles - Part 1

What are color models? How important is it to work in the right color space? And color profiles? Or gamma correction? What exactly do these terms mean and how can you use them to your advantage to deliver the best results possible with your work? In this first part I start with color models. The second and last part will be about color spaces, color profiles, gamma-correction and a side trip to bit depth.

But don't worry, I'll start simple... with your own eyes! And I provide lots of colors and of course some interactives with it!

How do we actually see colors?

In our retina there are cones and rods. With around 5 million cones we can observe colors and with about 120 million rods we observe clarity. We have separate cones for light with low frequencies (red tones), medium frequencies (green tones) and high frequencies (blue tones). So in fact you could say that the human eye is already working with RGB.

But in order to be able to perceive those colors, there must be sufficient light. If there is too little light, we do not perceive colors. However, we can still observe silhouettes and figures in the dark. Because we have 24 times as many rods as cones, we can no longer perceive colors at night, but we still see silhouettes and shapes in the form of shades of gray.

Color models

A color model is a way to describe colors in a color system. Most color models have 3 dimensions, such as the best known: RGB. From Red, Green and Blue. And because of the three dimensions, a color system can be represented with 3 axes, so in 3D.

You could say that all models ultimately all come out at RGB. But usually we do not distinguish one, but two main color models, which are also the best known; RGB and CMY. These color models can be further subdivided into sub-color models. For example, RGB has for instance sub-models HSL and HSV. More about that later.

For now here's just a list of some well-known color models:

• RGB
  • HSV/HSB
  • HLS/HSL
• CMY(K)
• LAB
• NCS

Additive color mixing and light

Light is thus perceived by the R, G and B cones and brightness rods in our eyes. Ultimately, everything we call color is in fact just light. Different colored light rays can be mixed together by overlapping each other. Just think of two spots where the rays intersect. This method of color mixing is called additive, because colored lights that overlap/mix are added together and we then observe the result of that addition with our eyes.

The basic colors for additive color mixing are normally red, green and blue. Just like the cones in our eyes. Red, green and blue are therefore the primary colors for additive color mixing, or light mixing. And if you add all three together (overlapping each other) you get...? Well, you can find that out by yourself in the next interactive by overlapping the color circles.

Subtractive color mixing and paint

So color is in fact light. But not every ray of light directly reaches our eye. Most of the light ends up on objects around us. Some parts of this light can get absorbed by these objects, so that we only perceive the remaining light as color.

If we have a theoretical lamp that emits perfect white light, this means that this lamp emits all possible colors that together make up white light. With this lamp shining on a white sheet of paper that paper will reflect all the colors of the white light and we see a white sheet of paper.

If we now hold the same white light above a red sheet of paper, the green and blue hues will be absorbed by the paper and we will only see the red part of the light so that we see a red sheet of paper. A colored object therefore filters incoming light and reflects only the light that remains, so that we perceive the object colored. A black object does not reflect light at all, so we perceive a black object.

That's how it works with paint. And you can mix paint. A child quickly understands that if you mix yellow paint with cyan paint (a child could call it light blue) you get green. Yellow paint absorbs from the incoming white light all the blue light rays and the cyan paint absorbs all the red rays from the light, so we perceive green.

For everything that is not light itself, but filters light and reflects, so for example ink and paint, the primary colors are Cyan, Magenta and Yellow (CMY). When blending paint or ink, it doesn't add up as with mixing light, but it's subtracted from each other. That is why we call this subtractive mixing. Thus, with subtractive color mixing, exactly the opposite happens to additive color mixing. The colors cyan, magenta and yellow overlapping each other do not form white, but...?

Primary, secondary and tertiary colors

To build and describe a color system, three primary colors are usually mixed further until a color palette arises. The secondary colors are created by mixing two primary colors. By mixing three primary colors the tertiary colors are created, and so on. So:

• Primary colors
  The basic colors with which you (in theory) can mix all colors. With RGB these are red, green and blue. With CMY these are cyan, magenta and yellow.
• Secondary colors
  The colors you get when you mix two primary colors.
• Tertiary colors
  The colors you get when you mix three primary colors.

By playing with the following interactive you get more insight per color model into the primary, secondary and tertiary colors and how they are put together. You can rotate the wheel for a different perspective if you like.

In the wheel you can see that the primary, secondary and tertiary colors of the CMY model are always the opposite of those of the RGB model. And that is understandable, of course, given that one model adds colors and the other subtracts them.

The RGB color model

In many graphic software programs, such as Photoshop, Illustrator, Affinity Designer or Affinity Photo, you can mix colors in the RGB model with sliders for Red, Green and Blue. But to give you more insight, below is an interactive 3D view of the RGB color model as a cube, as it is often displayed.

The cube has three axes; Red, Green and Blue. And every point within the cube is a unique mixed color. You will find all possible mixed colors. Turn the cube around to get more insight into the model.

Cylindrical color systems

In the 1970s, when the computer came up, it quickly became clear that RGB for computers is a great system for storing colors in files, but for mixing colors by letting people slide on red, green and blue sliders is not so practical and intuitive to get to the right color. Try below to get the color light khaki with RGB-sliders...

That is not so easy right? Fortunately, in the first decade of the 20th century, Professor Albert H. Munsell had invented the Munsell color system. That system does not describe colors with the components Red, Green and Blue, but in the three dimensions Hue, Chroma and Value/Lightness.

This system came in handy at the beginning of the computer age and was used as a basis in the 1970s to create much more intuitive systems to mix colors. The best known derived derivative color models that we still use today are HSV/HSB and HLS/HSL. This is what we call cylindrical color systems, because you can display them in 3D as cylinders. But you can also display them as cones and I think that is a more suitable form to display these color systems in 3D.

Remember that these models are purely handy for people to easily mix colors, but that 'underwater' the computer eventually converts the colors to RGB values ​​to be able to display them on a monitor and store them in files.

The HSV color model

HSV stands for Hue, Saturation and Value. This model is also sometimes called HSB, where the B stands for Brightness. But that is exactly the same model. If I write about HSV below, the same applies to HSB.

The HSV model simulates how different colors of paint mix together, where the color hue in a certain saturation can be adjusted in different degrees from no color to pure color and the Value-parameter thereby determines how much black or white paint is virtually mixed with it to make the color darker of lighter.

Now try with sliders in this model to come to the color light khaki:

You see, with this model it is so much easier to mix a correct color. The HSV model can best be represented as a cone, where the bottom represents black (no color and no brightness) and the center of the top forms the color white with the color shades in a circle around it (hue) . Below you can see this cone interactively in 3D. Turn the cone around to see how the mixed colors are built up in this color model. Also in this model (in theory) all color possibilities of the RGB model are possible and so these colors are all inside this cone.

If you use the HSV model in graphics software, you often see three sliders and a graphical representation to instantly choose a color with the corresponding brightness and saturation:

• Hue
  Color tint. The rotation on the cone edge between 0 to 360 degrees. 0 degrees is red, 120 degrees is green and 240 degrees is blue.
• Saturation
  From 0% for grayscale (no color) to 100% for complete pure color. 0% is the center of the cone and 100% the outer circumference.
• Value
  Brightness. 0% is completely dark, 100% is completely light. Where 0% is the bottom of the cone and 100% the top.

The HSL color model

A model that is very similar to HSV is HLS. Usually this is called (although actually wrong) HSL, so that's what I call it. HSL stands for Hue, Saturation and Lightness and below you can see how this model looks in 3D:

In contrast to the HSV model, HSL does not use layers of paint on top of each other, but is about how we actually perceive colors. The bottom point is still completely black and the upper point completely white, but now the saturated colors are not on top, but already halfway in the circle, where the lightness is 50%. And 100% lightness is in this system now always white, independent of the hue and the saturation of the color. Actually you could say that the Value in the HSV model stands for the amount of light, while the Lightness value in HLS represents the amount of white. That is why HSL can best be represented as two cones on top of each other, so a bicone.

But what about CMYK?

Although CMYK falls outside the scope of this blog article, because this color model is intended for printing and is therefore not used on the internet, it is such a well-known and common model that I make a trip and briefly treat it for completeness.

Before this we saw that with subtractive color mixing, ie mixing of paint or ink, the primary colors are Cyan, Magenta and Yellow (CMY). But in many software packages you will find the color model CMYK, so what about that K then?

Although in theory you can create all possible colors and black with Cyan, Magenta and Yellow, a fourth ink is added to printing presses and printers: the K... for black. But if you have a color inkjet printer, you probably already knew that, because in addition to the color cartridges you always have a separate cartridge for black.

But why add an extra black when you get black through C, M and Y, as we saw earlier? That's for two reasons. The first one is that cyan, magenta and yellow added together never create a perfect black and the second is that creating black by mixing colors uses a lot of ink and is therefore very expensive. With every black pixel, three times the amount of ink is used and ink is expensive. That's why we have chosen to add an extra black ink so that you save cyan, magenta and yellow when printing black.

In professional graphics software you are not only able to work in RGB color models, but also with CMYK. So be careful that you work in the right color model. If you make something for press or print (so ink or paint), you usually work in CMYK. If you make something for the internet, games or video (so light), you use RGB.

If you convert from RGB to CMYK in a graphic software package, chances are that your colors are no longer the same. The color range of the CMYK color space is considerably smaller than that of the most commonly used RGB color spaces. I will explain in detail what color spaces are exactly in the next blog article.

Converting from CMY to RGB will cause fewer problems, but it is always best to make your design work right in the right color model and the right color space. This way you can be sure that your colors are as you created them in your designs.

Conclusion

So far for this first part of this two-part article about Color Models, Color Spaces and Color Profiles. I hope to give you a better understanding of what color models are. In the coming and last part of this two-part article we continue with Color Spaces. What are color spaces exactly, why is it essential for a professional to understand them and which color spaces and color profiles do you use, and when, for your graphical work? I will also make a side trip to Gamma Correction and Bit Depth. You'll find the second part here.

If you think the technique behind colors is very interesting stuff, like I do, I would invite you to read the second part right now! You'll be a pro on the subject for sure!

Continue reading part 2 right away >