颜色代码详解：HEX、RGB、HSL 的原理与互相转换

发布于 2026-08-22 11:00:00 · 0 阅读 · 标签：颜色,HEX,RGB,HSL,前端

#FF5733 是十六进制 RGB，HSL 用色相/饱和度/亮度描述颜色更直观。讲清三种表示法的原理、转换关系与前端选择建议。

一、HEX：最紧凑的写法

#FF5733 六位十六进制，每两位一组依次是红、绿、蓝分量（各 0-255）：

• FF = 255（红满格）、57 = 87、33 = 51。
• 三位缩写 #F53 等价于 #FF5533（每位的数字双写）。
• 八位 #FF5733AA 末两位是 Alpha 透明度（CSS Color 4）。

二、RGB 与加色混合

屏幕发光是加色模型：红绿蓝三色光叠加，全 255 得白色，全 0 得黑色。CSS 写法 rgb(255, 87, 51)，带透明度 rgba(255, 87, 51, 0.5)。

所有「屏幕颜色」都是这 256×256×256 ≈ 1677 万种组合之一。

三、HSL：为人设计的坐标

HSL 用三个直觉维度描述颜色：

• H 色相（0-360°）：色环角度，0 红、120 绿、240 蓝。
• S 饱和度（0-100%）：灰色到纯色。
• L 亮度（0-100%）：黑到白，50% 是正常色。

做主题色系时 HSL 是神器：把 H 固定、微调 S/L，就能批量生成同色系的 hover、边框、背景色，比手调 HEX 直观百倍。

四、转换与实战

1. HEX→RGB：两位一组按十六进制解析。
2. RGB→HSL：先把各分量归一化到 0-1，最大值为 L 的锚点，套标准公式。
3. 前端建议：CSS 变量存 HSL 分量，--h: 210，用法 hsl(var(--h) 80% 50%)，一键换肤。

在线体验

不用装任何环境，直接用本站二维码生成工具在线操作，数据都在浏览器本地处理，方便又安全。