关于颜色格式
屏幕颜色通常用三种格式表示。HEX 使用类似 #4f46e5 的六位十六进制代码。RGB（红、绿、蓝）用 0 到 255 的三个数字描述。HSL（色相、饱和度、亮度）通过色轮角度（0-360°）、纯度（0-100%）和亮度（0-100%）表达颜色。三种格式描述同一色彩空间，可相互转换。
颜色转换器
输入 HEX 颜色代码，即时查看 RGB、HSL 值及颜色预览。
颜色预览
RGB
-
HSL-
HEX 颜色-
怎么把 HEX 颜色转换成 RGB 和 HSL?
把 HEX 颜色转成 RGB 时,先拆成三组两位数,每组从十六进制换算成十进制(0-255);要得到 HSL,再用这些 RGB 值计算色相、饱和度和明度。举例:#4F46E5 转换后是 rgb(79, 70, 229) 和 hsl(243, 75%, 59%)。
HEX 转换成 RGB 和 HSL 的步骤
- 去掉开头的 # 符号,把 6 位 HEX 代码拆成三组两位数(#4F46E5 拆成 4F、46、E5)。
- 把每组十六进制数换算成 0-255 之间的十进制数(4F=79、46=70、E5=229),得到 RGB 值。
- 把每个 RGB 值除以 255 归一化到 0-1 区间,再找出三者中的最大值和最小值。
- 明度是最大值和最小值的平均数;饱和度和色相则用标准 HSL 公式,由最大值与最小值的差算出。
- 显示时把色相四舍五入到整数度(0-360),饱和度和明度四舍五入到整数百分比(0-100%)。
HEX 到 RGB 再到 HSL
RGB 通道 = parseInt(十六进制对, 16) · 明度 = (max(R,G,B) + min(R,G,B)) / 2,归一化到 0-1
- R、G、B = 红、绿、蓝三个通道的值,各自在 0-255 之间
- H、S、L = 色相(0-360 度)、饱和度和明度(0-100%)
常见颜色换算
#FF0000转成RGB是多少?
#FF0000是rgb(255, 0, 0)——纯红色，红色通道为最大值，绿色和蓝色均为0。
#FFFFFF转成RGB是多少?
#FFFFFF是rgb(255, 255, 255)——纯白色，三个通道均为最大值。
#000000转成RGB是多少?
#000000是rgb(0, 0, 0)——纯黑色，三个通道均为0。
rgb(0, 128, 0)转成十六进制是多少?
rgb(0, 128, 0)是#008000。因为十进制128换算成十六进制正好是80(中等深浅的绿色)。
#FFA500转成RGB是多少?
#FFA500是rgb(255, 165, 0)——标准橙色。
#00FF00转成RGB是多少?
#00FF00是rgb(0, 255, 0)——纯绿色，只有绿色通道为最大值。
#0000FF转成RGB是多少?
#0000FF是rgb(0, 0, 255)——纯蓝色，只有蓝色通道为最大值。
rgb(255, 255, 0)转成十六进制是多少?
rgb(255, 255, 0)是#FFFF00——由满值红色和绿色混合而成的纯黄色。
颜色转换示例
| HEX | RGB | HSL |
|---|---|---|
| #4F46E5 | rgb(79, 70, 229) | hsl(243, 75%, 59%) |
| #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| #1D4ED8 | rgb(29, 78, 216) | hsl(224, 76%, 48%) |
| #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
常见问题
HEX、RGB、HSL 有什么区别?
HEX 和 RGB 用同一种方式描述颜色,都是红、绿、蓝光的量,只是记法不同(十六进制和十进制)。HSL 用色相(颜色本身)、饱和度(鲜艳程度)、明度(明暗程度)来描述同一个颜色,手动调色时往往更直观。
为什么白色的饱和度是 0%?
饱和度衡量的是一个颜色离灰色有多远。纯白、纯黑以及它们之间的所有灰色,红、绿、蓝三个值都相等,所以不管明度多少,饱和度永远是 0%。
能输入像 #FFF 这样的 3 位 HEX 代码吗?
本工具需要完整的 6 位 HEX 格式(#RRGGBB)。像 #FFF 这样的 3 位简写是 CSS 里 #FFFFFF 的缩写,每一位都会重复一次;请先展开成 6 位再输入。
红、绿、蓝三个值都不一样时,色相是怎么算出来的?
色相取决于红、绿、蓝三个通道中哪个值最大,再根据另外两个通道的相对位置计算得出。结果是 360 度色轮上的一个角度,0 度是红色,120 度是绿色,240 度是蓝色。
这个工具能帮我核对设计规范里的品牌色吗?
它能在 HEX、RGB、HSL 之间准确转换给定的颜色,适合用来记录品牌色规范,或核对设计稿和 CSS 代码里的颜色是否一致。但它不会推荐配色方案,也不检查 WCAG 无障碍对比度是否达标,这类需求需要专门的工具。
本工具只转换网页常用的标准 6 位 HEX 颜色,不支持 alpha(透明度)通道、CSS 命名颜色,也不支持 HSV、LAB 等 sRGB 以外的色彩空间。
Sources: W3C CSS Color Module Level 4
隐私与安全
- 在浏览器中计算 — 您输入的内容仅在本机设备上计算，不会发送到 utilduck 服务器。
- 加密连接 — 所有页面均通过 HTTPS 提供，传输过程中无法被读取。
- 不提供给第三方 — 您输入的内容不会传递给分析或广告服务。
- 不保存 — 计算结果不会保存到任何服务器，也无需注册账号。
最后更新: 2026-08-24