HEX、RGB、HSL 是描述同一种颜色的三种不同写法。#1E90FF、rgb(30,144,255)、hsl(210,100%,56%) 指向的其实是同一个蓝色，只是表达方式不同。U2工具箱颜色转换工具内置取色器，可实时得到三种格式并互相转换，是前端开发与 UI 设计的常用助手。
一、三种颜色模型
| 格式 | 写法 | 说明 |
|---|---|---|
| HEX | #RRGGBB | 十六进制，每两位表示红/绿/蓝，网页 CSS 最常用 |
| RGB | rgb(r,g,b) | 红绿蓝三分量，各 0-255 |
| HSL | hsl(h,s%,l%) | 色相(0-360)/饱和度/亮度，更符合人的调色直觉 |
二、互转原理
- HEX ↔ RGB：把 HEX 每两位十六进制转成 0-255 的十进制即可。
#1E90FF→1E=30, 90=144, FF=255→rgb(30,144,255)。 - RGB ↔ HSL：通过数学换算得到色相、饱和度、亮度，便于"调亮一点""降低饱和度"这类操作。
三、什么时候用哪种
- HEX：写 CSS、设计稿标注、品牌色规范。
- RGB / RGBA：需要透明度时用
rgba(r,g,b,a)。 - HSL：批量生成同色系的深浅变化、渐变、主题色最方便。
四、如何在线取色与转换
- 打开 https://www.uutools.com/color-picker。
- 用取色器选色，或直接输入 HEX / RGB / HSL 任一值。
- 实时得到其余格式，一键复制粘贴到代码里。
- 需要预览矢量图配色效果，可用SVG 预览工具。
五、常见问题（FAQ）
Q1：#fff 这种三位写法是什么？
是 #ffffff 的缩写，每位重复一次，表示白色。
Q2：怎么表示带透明度的颜色？
用 rgba(r,g,b,a)（a 为 0-1 的透明度），或 8 位 HEX #RRGGBBAA。
Q3：HSL 里的 H 取值范围？
色相 H 取 0-360（度），0 红、120 绿、240 蓝。
小结：HEX 精确、RGB 通用、HSL 好调，三者可无损互转。日常配色与前端开发用颜色转换工具取色互转，省去手算，效率更高。