OKLCH 颜色转换。
输入 HEX、rgb()、hsl() 或 oklch() 格式的颜色，得到它的全部四种格式，直接就能复制。如果某个 OKLCH 颜色超出了 sRGB 屏幕能显示的范围，页面会告诉你。全程在浏览器里运行，你输入的内容不会上传。
在 sRGB 色域内。
- HEX
- #3A81F6
- RGB
- rgb(58 129 246)
- HSL
- hsl(217 91% 60%)
- OKLCH
- oklch(0.62 0.19 260)
在你的浏览器里运行，放进来的内容不会上传，也不会保存。
怎么把颜色转成 OKLCH
- 输入颜色，下面几种写法都行：HEX（
#3B82F6、#38f，也可以不带#）、rgb(59 130 246)或rgb(59, 130, 246)、hsl(217 91% 60%)，或者oklch(0.62 0.19 260)。逗号可以省略，CSS 允许写百分号的地方也可以写百分号。也可以用输入框旁边的取色器，选好后输入框会填入 oklch() 形式的颜色。页面一开始填的是oklch(0.62 0.19 260)。 - 查看四种格式：HEX、RGB、HSL 和 OKLCH，旁边还有这个颜色的色块。如果输入框里的内容读不懂，文字会变红，页面会告诉你可以输入哪几种写法。
- 看一下输入框下面的色域提示。 它会说这个颜色在 sRGB 色域内，或者提示它超出了色域（下面有详细说明）。
- 复制你要的格式，点它旁边的复制按钮。
各种格式的写法，和现在的 CSS 以及各个框架的写法一致：rgb(59 130 246) 用空格分隔，hsl(217 91% 60%) 取整数，oklch(0.623 0.188 259.815) 保留三位小数，和 shadcn/ui、Tailwind v4 的写法一样。灰色没有色度和色相，会写成 oklch(0.6 0 0)。
它只认 HEX、rgb()、hsl() 和 oklch()。red 这样的 CSS 颜色名，以及 color(display-p3 …) 这样的其他函数都不支持；透明度（比如 rgb(59 130 246 / 50%) 里的 50%）会被忽略。
超出 sRGB 的颜色
OKLCH 能描述 sRGB 显示不了的颜色，而 HEX、rgb() 和 hsl() 背后的色彩空间就是 sRGB。试试 oklch(0.7 0.4 150)，一种非常鲜艳的绿色：页面会提示它超出了 sRGB 色域，其他格式显示的是 sRGB 里最接近的颜色，这里是 #00BE58。这个颜色是保持明度和色相不变、降低色度直到落进色域得到的。OKLCH 一行和色块用的仍然是你输入的 OKLCH 值，所以广色域屏幕可能比 HEX 显示出更多的颜色。
用 HEX、rgb() 或 hsl() 输入的颜色一定在 sRGB 内，不会触发这个提示。
在 Codex 里使用
Codex 会照着它看到的颜色格式写。在 Tailwind v4 或 shadcn/ui 项目里，这个格式就是 OKLCH，所以把这个页面里的 oklch() 值给它，别给 HEX 色值，并要求它保持这个格式。OKLCH 还有个好处：Codex 可以一次只改一样东西，只降低明度，就得到同一个颜色的更深版本。
我们的品牌色是 [oklch(0.62 0.19 260)]。在 globals.css 里，把 --primary 设成它。悬停和按下状态用更深的版本：只把明度分别降低 0.05 和 0.1，色度和色相保持不变。所有颜色都像文件里其他地方一样写成 oklch()，不要加 HEX 或 hsl() 的值。
常见问题
免费吗？
免费，不用注册，想转换多少个颜色都可以。
我输入的内容会上传吗？
不会。转换在你的浏览器里完成，你输入的内容不会发送，也不会保存。网站只统计工具被用过，不会记录你输入的颜色。
它是怎么转换的？
它通过线性 sRGB，用 Björn Ottosson 发表的 OKLab 公式做转换，再把 OKLab 换成带色度和色相的 OKLCH。HEX、rgb() 和 hsl() 显示为整数，OKLCH 保留三位小数，所以把一个颜色转成 HEX 再转回来，OKLCH 值的最后几位小数可能会变。
shadcn/ui 和 Tailwind v4 为什么用 OKLCH？
Tailwind v4 的默认调色板是用 OKLCH 写的，shadcn/ui 也在迁移到 Tailwind v4 时，把主题变量从 HSL 换成了 OKLCH。原因有三个。第一，OKLCH 的明度接近人眼看到的明暗，所以明度相同的两个颜色看起来一样亮，HSL 就做不到：HSL 明度同为 50% 的黄色和蓝色，看起来差别很大。第二，调整明度或色度时，色相看起来更稳定，所以由浅到深的一排色阶看起来仍然是同一个颜色。第三，OKLCH 能描述 sRGB 以外的颜色，让能显示的屏幕展示出来，而 HEX、rgb() 和 hsl() 做不到。