颜色选择器

OKLCH 颜色选择器

专业的 OKLCH 颜色选择器和转换器，具有实时预览、色域检查和多格式支持。

实时调整 OKLCH 数值

可直接复制的格式输出

支持 sRGB、P3、Rec2020 检查

使用指南

调整颜色

使用左侧的 L（亮度）、C（彩度）、H（色相）控件来调整 OKLCH 颜色值，实时预览颜色效果。

格式转换

在右侧面板中查看并复制多种格式的颜色值，包括 OKLCH、HEX、RGB、HSL 和 LAB。

输入颜色

在输入框中直接输入任意颜色值，例如 #FF5733 或 rgb(255,87,51)，工具会自动转换为 OKLCH。

色域检查

查看颜色在不同色域（sRGB、P3、Rec2020）中的兼容性。

复制使用

点击任意格式旁的复制按钮，将颜色值复制到剪贴板，用于你的 CSS 或设计项目中。

🎨颜色与控制

oklch(70% 0.150 180)

sRGB

Rec2020

亮度 (L)

彩度 (C)

色相 (H)

透明度 (A)

📋格式与工具

输入（自动检测）

输出格式

OKLCHoklch(70% 0.150 180)

HEX#00bca2

RGBrgb(0, 188, 162)

HSLhsl(173.99, 100%, 23.41%)

LABlab(67.08 -53.09 -0.37)

LCHlch(67.08 53.09 180.39)

快捷操作

预设

把预设当作快速起点，再用 OKLCH 控件继续微调结果。

开发者导出工作台

把当前颜色直接转换为 CSS 变量、Tailwind 主题值、设计令牌和可分享链接，不需要再手动整理。

Token 前缀

导出内容会使用 `brand` 作为前缀。

:root {
  --brand: oklch(0.70 0.150 180.0);
  --brand-hex: #00bca2;
  --brand-rgb: rgb(0, 188, 162);
}

当前可用值

OKLCHoklch(0.70 0.150 180.0)

HEX#00bca2

Display P3color(display-p3 0.223999 0.723004 0.637309)

默认带上回退值

下面的片段同时包含现代 OKLCH 输出和 HEX 回退，适合更快地投入生产环境。

当前分享链接

这个链接会编码当前 OKLCH 数值，方便你发给队友，或者之后重新打开相同颜色状态。

正在生成分享链接...

📋格式与工具

输入（自动检测）

输出格式

OKLCHoklch(70% 0.150 180)

HEX#00bca2

RGBrgb(0, 188, 162)

HSLhsl(173.99, 100%, 23.41%)

LABlab(67.08 -53.09 -0.37)

LCHlch(67.08 53.09 180.39)

快捷操作

预设

把预设当作快速起点，再用 OKLCH 控件继续微调结果。