跳到正文

← 全部工具

免费在线工具

颜色转换器

输入或选取一个颜色，就能同时得到所有常用格式，每一项都有复制按钮。另外还有现成的 CSS、最接近的颜色名、十个浅色调和深色调，以及配色方案。不会上传任何内容，全部在本页里运行。

支持十六进制（3、4、6、8 位）、rgb()、hsl()、hwb()、lab()、lch()、oklab()、oklch()，以及 148 个 CSS 颜色名。

试试：

预览

浅色背景

深色背景

最接近的 CSS 颜色名

rebeccapurple（#663399）与这个颜色完全相同。

全部格式

  • 十六进制 HEX

    #663399

  • RGB（0-255）

    102, 51, 153

  • RGB（百分比）

    40%, 20%, 60%

  • HSL：色相（度）、饱和度、亮度

    270, 50%, 40%

  • HSV / HSB：色相（度）、饱和度、明度

    270, 66.7%, 60%

  • HWB：色相（度）、白度、黑度

    270, 20%, 40%

  • CMYK（简易公式，不用于印刷）

    33.3%, 66.7%, 0%, 40%

  • CIE Lab（D65）：L、a、b

    32.9, 42.89, -47.15

  • CIE LCH（D65）：L、彩度、色相（度）

    32.9, 63.74, 312.29

  • CIE Lab（D50，即 CSS lab()）：L、a、b

    32.39, 38.42, -47.69

  • CIE LCH（D50，即 CSS lch()）：L、彩度、色相（度）

    32.39, 61.24, 308.86

  • OKLab：L、a、b

    0.44027, 0.08818, -0.13386

  • OKLCH：L、彩度、色相（度）

    0.44027, 0.1603, 303.37

  • 十进制整数

    6697881

  • 十六进制整数

    0x663399

可直接粘贴到 CSS

  • 十六进制

    #663399

  • rgb()

    rgb(102 51 153)

  • rgb()（逗号写法）

    rgb(102, 51, 153)

  • hsl()

    hsl(270 50% 40%)

  • hwb()

    hwb(270 20% 40%)

  • lab()

    lab(32.393 38.423 -47.691)

  • lch()

    lch(32.393 61.244 308.857)

  • oklab()

    oklab(0.44027 0.08818 -0.13386)

  • oklch()

    oklch(0.44027 0.1603 303.37)

浅色调（与白色混合）

深色调（与黑色混合）

从 10% 到 100% 共十步，在 OKLab 中混合，所以看起来间隔均匀。透明度不参与。点按色块可复制它的十六进制代码。

配色

互补色

邻近色

三等分配色

做法是旋转 HSL 色相、保持饱和度和亮度不变：互补色 +180 度，邻近色 -30 度和 +30 度，三等分配色 +120 度和 +240 度。HSL 色相只是简单规则，不是按视觉感受计算的，所以结果的明暗感可能不同。

这些数字的含义

  • •CMYK 数值只是由 RGB 直接套用教科书公式得到的，没有使用油墨、纸张或打印机的色彩配置文件，所以不要拿它去打印并指望颜色一致。印刷厂会用配置文件来转换。
  • •CIE Lab 和 LCH 按 D65 白点显示（也就是 sRGB 的白色），所以白色正好是 100、0、0。CSS 的 lab() 和 lch() 用的是 D50 白点，因此这两行单独列出，要粘贴到 CSS 请用它们。
  • •HEX、RGB 和整数形式会四舍五入到 0-255 的整数。其他模型按精确颜色计算，只在显示时四舍五入。
  • •用 lab()、lch()、oklab()、oklch() 输入的颜色可能超出 sRGB。这时会逐通道截取并给出提示。灰色没有色相，色相显示为 0。

它是怎么工作的

  • •本页用自带的解析器读取颜色：3、4、6、8 位十六进制，rgb()、hsl()、hwb()、lab()、lch()、oklab()、oklch()，148 个 CSS 颜色名，以及 transparent。新式的空格写法和旧式的逗号写法都可以。写错时会告诉你错在哪里。
  • •转换遵循 CSS Color Module Level 4 的公式：sRGB 到 XYZ 使用 D65 白点，Lab 和 LCH 由 XYZ 得到，OKLab 使用该色彩空间公布的矩阵。
  • •Lab 和 LCH 先按 D65 白点显示（也就是 sRGB 的白色，所以白色是 100、0、0），再按 D50 白点显示，因为 CSS 的 lab() 和 lch() 用的是 D50。粘贴到样式表时，请用 D50 那几行或 CSS 那一栏。
  • •这里的 CMYK 只是由 RGB 直接套用教科书公式。它不涉及油墨、纸张和打印机，只能当作起点，不能直接用于印刷。
  • •超出 sRGB 的颜色（用 oklch 或 lab 很容易得到）会逐通道截取并给出提示。浅色调和深色调是在 OKLab 中与白色或黑色混合得到的。配色是旋转 HSL 色相得到的，规则简单、结果可预期，但在视觉上并不均匀。
  • •输入限制为 100 个字符，颜色不会被保存到任何地方。

常见问题

会上传我的颜色吗？
不会。所有计算都由本页里运行的代码完成，不会向任何地方发送内容。复制按钮只是把文字放进你自己的剪贴板。
为什么 Lab 数值和别的网站不一样？
Lab 取决于所参照的白点。很多工具用 D65，也就是 sRGB 屏幕的白色；CSS 的 lab() 和 lch() 用 D50。本页两种都显示并有标注，请对比白点相同的那一行。
CMYK 数值能拿去印刷吗？
只能当作粗略参考。它来自一个简单公式，没有打印机或纸张的色彩配置文件；印刷厂或设计软件会用配置文件转换，同一个屏幕颜色会得到不同的数字。
为什么我输入的 oklch 或 lab 颜色被改了？
有些 oklch()、lab()、lch() 的值描述的是 sRGB 屏幕显示不出来的颜色。本页会把每个通道截取到范围内并提示你，并不会用更聪明的方法去找最接近的可显示颜色，所以对特别鲜艳的颜色，专门的色域映射工具可能给出不同结果。

相关阅读