前端开发里最常见的「格式转换」之一就是颜色值。#FF5733、rgb(255,87,51)、hsl(11,100%,60%) 表示的是同一个颜色，只是写法不同。
速工具 的颜色值转换工具支持三者互转，还支持带透明度的格式（RGBA/HSLA）。
三种格式对比
| 格式 | 示例 | 优点 | 缺点 |
|---|---|---|---|
| HEX | #FF5733 | 最短，前端最常用 | 不支持透明度（要单独写 alpha） |
| RGB | rgb(255,87,51) | 直观（红/绿/蓝各多少） | 比 HEX 长，不直观「这是什么颜色」 |
| HSL | hsl(11,100%,60%) | 最符合人眼感知（色相/饱和度/亮度） | 老浏览器不支持（IE 不行） |
为什么 HSL 更「人性化」
HSL 把颜色拆成三个维度：
- H（Hue 色相）：0-360 度，对应色轮上的位置（0=红，120=绿，240=蓝）
- S（Saturation 饱和度）：0-100%，0% 是灰色，100% 是纯色
- L（Lightness 亮度）：0-100%，0% 是黑，100% 是白，50% 是「正常」
所以「我要一个更亮的蓝色」= 把 L 从 50% 调到 70%，非常直观。用 RGB 的话你得猜怎么调。
透明度写法
// HEX 不支持透明度，要用 RGBA 或单独写 opacity
rgba(255, 87, 51, 0.5) // 50% 透明
// HSL 的透明写法
hsla(11, 100%, 60%, 0.5)
// 现代 CSS 还支持:
#FF573380 // 最后两位是 alpha（80 = 约 50% 透明）在线转换步骤
- 打开 颜色值转换工具。
- 输入颜色值（任意格式，工具自动识别）。
- 查看所有格式的转换结果，点击复制。
- 用取色器从屏幕上取色（支持）。
FAQ
#FFF 和 #FFFFFF 有区别吗？
没有。#RGB 是 #RRGGBB 的简写，#FFF = #FFFFFF（白），#F00 = #FF0000（红）。CSS 支持两种写法，简写更短。
怎么快速生成一套配色方案？
颜色转换工具主要做格式转换，配色需要用专门的配色工具（比如 Adobe Color、Coolors）。一个简单技巧：选一个主色（H 值），然后 S 和 L 微调，生成同色系的不同深浅，看起来就很协调。