What is OKLCH, the new color model designed to be perceptually uniform?
There are color models such as
What are OKLCH colors?
https://jakub.kr/components/oklch-colors
To understand how OKLCH differs from other color models, we first need to understand some basic color concepts. A color model is a system for describing color, and there are many such as RGB, HSL, LCH, OKLCH, etc., which fundamentally determines how easy it is to manipulate and understand color.
A color gamut indicates the range of colors that can be represented by a color model. Common color gamuts include sRGB and Display-P3.
When we get into color spaces , things get more nuanced. Not only can we define the color gamut, but we can also define factors like the white point and transfer function. 'For the sake of brevity, I've decided to leave out the color space part,' Krehel wrote.
Like LCH, OKLCH is composed of three values: lightness , saturation , and hue . The difference between OKLCH and LCH is the color space used by the color model, which is OKLab .
Brightness can be adjusted evenly by specifying a value between 0 and 1. Saturation controls not only the saturation but also the color intensity. Hue can be adjusted between 0 and 360.
For example, let's say you're designing a set of rounded buttons (pill buttons) like the one below, and you want to set different colors for each. The typical workflow when using sRGB is to define the first color and then manually select the other colors to match. However, with OKLCH, you can use the same value for all colors and just change the hue.
You can do the same thing with HSL, but as you can see in the image above, some colors are bright and some are dark, and some are prominent and some are not, so the colors don't look uniform. In contrast, OKLCH makes it easy to use colors with uniform brightness and saturation just by changing the hue, making it easy to introduce perceptual uniformity into your design. This is one of the advantages of OKLCH over other color models.
In addition, OKLCH can create predictable color changes by changing values other than hue.
For example, when you change the value of lightness, there's no change in hue or saturation, unlike in other color models. When you change only the value of lightness, OKLCH maintains a consistent blue tint across all shades. On the other hand, HSL becomes purple-ish in lighter shades and grayish and muddy in darker shades, Krehel noted.
The way OKLCH calculates gradients is very different from sRGB. In sRGB, gradients are calculated using red, green, and blue values, which often results in blurred or uneven brightness in the middle. However, OKLCH calculates based on lightness, saturation, and hue, so even if the starting and ending colors are the same, the middle of the gradient can end up being completely different colors.
However, while OKLCH's gradients may appear smooth, they can also reveal colors that have never been defined before, which Krehel describes as a 'double-edged sword.' The reason why completely different colors appear in the middle of OKLCH's gradients is because the hues are circular, meaning the gradient can take unexpected detours.
To get around this, Krehel says many tools use OKLAB for gradients, which he says creates more consistent gradients because the hues are linear.
Modern displays can display a wider color gamut than sRGB supports. Therefore, color models that comply with sRGB cannot effectively utilize the wide color gamut of modern displays. On the other hand, Display-P3, which OKLCH supports, can express a wider range of colors than sRGB.
OKLCH also allows you to define colors beyond those that can be displayed on the actual display, and allows you to specify values that do not fit into the actual color gamut, such as sRGB or Display-P3.
OKLCH was introduced in CSS Color Module Level 4 and is supported by all modern browsers, but please note that some older browsers may not support OKLCH.
There is also a tool called 'uchu' that can generate color palettes compatible with OKLCH, so if you're interested, try using it.
'uchu' that can generate color palettes with an extended color gamut compatible with OKLCH - GIGAZINE
Related Posts:
in Note, Posted by logu_ii