颜色代码生成
输入任意色值即可得到 HEX、RGB、RGBA、HSL、HSLA、HSV、CMYK、LAB、LCH 全部格式，可切换 D65 / D50（CSS lab 定义）白点，导出 CSS 变量并生成 50–900 的 tint/shade 色阶。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
颜色
支持 #rgb、#rrggbb、#rrggbbaa、rgb()/rgba() 与 hsl()/hsla() 的逗号或空格写法
输出选项
全部格式
#3b82f6rgb(59 130 246)hsl(217.22 91.22% 59.8%)hsv(217.22 76.02% 96.47%)cmyk(76.02% 47.15% 0% 3.53%)lab(55.63% 17.55 -64.42)lch(55.63% 66.77 285.24)色阶
500 是基准色，往小混白（tint）、往大变暗（shade）
CSS 变量
:root {
--brand: #3b82f6;
--brand-rgb: 59 130 246;
--brand-hsl: 217.22 91.22% 59.8%;
--brand-lab: 55.63% 17.55 -64.42;
}这个工具能做什么
- 设计稿里给的是 HEX，代码里要写 rgb() 或 hsl()：一次拿到全部格式，不用在几个工具之间来回转。
- 做设计令牌时同时导出 hex、RGB 分量、HSL 分量和 Lab 分量，方便写 rgb(var(--brand-rgb)) 这类可调透明度的变量。
- 需要一整条色阶时直接生成 50–900：500 是基准色，往小是 tint、往大是 shade，可以直接抄进设计系统。
- 用 CSS 的 lab() / lch() 做广色域或感知均匀的渐变时，切到 D50 白点得到与浏览器一致、可直接粘贴的数值。
示例
输入
#3b82f6（白点 D65）
输出
HEX #3b82f6 · RGB rgb(59 130 246) · HSL hsl(217.22 91.22% 59.8%) · HSV hsv(217.22 76.02% 96.47%) · CMYK cmyk(76.02% 47.15% 0% 3.53%) · LAB lab(55.63% 17.55 -64.42) · LCH lch(55.63% 66.77 285.24)
换成 D50 白点后同一颜色的 LAB 变成 lab(54.62% 8.76 -65.79)，因为 CSS 的 lab()/lch() 以 D50 为白点。
常见问题
为什么同一个颜色的 Lab 数值和别的工具不一样？
多半是白点不同。sRGB 的基准白点是 D65，而 CSS 的 lab()/lch() 规定用 D50，两者之间要做 Bradford 色适应，所以 a、b 分量会明显不同（红色的 a 从 80.09 变成 80.81）。本工具可以切换白点，要粘进 CSS 就选 D50。
HEX 和 HSL 该怎么选？
HEX 是 sRGB 的十六进制写法，体积小、兼容性最好，适合固定色值。HSL 把色相、饱和度、亮度分开，调「同一色相不同亮度」时更直观，也更容易用 CSS 变量做主题切换，但它描述的色彩空间和 HEX 完全一样。
CMYK 的数值能直接给印刷厂吗？
只能当参考。这里是从 sRGB 用公式换算出的理论 CMYK，没有考虑印刷机的油墨、总墨量上限和 ICC 色彩配置文件。正式印刷请让设计软件在指定 ICC 下分色。
色阶是怎么生成的？
500 是基准色，比 500 小的步阶按比例向白色混合（tint），比 500 大的步阶向黑色混合（shade），混合在 sRGB 通道上线性进行。步阶越大差异越明显，900 已经非常接近黑色。
输入支持哪些写法？
支持 #rgb、#rgba、#rrggbb、#rrggbbaa 四种十六进制写法，以及 rgb()/rgba()/hsl()/hsla() 的逗号写法和空格加斜杠写法（例如 rgb(59 130 246 / 50%)）。颜色名（如 rebeccapurple）和 oklch() 之类的写法暂不支持。
关键词：color converterhex to rgbrgb to hsllchlab colorcmykcolor scale颜色代码颜色转换色阶生成设计令牌配色