什么是 OKLCH？为什么要用它来替代 HEX 或 HSL？

OKLCH（亮度、色度、色相）是基于 Oklab 模型的感知均匀色彩空间。与 HEX 或 HSL 不同，OKLCH 中相同的数值变化产生相同的感知差异。这使其非常适合设计无障碍配色方案、创建平滑渐变，以及生成一致的 Tailwind v4 色阶。对于需要精准控制颜色感知的设计师和前端开发者来说，OKLCH 是比传统色彩格式更现代、更科学的选择。

如何将 HEX 转换为 OKLCH？

将你的 HEX 值（如 #3b82f6）粘贴到 HEX 输入框，OKLCH 字段会立即更新为等价的 oklch(0.6 0.18 250) 表示法。与此同时，OKLab、RGB 和 HSL 等其他所有格式也会同步更新，无需手动操作，方便你直接对比和使用各种颜色格式。

「超出 sRGB 色域」是什么意思？颜色会发生什么变化？

部分 OKLCH 颜色——尤其是高色度值——超出了大多数显示器所使用的 sRGB 色彩空间。当出现这种情况时，工具会应用 CSS Color 4 toGamut 算法，找到最接近的可显示 sRGB 颜色。页面上会出现琥珀色警告横幅，同时展示原始超出色域的值与映射后的结果，让你清楚了解颜色发生了哪些变化，避免无声的颜色裁剪问题。

Tailwind v4 OKLCH 调色板生成器是如何工作的？

生成器使用 Tailwind v4 官方亮度梯度（50=0.971、100=0.945，直到 950=0.238），应用于当前的色相和色度值，生成从浅到深共 11 个色阶，并以 @theme { --color-brand-50: oklch(...); } 代码块的形式导出，可直接粘贴到你的 CSS 文件中使用，极大简化了 Tailwind 自定义主题颜色的配置流程。

为什么 OKLCH 插值渐变效果比 HSL 更好？

HSL 在圆柱坐标系中插值，与人类感知不匹配，常常在渐变中途产生灰度凹陷或意外的色相偏移。而 OKLCH 在感知均匀的 Oklab 空间中插值，亮度和色度过渡自然流畅，不会出现意外的色偏。无论是用于背景渐变、图表配色还是 UI 状态过渡，OKLCH 渐变的视觉效果都更为自然和专业。

这个 OKLCH 转换器是否免费且保护隐私？

是的。本工具完全免费，基于 culori 库在你的浏览器本地运行。所有颜色计算均在客户端完成，不会将任何颜色值上传至服务器。你可以放心使用，无需担心数据隐私问题，也不需要注册账号或安装任何插件。

CSS Color 4 的 OKLCH 语法是否兼容所有浏览器？

OKLCH 颜色语法（oklch()）自 2023 年起已被所有现代浏览器支持，包括 Chrome 111+、Firefox 113+、Safari 15.4+ 和 Edge 111+。如需兼容旧版浏览器，可使用本转换器提供的 HEX 或 RGB 回退值。建议在生产环境中同时提供两种格式，以确保最大兼容性。

颜色工具

OKLCH 颜色转换器 – CSS Color 4、Tailwind v4 调色板生成

免费 OKLCH 颜色转换器，支持 OKLCH、OKLab、RGB、HSL 和 HEX 实时同步。含 L/C/H/Alpha 滑块、CSS Color 4 色域映射与 Tailwind v4 调色板导出。

OKLCH（亮度、色度、色相）是基于 Oklab 模型的感知均匀色彩空间，已被 CSS Color Level 4 正式采用。与 RGB 或 HSL 不同，OKLCH 在不同色相下保持感知亮度的一致性，非常适合构建无障碍配色系统、Tailwind v4 调色板和平滑渐变。

如何使用 OKLCH 颜色转换器

1
输入颜色值
在任意支持的格式输入框中输入或粘贴颜色值：oklch(0.6 0.18 250)、#3b82f6、rgb(59, 130, 246)、hsl(217deg 91% 60%) 或 oklab(0.6 -0.056 -0.169)。工具会即时同步所有其他格式。
2
通过 L/C/H/Alpha 滑块精细调整
拖动亮度（L）、色度（C）、色相（H）或 Alpha 滑块。色度滑块上有 sRGB 色域边界标记，让你随时了解颜色是否超出标准显示范围。
3
查看色域警告（如有）
如果你的 OKLCH 颜色超出 sRGB 色域，将显示琥珀色警告横幅，内含原始值与 CSS Color 4 toGamut 映射后用于显示的结果。
4
生成 Tailwind v4 调色板
Tailwind v4 OKLCH 调色板区域会根据当前色相，按照 Tailwind 官方亮度梯度自动生成 50–950 色阶。点击「复制」即可将 @theme 代码块直接粘贴到你的 CSS 文件中。

