OKLCH 色彩空间探索器

OKLCH 色彩空间简介

OKLCH 是一种基于感知的现代色彩空间：L 为亮度，C 为色度，H 为色相。相比 RGB/HSL，在调节亮度时色相更稳定，渐变与调色更符合人眼感知，且支持更广色域。

本工具支持在 OKLCH 与 HEX/RGB 等格式间转换，并可调节 L、C、H 探索颜色，便于在 CSS 或设计系统中采用 OKLCH 做主题与渐变。

使用说明

输入或选择颜色

输入 HEX、RGB 或 OKLCH 值，或通过取色器选色。工具会转换为 OKLCH 并显示 L、C、H 数值及色块，便于理解各通道含义。

调节 L / C / H

通过滑块或输入框调节亮度（L）、色度（C）、色相（H）。L 约 0–1，C 与 H 范围以工具显示为准。调节时可见色块与 HEX/RGB 同步更新，便于导出到 CSS。

复制与使用

复制 OKLCH 字符串（如 oklch(0.6 0.15 250)）或转换后的 HEX 用于 CSS。现代浏览器已广泛支持 oklch()，可用于主题变量与渐变。

常见问题

Q: OKLCH 和 HSL 有什么区别？

OKLCH 基于人眼感知建模，调 L 时色相更稳定，色域更广；HSL 计算简单但亮度与感知不完全一致，且色域受 sRGB 限制。做现代 UI 与广色域时 OKLCH 更合适。

Q: 哪些浏览器支持 oklch()？

Chrome、Safari、Firefox、Edge 等现代浏览器已支持 CSS oklch()；若需兼容老版本，可同时提供 HEX 等回退或使用 PostCSS 等工具转换。

Q: C 和 H 的大致范围？

C（色度）约 0–0.4 在 sRGB 内较安全，再大可能超出屏幕显示；H（色相）通常 0–360 度，与 HSL 的 H 概念类似但数值不一定一致。