First-of-all, to get a better understanding of the current digital color systems and how we use color in our day-to-day workflow as a designer working with digital products, we need to start with a few basics of color like, what it is and how it’s formed.
We started using colors right from ancient times, where our ancestors used it as a language from nature to speak about their culture and emotions. The colors of a coral snake say “I kill.” The colors of a ripe fruit say “I am sweet and nutritious” and many more, in a way colors act as the powerful symbols by which you live or die.
But in the real-world, color is our perception of an object’s reflected or emitted light. It depends on its wavelength, brightness, and its environment. And there is actually a physics that goes behind it in understanding the different wavelengths of the visible light spectrum. So primarily, we have two different types of light spectrums. The additive(RGB) color model which is produced by light such as the beams of a screen (example: TV, Computer displays) and the subtractive(RYB) are tangible colors which are produced by the surface of objects in physical-world which then further simplified to CMYK(cyan, magenta, yellow, and black) color model, as these colors are most effective set of colors to combine included black ink, the key(k) component the model was named CMYK, mostly used in paintings and print media.
Now, that we want to talk about the color systems of the current digital era let’s narrow down our discussions accordingly. The inside of your computer is all 1’s and 0’s, which means that, to your computer, color is just bits. If you’ve ever coded HTML and CSS, you’re probably familiar with RGB() function where you define a color with the particular amount of red, green, and blue primary color channels with numbers ranging from 0–255 (total of 256) for a certain other colors to form which is understood by computers to display on the digital screen. This model is further simplified into a hexadecimal representation preceded by #-sign, with some help of math transforming each 3-digit number into a 2-digit hexadecimal number taking numbers (0–9) and from numbers (10–15) are represented with letters (A-E) in a way we ended-up with smallest color code that is easy to use and remember. But, just because this model is produced by digital medium and the math is understood by computers doesn’t mean it’s easy for humans working with colors on the digital environment. That’s where the HSB and HSL color models come in, which are the more human-friendly way of describing colors in how the human eye perceives color, versus how a display would (in RGB). It helps us to bridge the RGB model, understood by computers, to mix colors more like humans do. You may have also heard of RGBa. The A in RGBa stands for the Alpha channel, which represents the Opacity of the color (from 100% to 0%). All color profiles will have an additional Alpha channel where we can adjust color opacity.
Still with me, OK. As we got the understanding of two different color models or spectrums of light, let’s go with the RGB(red, green and blue) model in demonstrating how we use in the digital space. So for that, we need a color wheel(A color wheel or color circle is a circular representation of a light spectrum which is linear by default (or) an abstract illustrative organization of color hues around a circle, which shows the relationships between primary colors, secondary colors, tertiary colors, etc.) in which it helps us to start defining our colors. And, now we use the human-friendly (HSB & HSL) models that we just discussed in defining our digital color systems. So, let’s understand what exactly each of these terms means.
Hue: Hue refers to the pure spectrum of colors. And it represented as an angle in a color wheel. While drawing colors using the RGB color wheel we are actually selecting from mixed combinations of different colors formed by the primary, secondary, tertiary and so on which ended-up filling the complete 360 degrees of a circle, where each obtained result is termed as a specific ‘hue’, i.e., Red, green, blue and every other combination on a color wheel is represented as an individual hue that again forms the complete light spectrum of colors.
Saturation: Saturation ranges from values 0–100, where every hue takes a default value of 100 i.e., the purest(100%) form of its own color and it reduces its purity as we move from 100 to 0 values resulting in a darker/lighter grey versions depending on luminance(the amount of light present in every color, for example, yellow has a larger luminance/lightness than blue) of a specific color.
Now, you may notice that both HSB and HSL color models have the hue and saturation as common attributes and the actual difference comes with added the brightness and lightness to a selected hue. By the way, don’t you wonder where the white and black on the color wheel have gone?. Because, in an RGB model to achieve white, we need to increase each individual channel value to maximum i.e., at value 255 where all three primary colors mix to produce white light and decreasing the values to 0 results in no color which is black. And this can’t be represented in the RGB color wheel. Another drawback is that we also can’t adjust the saturation of a particular hue using the RGB color model. Whereas in HSB and HSL models we can adjust all saturation, brightness and lightness values in a pretty straight-forward way. And below are the 3D representation for both of these models.
Difference between HSB and HSL
So, here comes brightness and lightness
Brightness: Like saturation, brightness also ranges from 0–100 values where 0% is black no matter what the hue or saturation values are and 100% is again purity of particular hue similar to saturation but, here’s a catch now we can achieve white with HSB is reducing it’s saturation to 0 and brightness value to 100 (i.e., the hue loses its purity on 0 saturation and resulted grey will turn to white on increasing the brightness to maximum at 100). In physical space, brightness is how much light an object sends to our eyes.
Lightness: Lightness is similar to brightness but it’s a bit more refined version where now black and white are actually opposites taking 0 and 100 values respectively and hue purity lies in middle at value 50.
Now that we know both the HSB and HSL color models are the most human-friendly way of selecting colors, I encourage you to go with the HSL model where it keeps light and saturation aspects of the color model unique from each other which can be easily manipulated or adjusted at any stage of digital design and development workflow. Light can range from white to black in which our desired color/hue will be in the middle. Whereas in the HSB we can only range from our desired color/hue to black. This means, the HSL color model is not only a more straightforward approach but also has more scalability factors when working with digital products. And I will demonstrate that as we continue to move further with the article. Below is a representation of how modern tools like figma, sketch, and XD show a 2D representation of HSB and HSL color models transformed from an early cone and DI-conical 3D structures respectively.
So, now let’s put this model into practice and see how it helps in improving our workflow of generating the whole color set needed for communicating our digital products.
The HSL approach
Let’s say we defined our color theme(which normally consists of 3–5 base colors/hues) for our brand using the RGB color wheel and let’s consider one of our selected base hues is at the angle of 220(hue) and name it as ‘brand-blue’ as it is near to primary blue at angle 240 and try to scale it using default RGB and the human-friendly HSL color model to see why HSL model is a more meaningful way of approaching colors in digital space.
Notice that from the above comparison image, in the HSL model the selected base hue is represented clearly with value 220, where we can also easily adjust its saturation and lightness values. But, one thing to notice tough by using the HSL model, we need to make sure that the saturation is 100% and lightness at 50% to start with the pure form of the selected hue. And on the other side in the RGB model, the selected hue is shown is a mix of three primary color channels each taking a specific value to obtain the desired result and it’s too difficult for a normal human being to adjust the saturation and brightness using the same RGB values. And this problem continues when we try to scale the selected hue using the RGB model which is clearly demonstrated by fig below.
So, by using saturation and lightness values we have much flexibility in a way we end up generating different tones, tints, and shades of a particular hue. Now the tone, tint, and shades are just a classic way to represent the saturation and lightness values where the amount of gray added to a hue is termed as tone, and the amount of white is termed as tint and similarly, black added is termed as shade.
Finally, we are able to conclude that why HSL color model is a more human-friendly and meaningful way of working with colors on a digital space, in part-2 of this article I will be demonstrating it even further and who companies like Google, IBM, Lyft take advantage of this approach. We will also discuss how to deal with accessibility a.k.a contrast, colorblind, naming conventions, development workflow, and other best practices including several tips and tricks when defining and maintaining colors for a design system.
Color has always been a complex system to work with, and as a designer designing products for digital environments, it’s not an exception. So, I hope you got a nugget from this article(Part-1), in defining the right foundation, when approaching colors for a digital space. And I’m excited to hear your feedback which the only way I can make this better. Thanks for reading.