参考资料

W3C CSS Color Level 4 – oklch()
定义 OKLCH 颜色表示法与色域映射算法的 W3C 规范。
Culori – JavaScript 颜色库
本工具所使用的开源库，负责 OKLCH 转换、toGamut 映射与感知插值。
Evil Martians – CSS 中的 OKLCH：为什么放弃 RGB 和 HSL？
深入讲解 OKLCH 相较于 RGB 和 HSL 在现代颜色工作中优势的综合指南。
Tailwind CSS v4 – 默认调色板
Tailwind 官方颜色调色板文档，包含本调色板生成器所使用的 OKLCH 亮度值。

常见问题

什么是 OKLCH？为什么要用它来替代 HEX 或 HSL？: OKLCH（亮度、色度、色相）是基于 Oklab 模型的感知均匀色彩空间。与 HEX 或 HSL 不同，OKLCH 中相同的数值变化产生相同的感知差异。这使其非常适合设计无障碍配色方案、创建平滑渐变，以及生成一致的 Tailwind v4 色阶。对于需要精准控制颜色感知的设计师和前端开发者来说，OKLCH 是比传统色彩格式更现代、更科学的选择。
如何将 HEX 转换为 OKLCH？: 将你的 HEX 值（如 #3b82f6）粘贴到 HEX 输入框，OKLCH 字段会立即更新为等价的 oklch(0.6 0.18 250) 表示法。与此同时，OKLab、RGB 和 HSL 等其他所有格式也会同步更新，无需手动操作，方便你直接对比和使用各种颜色格式。
「超出 sRGB 色域」是什么意思？颜色会发生什么变化？: 部分 OKLCH 颜色——尤其是高色度值——超出了大多数显示器所使用的 sRGB 色彩空间。当出现这种情况时，工具会应用 CSS Color 4 toGamut 算法，找到最接近的可显示 sRGB 颜色。页面上会出现琥珀色警告横幅，同时展示原始超出色域的值与映射后的结果，让你清楚了解颜色发生了哪些变化，避免无声的颜色裁剪问题。
Tailwind v4 OKLCH 调色板生成器是如何工作的？: 生成器使用 Tailwind v4 官方亮度梯度（50=0.971、100=0.945，直到 950=0.238），应用于当前的色相和色度值，生成从浅到深共 11 个色阶，并以 @theme { --color-brand-50: oklch(...); } 代码块的形式导出，可直接粘贴到你的 CSS 文件中使用，极大简化了 Tailwind 自定义主题颜色的配置流程。
为什么 OKLCH 插值渐变效果比 HSL 更好？: HSL 在圆柱坐标系中插值，与人类感知不匹配，常常在渐变中途产生灰度凹陷或意外的色相偏移。而 OKLCH 在感知均匀的 Oklab 空间中插值，亮度和色度过渡自然流畅，不会出现意外的色偏。无论是用于背景渐变、图表配色还是 UI 状态过渡，OKLCH 渐变的视觉效果都更为自然和专业。
这个 OKLCH 转换器是否免费且保护隐私？: 是的。本工具完全免费，基于 culori 库在你的浏览器本地运行。所有颜色计算均在客户端完成，不会将任何颜色值上传至服务器。你可以放心使用，无需担心数据隐私问题，也不需要注册账号或安装任何插件。
CSS Color 4 的 OKLCH 语法是否兼容所有浏览器？: OKLCH 颜色语法（oklch()）自 2023 年起已被所有现代浏览器支持，包括 Chrome 111+、Firefox 113+、Safari 15.4+ 和 Edge 111+。如需兼容旧版浏览器，可使用本转换器提供的 HEX 或 RGB 回退值。建议在生产环境中同时提供两种格式，以确保最大兼容性。

如何使用 OKLCH 颜色转换器

参考资料

相关工具

常见问题