颜色转换
HEX / RGB / HSL / HSV 互转,附带色阶、调色板与对比色建议
颜色预览
各格式表示
HEX
#3b82f6
RGB
rgb(59, 130, 246)
HSL
hsl(217.22, 91.22%, 59.8%)
HSV
hsv(217.22, 76%, 96%)
颜色属性
- 感知亮度122 / 255
- 深浅判定深色
- 最接近的命名色无对应命名色
- 灰度值#7a7a7a
色阶(浅 → 深)
e7effeb6d0fc85b1f95492f72473f50a5adb0846ab06327a031e49
同族调色板
对比色建议
此背景上推荐使用的前景文字色
最后更新:2026-10-10
工具介绍
设计稿里拿到一个 HEX 值,却想在 CSS 里用 HSL 调透明度;或者反过来,在调色板上拖出一个满意的颜色,需要转成十六进制交给开发。本工具把四种常用格式一次列出,并顺手给出感知亮度、深浅判定、色阶与对比色建议,这些通常是转换之后紧接着要问的问题。
功能特性
四种格式互转
HEX 适合写进样式表、RGB 贴合屏幕、HSL 便于调明暗与饱和度、HSV 是多数取色面板的内部模型,四种结果同时呈现。
宽容的输入解析
同时接受 #f80 缩写、#rrggbbaa 带透明度、rgb(255,136,0)、rgba(...)、hsl(32,100%,50%) 以及不带 # 的纯十六进制,从设计稿复制粘贴即可。
看得到取色器
内置原生取色器,可以在屏幕上直接吸取颜色,也可以在色板上挑一个再微调,适合在没有设计稿时快速定色。
感知亮度与深浅判定
按 ITU-R BT.601 的加权公式计算感知亮度,并据此判断该色属于浅色还是深色,为选文字色提供依据。
色阶与调色板
把品牌色展开成从浅到深的九级色阶,或按固定角度旋转色相生成同族配色,直接可用的 CSS 变量式色板。
对比色建议
根据背景色的明暗自动推荐可读的前景文字色,避免在深色按钮上写深色字这类可读性问题。
怎么用
- 1
输入颜色
在输入框里输入任意支持的格式,或用取色器直接选一个颜色,所有结果会实时更新。
- 2
复制所需格式
在「各格式表示」区找到目标格式,点复制按钮即可粘进代码或设计工具。
- 3
查看颜色属性
感知亮度与深浅判定可用于确定文字颜色;命名色提示能帮你快速判断这大概是什么颜色。
- 4
取用色阶
需要一整套配色时,直接复制色阶中的色值作为 --color-primary-100 … -900 之类的变量。
参数说明
- HEX
- 十六进制表示,形如 #ff8800。三位缩写 #f80 等价于 #ff8800;八位形式末两位是 alpha,本工具忽略 alpha。
- RGB
- 红绿蓝三通道,各 0–255。贴合屏幕的加色模型,适合做叠加与透明度计算。
- HSL
- 色相(0–360°)、饱和度(0–100%)、亮度(0–100%)。色相是环形的,所以 -30° 与 330° 等价;调明暗时比 RGB 更符合直觉。
- HSV
- 色相、饱和度、明度。与 HSL 的区别在于 V 表示最亮通道的值,是 Photoshop 等取色面板常用的模型。
- 感知亮度
- 按 0.299R + 0.587G + 0.114B 加权得到(ITU-R BT.601),范围 0–255。绿色权重最高、蓝色最低,这与人的视觉感受一致。
- 灰度值
- 把彩色按感知亮度折算成的灰阶值,可用于生成黑白预览或判断印刷后的深浅表现。
- 色阶
- 固定色相与饱和度,把亮度从 95% 线性降到 15% 得到的九级色板,是设计系统里最常见的一套变量结构。
适用场景
- 把设计稿里的 HEX 转成 HSL,方便在 CSS 里调整明暗
- 从截图或网页取色后转成十六进制写进样式表
- 判断某个背景色上应该用白字还是黑字
- 为品牌色生成一整套浅深色阶,作为设计 token
- 给图表生成一组色相均匀分布的同族配色
- 把 rgb() 写法批量转成 HEX 以便统一维护
- 确认某个颜色在打印成黑白后是否还能区分
常见问题
关于这个工具,你可能会问
HEX、RGB、HSL 有什么区别?
三者描述的是同一个颜色的不同侧面,可以无损互转。HEX 和 RGB 是同一套色彩空间的不同书写方式(十六进制与十进制);HSL 则换了个角度,用「什么颜色、多鲜艳、多亮」来描述,更贴近人调色时的思维方式,因此在调整明暗时更好用。
为什么 HSL 转回 RGB 会有 1 的误差?
因为 HSL 里的色相是连续的浮点数,而 RGB 通道必须是 0–255 的整数,换算过程中要取整,来回转换时会产生最多 1 的偏差。这在视觉上完全不可察觉,不影响使用。
HSL 和 HSV 该用哪个?
CSS 只支持 HSL,写样式表就用 HSL。HSV 常见于取色面板(如 Photoshop 的色轮),因为把 V 拉满时能得到最鲜艳的颜色,适合挑色。两者色相与饱和度的含义也有细微差别,不能直接互换数值。
感知亮度是怎么算的?为什么要加权?
用的是 ITU-R BT.601 的系数 0.299R + 0.587G + 0.114B。因为人眼对绿色最敏感、对蓝色最不敏感,如果三个通道简单平均,一瓶纯蓝和一瓶纯黄会被算成同样的亮度,这与实际观感不符。加权之后结果才和眼睛看到的一致。
怎么判断该配黑字还是白字?
看感知亮度。亮度低于 128 视为深色,建议配浅色文字;高于 128 视为浅色,建议配深色文字。本工具会在「对比色建议」中直接给出推荐值,你复制即可。这比用纯黑纯白更柔和,可视面积大时不易刺眼。
色阶是怎么生成的?
保持色相与饱和度不变,把亮度从 95% 均匀降到 15%,得到九级色板。这样每一级都能看出是同一个色族,又覆盖了从背景色到强调色的全部区间,是目前设计系统里最常见的组织方式。
为什么输入某些颜色会说「无对应命名色」?
本工具内置了 12 个最常见的 CSS 命名色(red、green、blue 等)。如果输入的颜色与它们的距离都超过阈值,就会明确告诉你「没有近似命名色」,而不是硬塞一个明显不对的名字。这是刻意的取舍:给错答案比不给答案更糟。
支持带透明度的颜色吗?
可以输入八位 HEX(#ff880080)或 rgba() 写法,但本工具专注于颜色本身的转换,会忽略 alpha 通道。如果你需要处理透明度叠加,请使用专门的工具。