Oklch 是基于 Oklab 感知均匀颜色空间的极坐标形式，由 Björn Ottosson 于2020年提出。它使用亮度(Lightness)、色度(Chroma)、色相(Hue)三个维度描述颜色。与传统的 HSL/HSV 不同，Oklch 具有感知均匀性——相同数值变化在人眼感知中产生相同的视觉差异，使得调色和色彩搭配更加科学、自然。CSS Color Level 4 规范已纳入 oklch() 函数，主流浏览器均已支持。

HSL/HSV 基于 sRGB 色域的简单几何变换，存在严重的感知不均匀问题：例如在 HSL 中，亮度50%的纯蓝和纯黄在人眼中亮度差异巨大。而 Oklch 基于人眼视觉科学，相同数值步长 = 相同感知变化。这意味着：① 调色板颜色间距更均匀和谐；② 色相变化不会意外改变感知亮度；③ 跨色相的渐变更加平滑自然。对于设计师和前端开发者，Oklch 生成的色彩搭配更加可靠。

CSS 中直接使用 oklch(L C H) 格式，例如：
background: oklch(0.6 0.2 250deg);
其中 L 范围 0~1（亮度），C 范围 0~0.37（sRGB色域内色度），H 范围 0~360deg（色相）。也可以使用 oklch(60% 0.2 250) 百分比写法。现代浏览器（Chrome 111+、Firefox 113+、Safari 15.4+）均已原生支持，覆盖率超过93%。

感知均匀性(Perceptual Uniformity)是指颜色空间中数学上的等距变化对应人眼感知的等距变化。在非均匀空间（如HSL）中，调整色相可能导致意外的亮度跳跃或饱和度失真。Oklch 的感知均匀性确保：调整亮度L时只改变明暗、调整色度C时只改变鲜艳程度、调整色相H时保持感知亮度不变。这使得生成和谐调色板变得简单可靠——您只需按数学规律分布色相角度，即可获得视觉上均衡的色彩组合。

类似色(Analogous)：色相相邻(±15°~30°)，柔和协调，适合UI背景、品牌延伸色、信息层级。
单色(Monochrome)：同一色相不同亮度，最安全统一，适合数据可视化、仪表盘、极简设计。
互补色(Complementary)：色相对立(180°)，高对比度，适合CTA按钮、警示、强调元素。
三角色(Triadic)：三色均匀分布(120°间隔)，活泼平衡，适合多彩仪表盘、分类标签、插画。
四角色(Tetradic)：四色90°间隔，丰富多样，适合复杂数据图表、多分类系统。
分裂互补(Split Complementary)：互补色的变体，对比度稍低但更丰富，适合需要对比又不失和谐的界面。

色度C表示颜色的鲜艳程度，0为纯灰色。在sRGB色域内，C的最大值因色相而异：蓝色调约0.18~0.22，黄绿色调约0.25~0.30，粉红/红色调可达0.32~0.37。超出sRGB色域的颜色会在普通屏幕上被自动裁剪(Gamut Clipping)。本工具C范围0~0.35，覆盖sRGB内绝大多数可见色。如需使用P3广色域，C值可更高。建议日常设计使用C在0.08~0.25之间，既鲜艳又不刺眼。

转换路径：HEX → sRGB → 线性RGB → XYZ(D65) → Oklab → Oklch。手动计算较为复杂，推荐使用工具或CSS的oklch()函数配合Canvas进行转换（本工具即采用此方法）。在JavaScript中，可以使用Canvas 2D API设置oklch颜色并读取RGBA像素值实现双向转换。现代浏览器对oklch的原生支持使这一过程变得简单可靠。