Oklch颜色选取（凡人指南）

# 面向凡人的 Oklch 颜色选择 来源：https://hugodaniel.com/posts/color-picking-oklch/ 使用经典颜色选择器进行感知颜色选择 2026年6月14日 [关于我](https://hugodaniel.com/) | [所有文章](https://hugodaniel.com/posts) | [RSS 订阅](https://hugodaniel.com/atom.xml) ### 复杂的事物 有些人真的很喜欢复杂的东西，要么是因为它让他们觉得自己更聪明，要么是可以用它来炫耀技能（或伪装成有技能），又或者是因为某种 l33tz0r 的理由。 Oklch 就是这样一个东西——它很复杂（至少对我来说如此），而我一直觉得用老派的 #hexcodes 和程序员颜色就挺好的。但社交网络和其他喧嚣平台上的设计社区却把 Oklch 奉若至宝，仿佛它是沙漠里最后一罐可口可乐：如果你不用它，你就过时了，就不够有技术含量。 为了感受 Oklch 有多么烧脑，不妨去 [oklch.com](https://oklch.com/) 上玩一下（官方？）的 Oklch 颜色选择器，然后如果你还有兴致，再回到这里。 实际上，Oklch 里确实有些有用的东西。在这篇文章里，我会尝试采用自上而下的方法让它变得一目了然。 ## 给我讲明白 Oklch 我是一个热衷于制作颜色选择器的人（[参见我的颜色选择器项目](https://hugodaniel.com/posts/color-picker/)），也愉快地钻进了 Oklch 这个兔子洞，阅读规范文档，努力理解技术博文中关于颜色矩阵本质的内容。几年过去了，那些想法已经成熟，现在我又回来了。 “感知”是关键。它意味着如果你在 Oklch 中将明度设置为 60%，那么你之后选择的任何颜色，人类看起来在感知上都会是 60% 的亮度，无论你选的是什么颜色。 当然，这受限于我们在黑暗或极亮环境中感知颜色的能力——在不同光照条件下，我们能感知到的颜色数量会发生巨大变化，而这正是 Oklch 向我们揭示的内容。 这就是选色时的感知层面。 ### 彩度到底是什么？ 在这种感知场景下（你可以在不同明度值下看到不同数量的颜色），我喜欢把彩度理解为“颜色的数量”。 如果你想更专业一点，那么可以把它理解为：去掉灰度之后剩下的颜色量。与白色、灰色或黑色相比，还剩下多少颜色？ 这取决于你的显示器。有些显示器能显示更多颜色，Apple 支持大量颜色，其他显示器支持的少一些，还有一些则多得多。如果你是开发者，可以通过 [这个媒体查询](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/color-gamut) 检查浏览器中可用的色域范围。 在感知领域，我们用“彩度”这个术语。在我们的感知中，“颜色的数量”（彩度）在明度全黑（漆黑中我们看不到颜色）时为 0，在明度全白（全亮中我们看不到颜色）时也为 0。然后，在黑白之间的区域，我们能看到的颜色数量会变化。在理想的光照条件下，我们可以看到最大可能的颜色数量。 彩度也取决于颜色本身（色相）。我们的眼睛在某些光照条件下非常擅长看到大量绿色，因此在光线好的时候，绿色有非常多的彩度可供选择。 ### 在视觉的国度里，三眼者是王 这就是 LCH 的含义：明度（有多少光？）、彩度（有多少颜色？）、色相（能看到多少种颜色？）——在每个值下我们能看到的量。 “Ok”只是一个技术特性，来自 Oklch 所基于的基础工作（以 Oklab 颜色空间作为其表示基础）。本质上，它意味着事物在感知上是均匀的，所以我们可以在保持另外两个分量稳定的同时，任意移动 L、C、H 中的任何一个，即使我们在整个范围内移动也一样。 ## 增强经典颜色选择器 从一个程序员的角度来看，最吸引我的并不是一次性暴露所有 Oklch 特性，而是如何将它们增强并融合到一个熟悉的颜色选择器中。 ### 经典颜色选择器 一个色相轮和一个三角形： 我版本的经典颜色选择器 在传统的十六进制颜色场景中，我非常喜欢用三角形作为选取工具，因为它讲述了一个故事：从完全饱和的颜色（三角形右侧的尖端）出发，沿着边缘向上到达白色（左上角）或向下到达黑色（左下角），而三角形内部则是介于两者之间的所有值。 箭头从饱和尖端向上指向白色，向下指向黑色，一条线将三角形分为色调和阴影。 它很合理地将每种颜色可用的阴影和色调数量分开了。 不幸的是，这些逻辑部分并不总是适用于人眼及其曲线和不连续性——这些是生物感知自然产生的。 接下来，我将把 Oklch 塞进这个经典颜色选择器中，试图在保留后者熟悉感的同时，暴露出前者带来的感知轴。 ## 适应调整 我不想一次性引入所有内容，我的想法是保留颜色选择器精神，同时做一些微小的改变，这些改变在处理 Oklch 带来的新工具集时非常有用。 ### 色相轮 我们看到颜色的数量对于所有颜色并不相同，并且随光照而变化。为了突出这一点，我调整了通常表示色相的颜色轮，使其同时显示每个色相角度（在所选光照下）可用的颜色数量。 色相轮，其环状区域按色相着色，内部是彩度三角形 ### 三角形 三角形在 Oklch 中是一个不错的工具，但它不再代表色调和阴影之间的干净分割，因为映射不再是线性的，也不平衡（怪我们的眼睛）。我将拉伸三角形中可用的阴影和色调，使它们全部可见——放弃色调/阴影的平衡是一种权衡。三角形内部的渐变也不再完美。 在选择 Oklch 时，一个能最大化直觉的好方法是将明度设为“王”。这意味着彩度和色相是动态的，而明度是固定的。在三角形中，这意味着我们只需垂直移动，就能从最大明度到达最小明度。 贯穿三角形的垂直明度轴：向上更亮，向下更暗 当彩度开始丢失（因为光照已经过于极端，我们的眼睛无法跟踪那么多颜色量）时，我们通过三角形边缘而非内部来导航。这是一件很棒的事：三角形的边缘传达了我们在保持相同颜色量的情况下可以工作的明度区间范围。最大颜色仅在一个非常特定的完美光照量（顶点）下才能实现。 ### 滑块 自然地，会为明度、彩度和色相显示滑块。这些与明度是正交的（记住，明度是直觉优先的 Oklch 选色方法），这意味着彩度默认具有非固定比例，并随着我们改变明度和色相而自适应。 用一个点标出完美明度，点击后明度会调整到能为所选色相提供最大彩度的值。 然后翻转规则，作为长尾功能，我也想让彩度可以锁定并成为“王”。此时彩度比例变为固定，而明度则成为移动的值。同时作为辅助，那些无法达到所需彩度量的颜色将从色相滑块中淡出。 明度、彩度和色相滑块，带有彩度锁定和完美明度点 ## 一切相连 当我们探索颜色时，所有元素都在联动。 这是锁定彩度后的版本： ### 结论 在这篇文章中，我尝试将颜色选择器适配到 Oklch，使其更加有机和动态，同时通过将 L 视为房间里的光照（尽管它实际上是颜色的属性——嘿，我辩解一下，这是在“给我讲明白”部分引入的），引入了一套粗略的工作指南。我还忽略并跳过了沿途的一些重要概念（颜色空间、发光体、色域映射、色彩管理/校正等），因为重点是通过无数可能的隐喻之一来呈现可能的颜色选择器体验。 你可以在此处试玩：[点击这里](https://hugodaniel.com/pages/color-picker-pro/color-picker.html) 它也可以作为 [Figma 插件](https://www.figma.com/community/plugin/1382041838227127919/color-picker-pro) 使用。