免费工具 · 自动识别输入格式
色值转换器 — HEX / RGB / HSL / HSV / CMYK / OKLCH
粘贴任意格式的颜色，一次看到全部其他格式。附最接近的 CSS 颜色名，以及 CSS 变量、Tailwind、SCSS、Swift、Android、Flutter 的现成代码片段。
识别为： hex
全部色彩格式
#7C3AED
R 124 · G 58 · B 237
rgb(124, 58, 237)
124, 58, 237
hsl(262, 83%, 58%)
H 262.1° · S 83.3% · L 57.8%
hsv(262, 76%, 93%)
H 262.1° · S 75.5% · V 92.9%
cmyk(48%, 76%, 0%, 7%)
C 48% · M 76% · Y 0% · K 7%
oklch(54.13% 0.2466 293.01)
L 0.541 · C 0.247 · H 293°
oklab(54.13% 0.0964 -0.227)
L 0.541 · a 0.096 · b -0.227
CSS 颜色名
blueviolet最接近
直接粘进你的代码
--brand: #7c3aed;bg-[#7c3aed] text-[#7c3aed]$brand: #7c3aed;UIColor(red: 0.486, green: 0.227, blue: 0.929, alpha: 1.0)Color.parseColor("#7C3AED")Color(0xFF7C3AED)三步得到全部格式
粘贴任意颜色
HEX、rgb()、hsl()、hsv()、cmyk()、oklch()、oklab() 或 "tomato" 这样的 CSS 颜色名都可以——工具会自动识别格式，并告诉你识别为哪种。
一次看到所有格式
7 种格式并排呈现，一键复制。每行下方附有通道数值分解，无需另开计算器。
直接粘进你的代码
预先生成 CSS 变量、Tailwind 任意值、SCSS、Swift UIColor、Android Color、Flutter Color 的代码片段，省去手写格式化。
选对工具
到底该用哪种格式？
大多数转换器把所有格式一视同仁。事实并非如此——每种格式都是为特定问题设计的，用错地方就会出现深色模式色阶断裂、印刷出片发灰等问题。
HEX
适合
一切需要在人与机器之间传递的场景：品牌规范、Figma 色板、Slack 粘贴、配置文件。
不适合
程序化生成色调阶——从十六进制字符串无法直观推断明度。
RGB / RGBA
适合
处理像素数据、图像处理，或任何需要逐通道审视的场景。
不适合
构建无障碍色阶——RGB 完全没有"感知明度"的概念。
HSL
适合
在代码里手动微调，比如调一点色相或拉低饱和度。
不适合
设计令牌与色阶。HSL 的"明度"不是感知均匀的——50% 明度的黄色与 50% 明度的蓝色在亮度上完全不同。
HSV / HSB
适合
取色器 UI 的内部表示，用色相 / 饱和度 + 一个明度滑块。
不适合
CSS——CSS 不支持 hsv() 函数。上线前请转成 HSL 或 OKLCH。
CMYK
适合
面向印刷的一切：名片、包装、宣传册。
不适合
完全不要用于屏幕设计。CMYK 色域小于 sRGB，屏幕上鲜艳的颜色印出来会偏灰。
OKLCH / OKLab
适合
设计令牌、感知均匀的色阶、深浅模式配对、无障碍色板。CSS Color Module 4 的主推格式。
不适合
不支持 OKLCH 的旧浏览器（Safari 15.4 及更早版本）——通过 @supports 或构建时回退提供 sRGB 备选。
我们的看法
不要再用 HSL 做色阶了，请改用 OKLCH。
过去二十年，设计师用 HSL 明度从 10% 到 90% 走色阶。结果：yellow-50 看着发白，blue-900 看着发黑，中间的"中性灰"莫名带绿。数学说它们均匀，眼睛说它们不均匀。
OKLCH 正是为解决这件事而生。它的明度轴是感知均匀的——红色的 L 0.5 与蓝色的 L 0.5 看起来亮度一致，每步 0.05 出来的色阶在视觉上真的均匀。2026 年新出的设计系统几乎都在迁——Tailwind v4、Radix、Material、连 macOS Sonoma 的系统色都在用。
交付用 HEX，像素处理用 RGB。但当你坐下来设计一套调色板时，请用 OKLCH。无障碍审计的通过率会立刻提升一档。