Color picking Oklch for mortals

Complicated things Some people really like complicated things, either because it makes them feel smart(er) or because it can be used as a flex for skill (or a masqueraded impression of skill), or because whatever l33tz0r reason. Oklch is one such thing, it is complicated (at least for me), and screw it i’m fine with good old #hexcodes and coder colors everywhere. But the design community in social networks and other loud mediums embraced Oklch like it was the last coca-cola in the desert, if you are not using it you are outdated and do not have enough skillz. To get a feel of how mind bending Oklch is, go ahead and play around with the (official?) Oklch color picker in https://oklch.com/ and then get back here if you are still in the mood. Truth is there’s actually something useful here in Oklch, and in this post I’ll try a top-down approach to make it evident.

复杂的事物 有些人真的很喜欢复杂的东西，要么是因为这让他们觉得自己更聪明，要么是因为这可以作为一种炫技（或伪装出的技术感），又或者是因为其他什么极客理由。Oklch 就是这样一种东西，它很复杂（至少对我来说是这样），去它的吧，我还是满足于古老的 #hexcodes 和随处可见的编码颜色。但社交网络和其他喧嚣媒体上的设计社区却像对待沙漠中最后一瓶可乐一样拥抱 Oklch，仿佛如果你不用它，你就过时了，技术也不够硬。为了感受一下 Oklch 有多烧脑，你可以去 https://oklch.com/ 玩玩那个（官方的？）Oklch 取色器，如果你还有兴趣的话，再回来这里。事实是，Oklch 确实有其有用之处，在这篇文章中，我将尝试用一种自上而下的方法来阐明这一点。

ELI5 Oklch I am a passionate color picker creator, and I happily went down this Oklch rabbit hole, reading specs and trying to understand the matricial nature of colors in technical blog posts. A couple of years have passed, those ideas have matured, and here we go again. Perceptual is key here, it means if you set the Lightness to 60% in Oklch, the subsequent colors you chose will all look perceptually 60% bright to a human being regardless of what color you pick. This is of course limited by our ability to see colors in dark situations or in very bright situations, the amount of colors we can perceive changes drastically in different lighting scenarios, and this is what Oklch exposes to us. The perception aspect of picking colors.

通俗解释 Oklch 我是一个热衷于制作取色器的开发者，我很高兴地钻进了 Oklch 这个“兔子洞”，阅读技术规范，并试图在技术博客中理解颜色的矩阵本质。几年过去了，这些想法已经成熟，现在我们重新开始。这里的关键是“感知（Perceptual）”，这意味着如果你在 Oklch 中将亮度（Lightness）设置为 60%，那么无论你选择什么颜色，人类感知到的亮度都会是 60%。当然，这受到我们在黑暗或极亮环境下辨色能力的限制；在不同的光照场景下，我们能感知的颜色数量会发生剧烈变化，而这正是 Oklch 向我们展示的内容——取色过程中的感知维度。

WTF is Chroma? In this perceptual scenario where you can see different amounts of colors in different lighting values I like to think of chroma as the “amount of color”. If you like to be a bit more technical, then think of it as the amount of color if you remove the grayscale from it. How much color is left if compared to white, gray or black? This varies with your monitor, some monitors can display more colors than others, Apple supports a large amount of colors, others support a bit less and others way more. If you are a developer you can check the range available in browsers using this media query. When we are in perception land the term “chroma” is used, and in our perception “the amount of color” (chroma) is 0 when the Lightness is full back (we can’t see colors in pitch black), and also the amount of color is 0 when the Lightness is full white (we can’t see colors in full max lightness), then for the values in the middle of black and white the amount of color we can see varies, in a perfect lighting scenario we can see the maximum amount of color possible. Chroma also varies with the color itself (hue), our eyes are amazingly well trained to see a lot of greens in some lighting scenarios, so we have a lot of chroma to chose from in greens when the light is good.

什么是色度（Chroma）？ 在这样一个可以在不同亮度值下看到不同颜色数量的感知场景中，我喜欢把色度（Chroma）看作是“颜色的量”。如果你想更专业一点，可以把它理解为去除灰度后剩下的颜色量。与白色、灰色或黑色相比，还剩下多少颜色？这取决于你的显示器，有些显示器能显示的颜色比其他显示器多，苹果设备支持大量的颜色，有些支持得少一些，有些则多得多。如果你是开发者，可以使用媒体查询（media query）来检查浏览器支持的范围。当我们处于感知领域时，就会用到“色度”这个术语。在我们的感知中，当亮度为全黑时，“颜色的量”（色度）为 0（我们在漆黑中看不到颜色），当亮度为全白时，色度也为 0（我们在最高亮度下也看不到颜色）。而在黑白之间的值，我们能看到的颜色量是变化的；在完美的光照场景下，我们可以看到尽可能多的颜色。色度也会随着颜色本身（色相）而变化，我们的眼睛在某些光照条件下对绿色非常敏感，所以当光线充足时，我们在绿色上有很大的色度选择空间。

