Unit 1: Intro to Design
Unit 2: Figma Fundamentals
Unit 3: The Creative Process
Unit 4: Color Theory
Unit 5: Introduction to Illustrator
Unit 6: Typography
Unit 7: Layout
Unit 8: Typesetting
Unit 9: User Interface Design
Unit 10: Design Systems
1 of 2

Color Models (HSB, RGB, CMYK, Pantone)

There are multiple ways for colors to be represented. In this lesson, we will introduce the most frequently-used color models that designers need to understand. By the end of this lesson, you should be able to choose the most appropriate color model according to the need of your project and start crafting your own color palettes.

We will introduce 2 color models for digital screens and 2 other color models used for print graphics.

HSB

The first color model we will introduce is HSB, short for hue, saturation and brightness. HSB is a color model for digital screens.

This is a very intuitive color model for the human eyes. There are 3 components in this model that help designers determine the exact color they want to use.

The first component is hue. Hue helps us pin point the family of colors on the color wheel as a starting point.

If we look at a color wheel, we will find several big families of colors. Red, yellow, green, blue, magenta etc. Hue values go from 0 – 360. It starts with the red family at 0 and does a full circle of 360 degree until it comes back again to the red family. Therefore, both 0 and 360 are the richest, most saturated red.

Within each family of colors, there are numerous possibilities. For example, if you decided that your color is going to be in the red family, you have to decide how rich this red is and how bright this red will be.

There is not just one single red. There are numerous tints and shades of red.

That’s why we need the next 2 components – saturation and brightness.

Saturation means the richness of a color. Have you ever seen colors that are really “intense”? That’s because the saturation of that color is high. Have you have seen colors that look really pale and washed-out? That’s because the color has low level of saturation.

Saturation numbers go from 0 to 100. When saturation is at 0, the color will become a shade of gray. When the saturation is at 100, it will be the richest and strongest version of that hue.

On the other hand, have you ever heard someone saying “this color is neon” or “this color is so bright it hurts my eyes”?

That’s because the brightness of that color is very high. Brightness is impacted by how much light is shined on a color hue. It also goes from 0-100. At 0, imagine yourself in a room without any windows or doors and the only light source went out. You will be in absolute pitch blackness. When the same thing happens to color, the color turns to 100% black, which is why at 0 percent brightness, any color will be black. At 100% brightness, however, the color will be in its original hue and at its most “neon” or brightest state. We don’t recommend using 100% brightness on a color very often because it can cause significant strain to a user’s eyes.

All together, the value of hue, saturation and brightness, abbreviated as HSB, provides a model for designers to determine the exact color that they envision.

The relationship between hue, saturation and brightness can be visualized in a 3D diagram that resembles an ice-cream cone. The hue wheel sits at the top of the cone, where the light source is. The colors at the top of the cone are at 100% brightness, because they are closest to the light source. As we move below the bottom half of the ice cream cone, the light starts to fade out and eventually dies out completely at the very bottom tip of the cone. That’s when brightness drops to 0.

On the other hand, if we look at the ice cream cone horizontally, we can see that colors that are near the outer radius of the circle in any hue will be at their most saturated and colors that are closer to the middle of the cone horizontally-speaking will be more and more “pale”, a.k.a. desaturated.

If we examine HSB from a typical color picker in any design program, we will see something like this. First of all, we can choose the hue from a rainbow-like strip. This is the same as the circular color wheel. Imagine you cut open the circular color wheel and turn it into a horizontal strip.

Once you decide on the family of colors on the hue strip, you will then move on to determine the saturation and brightness of your color.

As you move horizontally from right to left, you will be gradually decreasing the saturation of your color. As you can see, at the very left end, your color will be a shade of gray.

As you move vertically from top to bottom, you will be gradually decreasing the brightness of your color. At the very bottom, no matter what hue you started with, it will be 100% black as the brightness value drops to 0.

As you experiment with these values, you will find a point where the color looks the most harmonious and comfortable for your design.

We will talk more about how to construct color palettes and pick colors that work well together in a lesson later.

