Reasons To Ditch HSB Color for your Color Systems
For years, designers have used HSL to create beautiful and engaging screen-based color systems. But there’s a better way. LCH is a more accurate color model that takes into account how human vision works. In this blog post, we’ll discuss the differences between HSL and LCH, and why you should use LCH instead of HSL for your next project. Stay tuned!
In a previous article, we spoke about the development of the RGB color model is more closely related to how screens work rather than being an intuitive user-based solution. In the early 1970s scientists developed HSV AND HSB versions as an alternative that would be intuitive; more closely matching the way that human beings processed color information. However, there were trade-offs involved.
The sacrifice of human perception for easier models is an unfortunate trend when it comes to color spaces. Processing capability was very expensive. In order to make computers cheaper, developers had traded off accuracy and vividness with speed – leading us down a path where the colors generated did not match human perception.
What makes HSB inaccurate, we have to look at how HSB maps to color. If we look at the hues of color generated (0-360) with exactly the saturation and lightness values we would expect them to all be of uniform value across the color range, however, this is not the case.
With HSL, fully saturated colors are mapped to the peak RGB values and placed around a hue circle at a lightness value of 50, with values 0 and 100 being black and white. When a shade or tint of a color is needed, it gets mixed with white or black
HSL places a color’s pure chroma in the center with shades and tints emanating from either direction. Problem is that luminance is inconsistent across the range of values.
LCH- Luminance is more even across the range of color values and the model shows where pure color chroma is from a luminance perspective blue is at 30 while yellow is at 90.
Notice how in this HSL model, colors are most vibrant and colorful in the 50 range. That’s because there is no black or white mixed in, it’s just the pure hue. This is a fundamentally incorrect way of describing the lightness of color because yellow is much lighter than blue with the same HSL lightness value.
Uneven Lightness is a fundamental problem in the model HSL model. It’s a deal breaker for a color system.
Placed next to each other, Yellow is the lightest color, Blue is the darkest, and green is three times lighter than blue and 2 times lighter than red. It’s an ineffective system in making uniform color systems that can quickly gauge contrast against white and black backgrounds giving you little control over where colors pass WCAG contrast guidelines.
Unpredictable contrast ratios between color variants is a nightmare when using a color system at scale, which leads to three unacceptable inefficiencies.
- You are manually checking before and during the development process, slowing development down.
- You are allowing the process slip to the quality assurance process
- You are not fixing these color discrepancies at all, which hinders UX and brand identity efforts.
These are some very important reasons the HSB color model is compromised, it turns out that since computer processing capability is far better today, we do not have to rely on 50 year old color models to develop our color systems. Introducing CIE LAB and the LCH model.
A diagram of the CIELAB color model. It has similar attributes to other color models discussed but is more closely correlated to how human beings perceive color.
CIELAB Origins
In the 1940’s, American color scientist Richard Hunter introduced a tri-stimulus model, Lab, which is scaled to achieve near uniform spacing of perceived color differences. While Hunter’s Lab was adopted as the de facto model for plotting absolute color coordinates and differences between colors, it was never formally accepted as an international standard.
A little more than 30 years later, the CIE (Commission Internationale de l´Eclairage FR) (The International Commission on Illumination EN) published an updated version of Hunter’s Lab: CIELab. The correct way to pronounce it is “see-lab”, or “L-star, a-star, b-star,” but some applications and instruments simply call it L, A, B, or Lab.The model was a perceptually uniform color space that became more utilized in applications like scanning calibration, screen display calibration, and photographic print calibration. With the advent of web design, leaner color measurement methods were used due to the lack of screen resolution.
The diagram above describes the parameters of CIELAB control
L* defined black and white on a 0-100 scale, CIELAB designed this component to closely match human perception.
A* is on a positive/negative scale with zero in the center, positive values are red, while negative values are green.
B* is on a positive/negative scale with zero in the center, positive values are yellow, while negative values are blue.
This has some RGB clunkiness, but the User Centered variation that developed was the LCH color space, a cylindrical representation of CIELAB. The A and B channels are replaced with a chroma value which is relative saturation, hue angle, while lightness is unchanged. The Hue angle is similar to HSB space but not identical.
The significance of color improvement is the number of separate colors in the mix, Since HSL is a version of RGB, it sees 3 colors, Red, Green, and Blue
LCH is more nuanced by using 4 colors, Red, Yellow, Green, and Blue.
Another key difference is the map itself, HSL fits in a Cone, while LCH fits inside a cylinder, As you can see in the model. produce impossible colors, for example, look at the yellow and orange problem, there does not exist dark saturated yellow or orange. The closer this gamut gets to black or white, the few color choices are distinguished by the human eye. For now, there remains a limitation to this model through the display qualities of monitors and screens that adopt an SRGB color gamut. Still, the improvement to this system lies in its improvement in perceived lightness, which creates more consistent color variations across the hue. This system also will allow for improvements to screen technology to render more color variation.
LCH Parameters
LCH is controlled with Hue, Chroma, and Lightness controls. LCH is just as user-centered as the other models discussed.
The parameters of LCH are as follows:
Lightness- 0-100 scale, matches human perception.
Chroma- 0-100 scale, is varied across the lightness range, a color system tool like Atmos will limit chroma as you adjust the lightness value. This feature ensures consistent value across the range, very helpful for web color applications that need to adhere to WCAG contrast guidelines.
Hue- 0-360 scale, works very similar to HSB.
There is a clear advantage to LCH in easily controlling lightness consistency, Semantic colors like warnings can be emphasized with elevated chroma while subordinating base text with slightly decreased chroma. In short, you have fine-tuned depth control using LCH. It is far smoother despite being constrained to a truncated SRGB screen space.
CIELAB and LCH have been around for nearly as long as RGB and HSB, but have been neglected with limited support in applications. For example Adobe Illustrator has a lab mode buried in the swatches panel, but is not front and center with the color picker tools. It seems strange as the vector work for icons and brand identity as well as my color system planning has a home in that software. Figma has plugins that have been developed, but are hardly robust enough to build an entire system.
A striking feature of LCH is even color across a system, illustrated by its even Hues across a color range. By contrast, HSL has glaring hotspots in yellow, cyan, and magenta. HSL is tricky to make even lightness in a color system.
There are some really exciting tools that utilize the chroma.js library that are around that you should give some attention to. I enjoy all three but appreciate the way Atmos gives limitations to the chroma value depending on the lightness value, I find this feature helpful. I also appreciate the ability to adjust values from the graph and make fine tune edits as needed. Atmos unifies color data with color perception, helping a designer make better choices.
An example of a complete color system generated in an LCH color model. It allows for even color and setting specific values to exact contrast ratios, taking the guesswork of using this color system for web accessibility guidelines.
WCAG 2.1 calculates the contrast ratio by dividing the luminance of the foreground color by the luminance of the background.
The problem is this method provides a linear result, while the human eye perceives contrast between lighter colors more than it does darker colors.
It’s worth noting that W3C is aware of the problem and they have developed an APCA (Advanced Perceptual Contrast Algorithm) contrast calculator that is perceptually accurate. These updates are in the WCAG 3 working draft and will change over time. To future-proof your color systems, it will help to use both version 2.1 and the version 3.0 draft to make your color system decisions.
Starting the research on this series of blog articles has taken me a couple of months and rapidly changed the way that I see how color systems are made. It has challenged my knowledge about how color is perceived, constructed, and organized. What I can say is that don’t be intimidated by it. Make your decisions, allow the tools that are available to give you examples to perceive, and use your individual perceptions to color to make your own best decision.
In the next article, I will address various naming conventions to help you organize a color palette that can scale for your needs.
