颜色转换器：HEX、RGB、HSL、CMYK、OKLCH
在 HEX、RGB、HSL、HSV、CMYK 和 OKLCH 之间转换颜色。 所有处理都在本地完成，不会上传任何内容。
- 输入
- HEX · RGB · HSL · HSV · CMYK · OKLCH · CSS names
- 输出
- HEX · RGB · HSL · HSV · CMYK · OKLCH
格式
#2a9d8f
最接近的 CSS 颜色名：
不透明度 100%
- HEX
#2a9d8f - HEX8
#2a9d8fff - RGB
rgb(42 157 143) - RGB(A)
rgb(42, 157, 143) - HSL
hsl(172.7 57.8% 39%) - HSV / HSB
hsv(172.7, 73.2%, 61.6%) - HWB
hwb(172.7 16.5% 38.4%) - CMYK
cmyk(73.2%, 0%, 8.9%, 38.4%) - OKLCH
oklch(63.04% 0.1013 183.03) - OKLab
oklab(63.04% -0.1012 -0.0054)
CMYK 采用标准设备公式。印刷颜色取决于纸张和打印机的色彩配置文件。
变体
点击即可使用
浅色（趋向白色）
深色（趋向黑色）
灰调（趋向灰色）
互补色
#2a9d8f
#9d2a38
类似色
#2a9d56
#2a9d8f
#2a729d
三角配色
#2a9d8f
#8f2a9d
#9d8f2a
分裂互补色
#2a9d8f
#9d2a72
#9d552a
四角配色
#2a9d8f
#552a9d
#9d2a38
#729d2a
把任意颜色转换为所有表示法
粘贴任意格式的颜色，这个颜色转换器会同时显示所有其他表示法：HEX、RGB、HSL、HSV/HSB、HWB、CMYK、OKLCH、OKLab，以及最接近的 CSS 颜色名。透明度全程保留，色值下方还会给出该颜色的浅色、深色和灰调，以及互补色、类似色和三角配色，点击任意一个即可把它设为新的输入。一切都在你输入时于浏览器中计算。
如何把 HEX 转换为 RGB（或其他任何格式）
- 在输入框中输入或粘贴颜色：
#2a9d8f、rgb(42 157 143)、hsl(173 58% 39%)、cmyk(73%, 0%, 9%, 38%)、oklch(62% 0.1 183)，或teal这样的名称。也可以用取色器选择。 - 所有表示法会立即更新。点击你需要的那一项旁边的复制按钮。
- 拖动透明度滑块让颜色半透明；8 位 HEX 和支持透明度的 CSS 函数会随之更新。
- 点击任意浅色、深色、灰调或配色色块，把它设为新颜色，继续探索。
各种表示法及其适用场景
- HEX
- #rrggbb，带透明度时为 #rrggbbaa。简写 #rgb 会把每一位重复一次。设计工具和 CSS 中的默认写法。
- RGB
- 红、绿、蓝，取值 0 到 255。现代 CSS 写作 rgb(42 157 143 / 50%)；旧式的 rgba(42, 157, 143, 0.5) 仍然到处可用。
- HSL
- 色相以度表示，饱和度和亮度以百分比表示。便于手动调整，但 50% 亮度在不同色相下并不一样亮：黄色看起来比蓝色亮得多。
- HSV / HSB
- 色相、饱和度和明度（或亮度）。Photoshop、Figma 和大多数设计应用中取色器背后的模型。在 CSS 中无效。
- HWB
- 色相加上要混入多少白色和黑色。自 Color Level 4 起是合法的 CSS，用来制作粉彩或柔和的变体很直观。
- CMYK
- 印刷用的青、品红、黄和黑（K）油墨百分比。这里的数值采用标准设备公式；实际印刷颜色取决于纸张和打印机的色彩配置文件。
- OKLCH
- 感知均匀色彩空间中的亮度、彩度和色相。相同的亮度在所有色相下看起来同样亮，因此它是构建色阶和无障碍配色的最佳选择。所有当前浏览器都支持。
- CSS 颜色名
- tomato、rebeccapurple、slategray 等 148 个关键字。转换器会显示最接近的一个，完全匹配时会加以标注。
手动把 HEX 转换为 RGB
HEX 颜色由三对十六进制数字组成。把 #2a9d8f 拆成 2a、9d 和 8f，再分别转换：2a 是 2 × 16 + 10 = 42，9d 是 9 × 16 + 13 = 157，8f 是 8 × 16 + 15 = 143，所以该颜色是 rgb(42, 157, 143)。反过来，把每个通道除以 16：商是第一位，余数是第二位。8 位 HEX 会多出第四对表示透明度，ff 为完全不透明，80 约为 50%。
HEX、RGB、HSL、HSV 和 HWB 之间的转换除舍入外是精确的。CMYK 本质上是近似值；超出屏幕可显示的 sRGB 范围的 OKLCH 颜色，会通过降低彩度拉回范围内，同时保留你指定的亮度和色相。
CSS 中应该用哪种表示法？
所有当前浏览器都能理解 HEX、rgb()、hsl()、hwb() 和 oklch()，所以选择取决于哪种最易读、最好维护。HEX 紧凑，也是设计师交付的格式，因此仍是单个色值的稳妥默认选择。想手动微调颜色时，HSL 很方便，例如做一个稍亮一点的悬停状态。
对于设计系统，OKLCH 越来越是更好的选择。由于它的亮度是感知意义上的，一组 L 值相同的品牌色确实看起来一样亮，只改一个数字就能推导出整条色阶。它还能描述广色域 P3 屏幕上更鲜艳的颜色，这是 HEX 和 rgb() 做不到的。请注意，HSV、HSB 和 CMYK 不是合法的 CSS：它们在这里是为了在设计工具和印刷工具之间传递数值。
浅色、深色、灰调与配色组合
浅色是把颜色与白色混合，深色与黑色混合，灰调与灰色混合。这三行以 10% 为步长从原色递进，能为你提供一看就属于同一体系的悬停状态、边框和背景。
配色组合沿色环旋转色相：互补色是相对的色相，类似色是两侧各 30° 的相邻色相，三角配色是相隔 120° 的三个色相，分裂互补色是互补色两侧的两个色相，四角配色是相隔 90° 的四个色相。它们只是选择点缀色的起点，不是规则：文字颜色务必用对比度检查器检查。如果想从照片中生成配色，请使用配色方案生成器。
常见问题
- HEX 怎么转换成 RGB？
- 把 HEX 代码粘贴到转换器中，复制 RGB 值即可。手动转换时，把代码拆成三对，每对从十六进制转为十进制：#2a9d8f 变为 42、157 和 143。
- RGB 怎么转换成 HEX？
- 输入 RGB 值，例如 rgb(42, 157, 143) 或直接输入 42, 157, 143，然后复制 HEX。每个通道变成两位十六进制数字：42 是 2a，157 是 9d，143 是 8f。
- HSL 和 HSV 有什么区别？
- 两者都使用色相角度，但 HSL 的亮度从黑色经过纯色到白色，而 HSV 的明度只从黑色到纯色。CSS 支持 HSL；HSV（也叫 HSB）用于设计应用的取色器。
- OKLCH 是什么，为什么要用它？
- OKLCH 用感知亮度、彩度和色相来描述颜色。与 HSL 不同，相同的亮度在任何色相下看起来都一样亮，因此改变色相时，色阶和对比度依然可预测。所有当前浏览器都在 CSS 中支持 oklch()。
- 可以转换带透明度的颜色吗？
- 可以。输入 8 位 HEX、带斜杠透明度的 rgb()、rgba() 或 hsla()，或者使用透明度滑块。之后每种 CSS 表示法都会包含透明度值。
- CMYK 值用于印刷准确吗？
- 它是网页工具通用的标准数学转换。实际印刷效果取决于纸张、油墨和色彩配置文件，因此对品牌要求严格的印刷品，请与印刷厂或在支持色彩配置文件的应用中确认数值。
- CSS 一共有多少个颜色名？
- CSS 定义了 148 个颜色名，包括 rebeccapurple 以及 grey 和 gray 两种拼写。转换器全部支持，并会为你输入的任何颜色显示最接近的名称。