Flexible color palette: Strict algorithm or by feel?

This article is neither about color theory nor about color effect. I want to share my knowledge, experience and research results that I gathered during a long time. Also I want to give practical tips how to precisely realize a flexible color palette either for a design system or a smaller project.

Every time I've started a new project, I've asked myself these three questions:

Which color model do I work best with? Which color model allows for better harmony and hierarchy?
how do I combine the colors correctly?
how can I create a well-scalable palette that works for both light and dark modes?

In this part I explain why I chose HSB color model and what problems I faced while working with other color models.

Designing in RGB(HEX), HSB or HSL?

I briefly explain and show how the most common color models work. If you want to know more about the color systems and their structure, you can inform yourself for example in Wikipedia. The book by Markus Wäger: "The ABC of Color" can also be very helpful.

RGB and HEX

The RGB model is often used by designers to represent colors. Very simply explained, the RGB color coding describes the intensity of red, green and blue in a color. The intensity is represented by a number from 0 to 255. For example, we can define a light blue color with a proportion of red (135), green (195) and blue (245).

The HEX model designates the colors instead of the three decimal expressions for red, green and blue summarized with a 6-digit hexadecimal code. In this system, a color is represented by three consecutive hexadecimal numbers, each representing a color of the RGB color space: '#RRGGBB'. The intensity values for HEX colors range from 00 (corresponding to the decimal number 0) to FF (corresponding to the decimal number 255). For example, #FF0000 is a pure red. In fact, #FF means that the red reaches the highest possible intensity and the blue and green the lowest.

Beispiel von einer hellblauen Farbe in RGB und HEX — Fig. 1: Example of a light blue color in RGB and HEX

You can look up how to convert the color from RGB to HEX here.

For smaller projects, where I only work with up to three gradations of a color, it is not complicated to define the values for gradations. As soon as the project needs between five and ten gradations of a color (for example for diagrams or different tables), I run into a problem. With the RGB color model, it is not easy to intuitively understand how to achieve a lighter or a darker value of the primary color without destroying the harmony. That's the reason the RGB model doesn't work well for me.

HSB

The HSB color model describes three basic characteristics of colors:

H stands for Hue.

Hue is the color that is reflected or absorbed by an object. Hue is given as a number of degrees between '0°' and '360°' on the standard color wheel and is usually referred to by the name of the color (e.g. red, orange or green).

S stands for saturation.

Saturation describes the purity or intensity of a color. It represents the amount of gray in relation to the hue and is expressed as a percentage value between '0%' (gray) and '100%' (fully saturated).

B stands for brightness.

Brightness describes the visual perception of the amount of light emanating from a light source and determines how bright a color appears. Brightness is also called luminance in another context and ranges from 0% to 100%. When luminance is 0%, the color is rendered black regardless of hue or saturation.

Verhalten der Farbe in HSB-Farbmodell, wenn einer der Werte geändert wird — Fig. 2: This is how the color in HSB color model behaves when one of the values is changed.

The combination of hue-saturation-brightness is a human approach to describing a color. Next time, remember how you describe a color to someone or what words you use when describing it. For example, when we hear that a color should look more vibrant, we automatically think of saturation and purity. The fact that the HSB model is based on human color perception gives me the ability to efficiently apply my ideas to design.

HSL

Just like the HSB color model, HSL describes three basic characteristics of color: H for Hue, S for Saturation, and L for Lightness. Thus the only difference to HSB is the lightness, which is represented differently. In this case the lightness shows how close a color is to black or white. If the lightness is '0%', the color will be black regardless of hue or saturation. In contrast to the HSB color model, 100% corresponds to the lightness of a white color. This is the biggest difference between the two color models.

Verhalten der Farbe in HSL-Farbmodell, wenn einer der Werte geändert wird — Fig. 3: This is how color behaves in an HSL color model when one of the values is changed.

HSL and HSB color models are very similar. Something that confuses me personally is that the HSL brightness property has a strange mix of saturation and lightness. So at 50% lightness and 0% saturation the color is gray.

Decision

Despite the fact that CSS supports the HSL color model, I decided to work with HSB. In the end, I convert my colors to RGB values and provide them to the developer. Other aspects that influenced my decision are:

First, the hue (Hue) provides a fantastic opportunity to create different color variations because I have so many options between 0° and 360°. If I bring the values slightly up or slightly down, I get a range of beautiful color variations to choose from.

Verschiedene Variationen blauer Farbe mithilfe von Änderungen des Farbtons — Fig. 4: Different variations of blue color using hue changes

Second, saturation makes it easier to adjust the visual color corrections. In the event that I have a color that really overpowers everything in my design, I can quickly correct it by lowering the saturation. In the example below (above), the blue teaser boxes are designed with 90% saturation. Anyone can immediately see that they are totally out of line and drawing too much attention. A high saturation value of blue destroys the balance between different teasers. In the lower part of the image the balance was corrected using saturation.

Teaser Boxen mit verschiedenen Werten von Sättigung der blauen Farbe — Fig. 5: Teaser boxes with different values of saturation of blue color

Third, black is not the opposite of white. This is explained by looking at how black and white are formed:

Black: hue and saturation can be anything. Brightness is set to 0%.
White: Hue can be anything. Saturation is set to 0%. Brightness is set to 100%.

Another proof possibility is to add black or white to any color. To add white you have to move your color towards white. White is located in the upper left corner.

Wenn Weiß hinzugefügt wird, wird die Farbe stufenweise heller — Fig. 6: As white is added, the color becomes progressively lighter.

To add black, you need to move your color towards black. Since black is the entire bottom of the color selection rectangle, adding black only decreases the brightness. Saturation does not matter. On a practical level, the darker hues you get by adding black are less vibrant compared to the lighter versions.

Wenn Schwarz hinzugefügt wird, wird die Farbe stufenweise dunkler und trüber — Figure 7: As black is added, the color becomes progressively darker and duller.

One of the reasons we find this strange is that there is no pure black in nature. A good solution to create a more vibrant and saturated palette is, instead of adding black, to remove white. This will increase the saturation and decrease the brightness.

Wenn Sättigung und Helligkeit in Richtung rechts-unten geändert werden, wird die Farbe stufenweise dunkler aber trotzdem lebendiger — Fig. 8: As saturation and brightness are changed towards the right-bottom, the color becomes progressively darker but still more vivid.

You can decide for yourself which color model suits you best and meets all your requirements. There is no right or wrong solution. I would suggest trying to create a user interface with all models. This is the only way to properly evaluate all three color models and make a decision that is right for you.