» 颜色转换器


颜色转换器,支持 HEX、RGB、RGBA、HSL、HSLA、HSV/HSB、CMYK、LAB、LCH、OKLAB、OKLCH、XYZ 和 CSS 颜色名称。可实时转换颜色代码,复制可直接使用的值,并在一个页面中检查准确的 CSS 输出。

使用这个颜色转换器,可以在 HEXRGBRGBAHSLHSV/HSBCMYKLABLCHOKLABOKLCHXYZCSS 颜色名称之间快速转换。输入任意支持的格式,使用滑块调整数值,并复制可用于 CSS、设计系统、印刷流程或颜色分析的结果。

转换器会实时更新所有输出,清楚显示当前颜色,并支持从每一种输入模式反向计算。它适合 HEX 转 RGBRGB 转 HEX、检查 HSLCMYK 数值,也适合比较 OKLCHOKLAB 等现代感知型颜色格式。

初始数据

选择任意格式并输入数值,所有对应的颜色代码会实时更新。

输入格式
选择你想直接编辑的颜色格式。
支持 #RGB#RGBA#RRGGBB#RRGGBBAA
示例:tomatorebeccapurpleroyalbluelightseagreen
输入 0 到 255 之间的红、绿、蓝数值。
使用 0 到 1 之间的 alpha 值表示透明度。
调整色相、饱和度和亮度,适合 CSS 颜色编辑。
HSLA 在 HSL 基础上加入 alpha 透明度。
HSV 适合按色相、饱和度和明度来理解颜色。
CMYK 主要用于面向印刷的颜色值。
LAB 是感知型颜色空间,可能产生超出屏幕可显示范围的颜色。
LCH 将亮度、色度和色相分开,便于感知型编辑。
OKLAB 是适合 UI 和调色板工作的现代感知型颜色空间。
OKLCH 让基于感知的色相和色度调整更容易。
XYZ 是常用于颜色转换的参考颜色空间。

图 1 颜色转换器


HEX #3366CC
RGB rgb(51, 102, 204)
CMYK cmyk(75%, 50%, 0%, 20%)
颜色模式可调整色相、饱和度和亮度。

结果

转换后的颜色值

常用格式

更多格式

颜色转换器常见问题

什么是颜色转换器?
颜色转换器会接收一种颜色格式,例如 #3366ccrgb(51, 102, 204),并计算它在其他格式中的对应值,例如 HSLCMYKLABOKLCH

如何把 HEX 转换为 RGB?
选择 HEX 输入模式,输入有效的十六进制颜色代码,例如 #ff6600,转换器会自动显示对应的 RGBHSLCMYK 和其他格式数值。

如何把 RGB 转换为 HEX?
选择 RGB 模式,输入红、绿、蓝通道值,然后复制生成的 HEX 结果。这是网页颜色中常用的 RGB 转 HEX 流程。

HSL 是什么?
HSL 表示色相、饱和度和亮度。它用色轮角度以及颜色的鲜艳程度、明暗程度来描述颜色,通常比直接调整 RGB 数值更直观。

CMYK 用来做什么?
CMYK 主要用于印刷流程,因为它把颜色表示为青色、品红、黄色和黑色油墨的覆盖比例。准备印刷品、包装或印前文件时很有用。

OKLCH 是什么?
OKLCH 是从 OKLAB 派生出的感知型颜色格式。它把亮度、色度和色相分开,通常更符合人眼感知,因此适合现代 UI 调色板和设计系统。

颜色转换是完全准确的吗?
同一颜色空间内的转换可以很准确或非常接近准确,但有些格式使用不同的模型或参考空间。CMYKLABLCHOKLCH 转回可显示的 sRGB 时,可能会出现四舍五入或色域裁剪。

转换结果可以用于 CSS 吗?
可以。生成的 HEXRGBRGBAHSLHSLA 和精确 CSS 颜色名称结果,可以直接粘贴到 CSS 变量、内联样式和设计 token 中。