Introduction#
The reason I thought about oklch again and wanted to write a short article is because daisyUI released a new version 4.0, which introduces oklch.
It's time to think and talk about this new color system.
After the Introduction#
First, how should we write "oklch"?
In the CSS standard (future) (https://www.w3.org/TR/css-color-4/#lab-colors:~:text=LCH%2C%20Oklab%20and-,Oklch,-9.1.%20CIE), the first letter is capitalized, "Oklch". But interestingly, the first letter of "Lab" is capitalized, "LCH" is all capitalized.
In browser implementations, it is naturally written in all lowercase, "oklch".
(https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch)
(https://www.w3.org/TR/css-color-4/#specifying-oklab-oklch).
In the release log of daisyUI mentioned earlier, it uses all uppercase "OKLCH".
In terms of pronunciation, I prefer the full pronunciation, "O-K-L-C-H". If "l" is in the middle of the word, it is destined not to be easily simplified. "oklab" is pronounced as "ok-lab", which is quite smooth, hahaha.
Beginning - What is oklch#
Okay, the article is a bit top-heavy, but actually, for most people, even at this stage, oklch is still somewhat unfamiliar to many frontend engineers and designers.
I highly recommend this article, which explains it in great detail.
https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl
(Also, the complex original author's paper https://bottosson.github.io/posts/oklab/)
In simple terms, oklch, and its family, is a new way of representing colors. And I believe that oklch will become the mainstream color in the near future.
oklch, "l" for lightness, ranges from 0% to 100%.
"c" for chroma, saturation, ranges from 0 to 0.37.
"h" for hue, angle, ranges from 0 to 360.
"c" and "h" form a point in polar coordinates.
On a large color palette, "h" can determine an angle, which can be intuitively associated with a rainbow 🌈, red, orange, yellow, green, cyan, blue, purple, rotating clockwise from 0 (approximately, in oklch, the angle for red is 20). "c" determines the distance from the center point, the farther the distance, the farther from 0, the higher the saturation, and the more vibrant the color; conversely, the lower the distance, the closer to gray.
And "l" for lightness is the most outstanding feature of oklch in my opinion. Oklch adopts "perceived lightness" instead of traditional lightness. By analogy, it is similar to the logarithmic representation of sound in decibels. Just as there is a non-linear and non-uniform relationship between "ear auditory volume-sound energy," "emitting brightness-retinal perceived brightness" is also non-linear, non-uniform, and different. Oklch solves this problem. This is a problem that no previous color system, from RGB CMYK to HSL, has been able to solve or can solve. This feature is very pleasing to frontend developers and designers.
Equally outstanding, the combination of "c" and "h" in the plane can cover a very wide range of colors. This is something that traditional RGB additive color representation cannot achieve, which is why I think oklch will shine in the future. Not only P3, not even Rec2020, with the development of industry (yes, industry, not just computers or the internet), future colors will be included in a predictable form in advance.
Also, because of this, you may not even use up "c", 0.37 is not a value that all colors can reach.
"l c h" can all be decimal values, determining their precision, that is, the number of colors that can be represented, without limit.
This color format has the dual characteristics of a rainbow and a shrimp.
What is it used for?#
To make red redder.
(https://oklch.com/#62.795536061455145,0.2872,29.2338851923426,100)
Taking RGB as an example, you cannot give a number larger than ff, 255, so you cannot represent a redder color. Because the essence of RGB is to define the reddest point. 0-ff is just dividing the red component equally. That's why "#f00" and "#ff0000" represent the same color, they are just different divisions, different numbers of grayscale. Adding to "#fff000000" will not make red redder, it will only make the red-white gradient more delicate.
In addition to making red redder, the blog mentioned earlier also mentioned many reasons that are more friendly to development, which I won't go into here. The simple reason is that previously, to achieve the effect of a button becoming brighter on hover, you needed two colors; now, you only need to adjust the "l" component in lch.
:root {
--accent: oklch(70% 0.14 113);
}
.button {
background: var(--accent);
}
.button:hover {
background: oklch(from var(--accent) calc(l + 10%) c h);
}
For designers, it is also easier to generate a series of colors or color palettes based on a wider color gamut.
In the Middle#
The conversion between oklab and oklch is not mentioned again. The relationship between lch and oklch is also not mentioned again, as it is explained in detail in the previous blog.
At the End#
I am actually a very precise person when it comes to colors. In my daily work, I can roughly adjust/use RGB components to directly obtain the color I want; or I can imagine what kind of scene is hidden behind the six hexadecimal numbers.
But this skill is probably going to be lost. (AirTag, right?)
Oklch is just too intuitive. And it is more intuitive in a more convenient way, while being able to express more content.
The next era of color is destined to be the era of rainbows and shrimps.