In the land of sight the three-eyed man is king That’s what LCH stands for: Lightness (how much light?), Chroma (how much color?), Hue (how many colors?) we can see at each of these values. The “Ok” is just a technical feature that comes from the base work Oklch sits on top of (Oklab color space as the base for this representation). Essentially it means things are perceptually uniform, so we can move any one of the L,C,H components while the other two actually hold steady, even as we drift across the range.

在视觉的国度里，三眼人是国王 这就是 LCH 的含义：亮度（有多少光？）、色度（有多少颜色？）、色相（有多少种颜色？），我们在每个值下都能看到这些。其中的“Ok”只是一个技术特征，源于 Oklch 所基于的基础工作（Oklab 色彩空间作为此表示的基础）。本质上，这意味着事物在感知上是均匀的，因此我们可以移动 L、C、H 中的任何一个分量，而另外两个分量实际上保持不变，即使我们在整个范围内移动也是如此。

Enhancing the classic color picker Coming from a coder perspective, the thing that attracts me the most is not in exposing all of the Oklch features all at once, but instead on how to enhance and blend them in a familiar color picker. The classic color picker A hue wheel and a triangle: In the classical hex color scenario I’m a huge fan of the triangle as a picker tool because it tells the story of how we go from the fully saturated color (in the right cusp of the triangle) up to either white (top left) or black (bottom left) using its edges, and in the body of the triangle all the values in between. It logically splits nicely the amount of shades and tints we have for each color. Unfortunately these logic parts don’t always hold when we deal with the human eye and its curves and discontinuities that naturally arise from biological perception. Next up I am going to cram Oklch into this canonical color picker, in an attempt to expose the perception axis that comes with the former while also retaining the familiarity of the latter.

增强经典取色器 从程序员的角度来看，最吸引我的不是一次性展示 Oklch 的所有功能，而是如何将它们增强并融合到一个熟悉的取色器中。经典的取色器包含一个色相环和一个三角形：在传统的十六进制颜色场景中，我非常喜欢三角形作为取色工具，因为它讲述了我们如何从完全饱和的颜色（三角形的右尖端）通过其边缘过渡到白色（左上角）或黑色（左下角），而三角形内部则包含了中间的所有值。它在逻辑上很好地划分了每种颜色的深浅和色调。不幸的是，当我们面对人眼及其因生物感知而产生的曲线和不连续性时，这些逻辑并不总是成立。接下来，我将把 Oklch 塞进这个经典的取色器中，试图在保留后者熟悉感的同时，展现前者带来的感知轴。

Adaptations I don’t want to bring in everything at once, the idea is to keep the spirit of the color picker but with slight changes that are useful when dealing with the new set of tools that Oklch gives us. Hue wheel The amount of colors we see is not the same for all colors, and it varies with the lighting, to make this stand out, I am adapting the color wheel that typically represents the hue to also show the amount of color available at each hue degree (for the chosen lighting). Triangle The triangle is a nice tool to have in Oklch, however it no longer represents a clean split between shades and tints because the mapping is no longer linear nor balanced (blame our eyes). I am going to stretch the available shades and tints in the triangle, so that all of them are visible, getting rid of the shades/tints balance is a tradeoff. The gradient in the triangle is no longer perfect. A cool thing to maximize intuition when picking Oklch is to make Lighting the king. This means that chroma and hue are dynamic, but Lighting stays the fixed. In the triangle this means that we go from max lighting to min lighting by just traversing vertically. And when the chroma starts to get lost because the lighting is already too aggressive for our eyes to keep track of all that color amount, we see that in the triangle by navigating through its edges instead of its body. This is a cool thing, the triangle edges communicates the amount of lighting interval we have to work with while keeping the same amount of color. Maximum color.

适配调整 我不想一次性引入所有东西，我的想法是保持取色器的精髓，但进行一些细微的改动，以便在处理 Oklch 提供的新工具集时更加有用。色相环：我们看到的颜色数量并非对所有颜色都相同，它随光照而变化。为了突出这一点，我正在调整通常代表色相的色环，使其也能显示每个色相度数下可用的颜色量（针对所选光照）。三角形：三角形在 Oklch 中是一个很好的工具，但它不再代表深浅和色调之间的清晰划分，因为映射不再是线性的，也不再是平衡的（这得怪我们的眼睛）。我将拉伸三角形中可用的深浅和色调，以便它们都能被看到，放弃深浅/色调的平衡是一种权衡。三角形中的渐变不再完美。在选择 Oklch 时，最大化直觉的一个酷方法是让“亮度”成为核心。这意味着色度和色相是动态的，但亮度保持固定。在三角形中，这意味着我们只需垂直移动即可从最大亮度过渡到最小亮度。当色度因为光照对我们的眼睛来说太强而开始丢失时，我们通过在三角形的边缘而不是内部导航来观察这一点。这很酷，三角形的边缘传达了我们在保持相同颜色量的情况下可以使用的亮度区间。最大色彩。