It’s worth noting that HSB is sometimes referred to as HSV. V stands for value. It has the exact same implication as Brightness. But brightness is easier to understand than value. That’s why we prefer to call it HSB rather than HSV.

HSL

There is a very similar color model to HSB called HSL, which stands for hue, saturation and lightness. Instead of using a single ice cream cone system like HSB, HSL uses a double-cone system.

The major difference between HSB and HSL is that at 100% brightness with the HSB model, you can only get to white if your saturation is at 0 whereas at 100% lightness in the HSL model, you can get to white regardless of your hue and saturation.

HSL can be used for front-end development as a CSS color, whereas HSB is not one. Some also argue that HSL has a more accurate representation of colors due to its more complex, double-coned structure.

However, for simplicity, we recommend using HSB for most of your color design needs.

RGB

The second color model we will introduce is RGB, which stands for red, green and blue.

Red, green and blue is how digital screens, a.k.a. computers and machines, see the world. The previous color model we discussed, HSB, is actually how human eyes see the world.

RGB color model is a reflection of how red, green and blue light interact and the results we see with our eyes. The value of RGB goes from 0 – 255.

The overlapping area of red, green and blue is white. That is because RGB is considered an “additive color model”. Additive color starts with black and adds red, green and blue light to produce the visible spectrum of colors. As more color is added, the result is lighter. When all three colors are combined equally, the result is white light.

However, RGB isn’t a very intuitive color model to the human brain. That’s where the more intuitive HSB model comes in to help you pick your colors more easily.

Computers and machines understand RGB much more easily, and it is one of the several ways you can represent colors on digital screens.

Have you ever seen something like #ffffff? It is called hex codes, which is also short hands for RGB. It is another way to represent digital colors and an easy way for developers to notate colors for development.

CMYK

So what happens when you need to set colors properly for printing? If you use RGB color model in your design program and try to print it out directly, your colors will come out not exactly like what you would expect.

Printing requires different color models. One of the most economical ways to print professionally is using a method called “four-color printing”, in which technicians lay 4 plates of colors on top of each other with designated percentages to produce the color we want.

This technique requires us to use a print-only color model called CMYK, which stands for cyan, magenta, yellow and black. You may wonder why K stands for Black.

K is actually short for “key”. There’s some arguments regarding the origin of ‘Key’ to mean black. Some people say it’s because representing black with ‘B’ could confuse it with ‘blue’, but this is unlikely. It may be because the black plate is the ‘key’ plate on a printing press that aligns the other three colors to it (so the layers match up perfectly for the final image. This means any color plate, in theory, could be the ‘K’ in this process, if black were not being used. A further argument suggests that ‘Key’ refers to the very old presses way back in 1843 that used screw keys to determine the amount of ink required to achieve the desired end result.

Whatever it may be, it’s more important to remember that K stands for black – just for simplicty.

CMYK values go from 0 to 100. Contrary to RGB, CMYK is considered a “subtractive” color model. In subtractive colors, the background starts as white (like a sheet of paper in a printer) and as more color is added it gets darker until it turns black. That’s why in a typical CMYK mix, the overlapping area in the middle is black.

Pantone

Finally, we want to introduce a special print-based color model called Pantone. It is a proprietary color model created by famous color company Pantone. The selling point of the Pantone color model lies in its ability to produce exact matches of colors.

In the CMYK four-color printing process, there could be minor differences in color matching because of the variations of printing equipment around the world. For global brands, they cannot afford to have some of their marketing or packaging materials to appear slightly different due to brand recognition. For example, if you are Cola Cola, you would definitely want all of your advertising materials to have the exact same shade of red.

That’s where Pantone comes in. With its proprietary technology, designers reference Pantone color books and designate the Pantone colors that they want to use for print materials. No matter where the printers are located in the world, as long as they purchased Pantone colors, the exact replication can be achieved.

This concludes our color model lesson. If you are feeling overwhelmed, don’t worry. It is totally normal. Don’t try to remember everything – start paying attention to subtle differences of colors and observe how other designers use them for design.

Scroll to Top