OKLCH 颜色选择器
OKLCH 是 CSS Color 4 采用的色彩空间，让明度、饱和度与色相按人眼实际预期的方式表现：固定 L+C 仅移动色相时感知亮度保持稳定，而旧的 HSL 会出现明显偏移。本选择器暴露三个通道加 alpha，并显示精确的 CSS oklch() 形式、等效的 sRGB hex / rgb / hsl、OKlab a/b 分解，且当颜色过于饱和以致超出 sRGB 显示色域时给出警告（此时浏览器会回退到最接近的 sRGB 颜色）。
—
预设
#0099f0
sRGB 色域超出 sRGB（截断）
- oklch()oklch(65.0% 0.180 240.0)
- Hex（截断）#0099f0
- rgb()rgb(0, 153, 240)
- hsl()hsl(202, 100%, 47%)
- oklab()oklab(65.0% -0.090 -0.156)
明度 0–1（0 = 黑，1 = 白）。色度 0 为中性灰；超过 0.3 的值常落在 sRGB 之外。
使用方法
- 拖动 L、C、H 调整颜色 —— 留意色域徽章。
- 如果希望屏幕色块完全准确，徽章变琥珀时稍微降低色度。
- 复制样式表所需形式：现代栈应优先使用 oklch() 字符串。
常见问题
- 为什么颜色显示「超出 sRGB」？
- 标准显示器只能呈现人类可见色的有限一部分（sRGB）。OKLCH 是更广、感知均匀的空间，因此可指定 sRGB 屏幕无法呈现的颜色。浏览器会将其截至最近的 sRGB 对应色 —— hex 预览即被截断后的结果。
- 为什么用 oklch() 而非 hsl()？
- HSL 建立在 RGB 之上，所以明度在不同色相间不均匀（同 L 下黄色比蓝色看上去亮得多）。OKLCH 依据真实感知数据调校，因此在调整色相时动画、主题令牌与可访问性比率均更可预期。
相关主题指南
相关工具
CSS color-mix() 预览 (插值空间对比)
对比现代 CSS color-mix() 函数在不同插值空间 (srgb, hsl, oklch, lab, lch, hwb, oklab, srgb-linear) 下如何混合两种颜色 — 实时色卡、计算 hex、每个空间的完整渐变条以及可复制的 CSS。
颜色 0 0
颜色名称查找
为任意 hex/RGB 颜色查找最接近的 CSS、Tailwind 或 XKCD 调查色名 — 按 OKLab 空间感知距离排序。
颜色 0 0
颜色格式转换器
在 HEX、RGB、HSL、HSV、OKLCH 与 CSS 变量之间互转任何颜色。
颜色 0 0
颜色距离 (ΔE)
选两种颜色，看它们在感知上有多不同 — CIE76 ΔE、CIEDE2000 ΔE 和纯 RGB 距离，附并排色块。
颜色 0 0
颜色插值 / 渐变步进
选择两个 hex 颜色，获取 N 个离散中间步进 —— 在 sRGB、linear RGB、OKLab 或 HSL 中 —— 带可选缓动。
颜色 0 0
CSS 渐变生成器
用多色停靠点设计线性或径向 CSS 渐变并复制代码。
颜色 0 0