轻工具

颜色格式转换

HEX、RGB、HSL、HSV、CMYK、OKLCH 实时互转，保留透明度并一键复制。

边输入边转换，支持 HEX、RGB、HSL、HSV、CMYK、OKLCH 与 OKLab 七种写法。

预览
HEX 
#4F46E5
RGB 
rgb(79, 70, 229)
HSL 
hsl(243.4, 75.4%, 58.6%)
HSV 
hsv(243.4, 69.4%, 89.8%)
CMYK 
cmyk(65.5%, 69.4%, 0%, 10.2%)
OKLCH 
oklch(51.06% 0.2301 277)
OKLab 
oklab(51.06% 0.0279 -0.2284)
自动文字色 
#FFFFFF

换算全部在浏览器本地完成，颜色值不会上传；结果显示为四舍五入后的数值。

使用说明

  1. 在输入框里粘贴或输入任意格式的颜色值。HEX、rgb()、hsl()、hsv()、cmyk()、oklch() 都能识别。
  2. 输入合法时，下方结果区同时刷新全部格式，顶部大色块显示当前颜色与自动对比文字色。
  3. 点击任意结果右上角的「复制」取走单项色值，点「复制全部格式」可以一次带走全部。
  4. 用右侧取色器选色会写回输入框，透明度保持不变；点「随机颜色」可以快速试色。
  5. 输入不合法时会出现红色提示并指出出错位置，光标离开输入框时会跳到那个字符。

常见问题

为什么一种颜色有这么多写法？
HEX 与 RGB 表示同一组红绿蓝数值，网页 CSS 里用得最多。HSL 与 HSV 把色相、饱和度、明度拆开，调色时更直观。CMYK 对应印刷油墨比例，OKLCH 是感知均匀的现代色彩空间。工具内部统一换算，换一种写法不会改变颜色本身。
HSL 和 HSV 有什么区别？
两者都用色相表示颜色倾向，差别在第二与第三个参数。HSL 的亮度到 100% 一定是纯白，饱和度 100% 且亮度 50% 时颜色最艳。HSV 的明度表示颜色的明亮程度，明度 100% 时颜色最亮。取色面板多用 HSV，配色计算多用 HSL。
带透明度的颜色怎么写？
八位 HEX 在六位后面追加两位透明度，例如 #10B98180。rgb() 与 hsl() 可以写成 rgba()、hsla() 并加上第四个参数。HSV、CMYK、OKLCH、OKLab 在末尾用斜杠加透明度，例如 oklch(51% 0.23 277 / 0.5)。透明度取值 0 到 1，8 位 HEX 的两位数字等于透明度乘以 255 再取整。
CMYK 数值能直接拿去印刷吗？
不能。这里的 CMYK 由屏幕 sRGB 数值换算得到，没有经过印刷配置文件与黑版生成策略的处理。要交付印刷时，请在设计软件里使用目标 ICC 配置文件分色，再把这里的比例当作起点微调。

使用步骤

  1. 粘贴颜色值

    在输入框里输入任意格式的颜色值。HEX 支持 3、4、6、8 位，函数写法支持 rgb()、hsl()、hsv()、cmyk()、oklch() 与 oklab()。

  2. 查看全部格式

    输入合法的瞬间，下方结果区会同时刷新全部格式。顶部大色块显示当前颜色，以及自动选择的文字色与对比度。

  3. 复制单项或全部

    点结果行右上角的复制按钮取走单项色值。点复制全部格式，可以把八项结果按名称逐行复制下来。

  4. 用取色器和随机色

    右侧取色器适合先看颜色再取数值，写入时会保留当前透明度。随机颜色按钮可以快速生成一个参考色。

  5. 按提示修正输入

    输入不合法时，红色提示会指出第几个字符出错。光标离开输入框后会自动跳到那个字符，改起来更快。

工具详细介绍

