Flexible color palette: strict algorithm or by instinct?

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. Likewise, I would like to give practical tips on how to precisely realize a flexible color palette either for a design system or a smaller project.

Every time I started a new project, I 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 colors properly?
How can I create a well-scalable palette that works for both Light and Dark modes?

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

Designen in RGB(HEX), HSB oder HSL?

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: "Das ABC der Farbe" can also be very helpful.

RGB and HEX

The RGB model is often used by designers to represent colors. Quite 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 decimal 0) to FF (corresponding to decimal 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.

Fig. 1: Example of a light blue color in RGB and HEX

You can find out 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 requires between five and ten gradations of a color (for example for diagrams or various 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. This is 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 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.

Behavior of the color in HSB color model when one of the values is changed — 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 describe 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. Therefore, 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. Unlike the HSB color model, 100% lightness corresponds to 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 lightness 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. I end up converting my colors to RGB values and providing them to the developer. Other aspects that influenced my decision are:

Firstly, the hue provides a fantastic opportunity to create different color variations because there are so many options for me to choose from between 0° and 360°. If I bring the values slightly up or slightly down, I get a number of nice color variations to choose from.

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

Secondly, using saturation makes it easier to adjust the visual color corrections. In case 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

Thirdly, black is not the opposite of white. This can be 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 option is to add black or white to any color. To add white, you need to move your color towards white. White is located in the upper left corner.

Wenn Weiß hinzugefügt wird, wird die Farbe stufenweise heller — Figure 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 odd 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 saturation and decrease 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 to try 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.