LCH is a color space designed to model human perception of color which means it’s perceptually uniform. This makes LCH great for creating color systems that are accessible, consistent, and predictable. In this blogpost we will explore:
What LCH is all about
Why it’s better than HSL
How it can help you in design
What is LCH?
For the past few decades, we’ve been using sRGB color space on the Web. sRGB is limited to 16.7 million colors which might seem like a lot, but in the past few years our pc, laptop, and phone displays evolved fast and it’s not uncommon to have a display with more than 100% sRGB coverage. Coupled with the fact that sRGB was designed according to how our displays work, it’s not very well suited for creating great user experiences. That’s where LCH comes in.
LCH (or HCL, CIELAB, LAB, CIELUV, CIELCH) is a color space that was first defined in 1976 by International Commission on Illumination (CIE), hence the name CIELAB. CIE is the international authority on light, illumination, color, and color spaces. LCH’s main goal is to achieve perceptual uniformity, which means that it should behave according to how our eyes work. It can, in theory, describe an infinite amount of color, however, for us, what is important is that its color gamut is larger than the one from sRGB. More colors mean even more beautiful websites.
LCH stands for Lightness, Chroma, and Hue. Which at first looks similar to HSL (Hue, Saturation, and Lightness) but each of these spaces describes colors differently. Let’s look at the parts separately.
LCH Lightness vs HSL Lightness
Lightness describes the relative brightness of a color. However, each space goes about it differently.
HSL lightness resembles the amount of black or white added to a pure color. For example to create light blue you add white to a pure blue hue.
LCH lightness describes the relative brightness to a similarly illuminated white
In the example below we see the same hue of Blue and Yellow represented in HSL and LCH. Each shade has maximum chroma or saturation and we are only changing the lightness value.
Notice how the HSL colors are the most vibrant and colorful with the lightness of 50. 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 the yellow looks much lighter than the blue with the same HSL lightness value.
On the other hand in LCH both yellow and blue are gradually increasing in lightness and the yellow shades don’t look any lighter than the blue ones.
LCH Chroma vs HSL Saturation
Comparing Chroma and Saturation is a bit tricky because both work differently. But in general, these values describe how “rich” or “pure” the color is.
HSL saturation has a fixed range of 0 (grey) to 100 (purest)
LCH chroma has a range of 0 to approximately 131. Not all colors reach this number because only some colors can be so vibrant on our screens
In the example below we see the same hue of Blue in LCH and HSL we are only changing the Saturation or Chroma value in equal increments. Notice how the shades in LCH almost blend together while there are pronounced steps in HSL.
In this next example, we changed the hue to Light Blue and again you can see the blending in LCH and steps in HSL.
LCH hue vs HSL hue
Hue works almost identically in both color spaces. The color spectrum starts at red and goes through green, blue, and back to red. The only difference is that hues in LCH are slightly shifted when compared to HSL.
Notice how in the example below hue value of 0 in HSL is pure red and for LCH it’s a pink-ish red. The example also illustrates the perceptual uniformity of LCH — all colors have the same lightness and saturation, the only thing that changes is the hue. You can see that in LCH the colors start to blend, while in HSL they are wildly different.
History of choosing colors for UI
In the 2000’s it was very common to choose colors for a website solely with HEX or RGB. At that time there weren’t that many fancy tools for picking colors and HSL weren’t that widespread. If you needed an orange color, for example, you would take a red color add a bit of green and call it a day.
This blind way of picking colors was very quickly replaced with Photoshop and its color tools. Years later and we still use the same tools in Figma or Sketch. Nowadays the gold standard is HSL because of its ease of use.
Recently a lot of shade generators and palette generators started popping up. These tools are usually smarter than just changing HSL Lightness across the given shades. However, usually, you don’t get much customization.
This is where LCH comes in. It is the best way to create uniform, accessible, and predictable UI color palettes. It will take some time, but we’re confident designers will eventually stop using HSL because of its inconsistencies and switch over to LCH or some similar color space.
For more information on the benefits of LCH check out this great post by Stripe (the payment platform) on how they made their color palette accessible.
The best way to start playing around with LCH color space is to use Atmos. We created Atmos to offer the benefits of LCH color space to everyone from hobby developers to professional designers aimed at creating a color palette for their design system.
LCH makes UI design a breeze
Thanks to the properties of LCH color space several things are so much easier to do with it when it comes to UI design. These are:
Built-in accessibility thanks to consistent contrast
If you’ve ever worked with HSL you probably noticed that two different colors with the same lightness have wildly different contrast ratios. Because of how the lightness values work in LCH different colors with the same lightness will have almost identical contrast ratios. This makes ensuring accessibility so much easier.
Interchangeable colors
Because of the perceptual uniformity of the color space, you can easily swap colors knowing that they’ll have the same contrast ratio. This makes experimenting with different colors in UI so much easier.
Flexible color palette
Adding colors or shades to your palette in LCH is simple. There is no need to remember how you’ve created the palette. If you match the lightness and saturation levels of other colors you can be sure that the new color will have the same contrast ratio and will be perceptually uniform.
HSL is dead — Long live LCH
If you didn’t notice already we LOVE the LCH color space. In our opinion, it is currently the best color space for creating UI color palettes. All things considered, LCH has one disadvantage and that is the fact that is not widely supported in popular design tools, on the web, or in mobile apps, yet. But converting colors from LCH to HEX (or RGB) is a small tradeoff for all the benefits.
LCH Playground for everyone
Now it’s your turn! We’ve created Atmos for anyone interested in exploring colors and experimenting with UI color palettes in LCH color space. Go ahead and apply your new knowledge and create something awesome with Atmos.
Top comments (0)