页面把常见的七种颜色写法放进同一套换算流程。你输入 HEX、RGB、HSL、HSV、CMYK、OKLCH 或 OKLab 中的任意一种。工具先解析出红绿蓝通道与透明度，再按标准公式推导其余格式。sRGB 与线性光之间使用标准的伽马曲线。OKLab 与 OKLCH 采用 Björn Ottosson 公布的矩阵系数。HSL 与 HSV 各自使用教科书公式。因为共用同一条管线，几种写法之间可以互相对照。所有计算都在浏览器里完成，颜色值不会离开本机。

透明度在整条链路上都会被保留。八位 HEX 的后两位与 rgba() 的第四个参数，都指向同一个 alpha。oklch() 斜杠后的数值也是同一个 alpha。工具会把它带进每一项输出。顶部色块用棋盘格垫底，方便观察半透明颜色的实际观感。色块上的文字颜色由相对亮度自动选择黑色或白色，并给出对应的对比度数值，方便判断文字是否够清楚。结果按四舍五入显示，复制出来的字符串可以直接贴进样式表。

原理与背景

屏幕上的红绿蓝数值并不与亮度成正比。sRGB 传输曲线在暗部近似线性，在亮部接近 2.4 次幂。做混色、渐变或感知计算之前，通常要先把三个通道转成线性光。本工具在计算 OKLab 与相对亮度时都走这一步，阈值取 0.04045，指数取 2.4。HSL 与 HSV 则建立在 sRGB 数值本身之上。HSL 的亮度是最大值与最小值的平均，HSV 的明度直接取最大值。同一个颜色在两种模型里数值不同，原因就在这里。

OKLab 先把线性 sRGB 通过一组矩阵变成近似锥体响应，再取立方根压缩动态范围，最后组合成 L、a、b 三个分量。带上立方根这一步之后，它在明度上的均匀度比 HSL 好得多。OKLCH 只是把 a、b 换成极坐标下的彩度与色相角，写起来更接近设计师的直觉。CMYK 部分采用朴素换算，先取黑色分量，再按比例算出青、品红、黄。屏幕色域与印刷色域并不重合。它适合在屏幕上对照油墨比例，不能替代分色软件。

典型使用场景

  1. 前端改配色

    设计稿给出的是 HEX，代码里想用 HSL 调明暗，或者反过来把 CSS 变量换成 OKLCH。把原值粘进输入框，几种写法一次拿全。复制后直接替换到样式表，改完再核对一遍，不用来回切换网站。

  2. 核对印刷色

    客户或印厂给来一组 CMYK 油墨比例，需要先看它在屏幕上的观感。把比例贴进输入框，对照 HEX 与 RGB 的结果，就能判断屏幕预览与印刷预期的差距。拿不准时再回到设计软件里确认。

  3. 整理主题色板

    做主题色板时想让明暗阶梯过渡均匀，可以先用 OKLCH 的 L 值定位几个层级。再把每一层转成 HEX 写进样式变量，深浅关系清楚，后续维护也省事。同一套层级换到别的主题也能直接复用。

使用技巧

  • 输入框里可以先写一半，补全括号与百分号的瞬间结果就会刷新。
  • 做深色模式配色时，先看 OKLCH 的 L 值，再微调色相与彩度，明暗阶梯会更均匀。
  • 需要保留透明度时用八位 HEX 最省事，复制后可以直接写进 CSS 变量。

注意事项

  • CMYK 不等于印刷色

    屏幕色域比印刷色域宽，这里的换算没有加载 ICC 配置文件。品红与青色印出来往往偏暗，正式付印前请用专业软件分色，把这里的数值当作参考起点。

  • HSL 明度不是亮度

    HSL 的亮度只是最大值与最小值的平均，黄色 50% 亮度看起来比蓝色亮得多。做明暗阶梯或对比度判断时，改用 OKLCH 的 L 值或相对亮度更可靠。两者算的不是同一件事。

  • 八位 HEX 的兼容性

    八位 HEX 在老版本浏览器里可能被忽略，需要兼容时改用 rgba() 或 hsla()。透明度等于 1 时，工具不会输出后两位，避免多写没用的字符。老项目里可以先查一遍目标浏览器的支持情况。

相关工具