HEX、RGB、HSL：理解网页色彩代码
你正在编辑网站，在CSS中看到#FF5733。或者你在与设计师合作，他们发来rgb(255, 87, 51)。或者设计工具显示颜色为hsl(11, 100%, 60%)。这些都描述了完全相同的颜色——一种鲜艳的红橙色——但使用三种不同的格式。
如果你曾经被网页色彩代码搞糊涂，这篇指南将在五分钟内为你解惑。
数字颜色如何工作
屏幕上的每种颜色都是通过混合三种基本光色创建的：红色、绿色和蓝色。这就是RGB颜色模型。通过改变每个通道从零（关闭）到最大值（全亮度）的强度，你可以创建标准显示器能显示的约1670万种颜色中的任何一种。
每种网页使用的颜色格式只是表达这些通道值的不同方式。
你知道吗？ 1670万种颜色的数字来自每个通道256个级别（0-255），跨越三个通道：256 × 256 × 256 = 16,777,216种可能的颜色。
HEX颜色
格式示例
#FF5733
#3498DB
#2ECC71
工作原理
HEX颜色代码是一个六字符的字符串，前面有井号。六个字符分为三对，每对以十六进制（16进制）表示一个颜色通道。
分解#FF5733：
- FF = 红色255（最大值）
- 57 = 绿色87
- 33 = 蓝色51
提示 HEX代码是网页开发中最广泛使用的格式。如果你只学一种格式，学这个。
RGB颜色
RGB表示法直接用0到255的十进制数表示红、绿、蓝通道值。它是最直观的格式。
rgb(255, 87, 51)表示：红色255，绿色87，蓝色51。
RGBA：添加透明度
RGBA增加了第四个值表示不透明度（alpha），范围从0（完全透明）到1（完全不透明）。
HSL颜色
HSL代表色相（Hue）、饱和度（Saturation）、亮度（Lightness）。它以人类自然思考颜色的方式描述颜色。
色相是色轮上的角度（0-360度）。饱和度是颜色的鲜艳程度（0-100%）。亮度是颜色的明暗程度（0-100%）。
你知道吗？ HSL被认为是对设计师最友好的颜色格式，因为它映射到我们自然描述颜色的方式。"让它亮一点"意味着增加L值。"让它不那么鲜艳"意味着降低S值。
何时使用哪种格式
| 格式 | 最适合 | 优势 |
|---|---|---|
| HEX | CSS样式表、设计规范 | 紧凑，普遍被理解 |
| RGB | 程序化颜色操作 | 直观的通道值 |
| HSL | 设计工作、创建配色方案 | 匹配人类对颜色的感知 |
格式之间的转换
你经常需要在格式之间转换。设计师发送HSL值但你的代码库使用HEX。品牌指南指定RGB但你需要HSL来创建变体。
手动计算虽然直接但很繁琐。转换工具可以立即处理。
提示 在HEX、RGB、HSL等格式之间转换：如何转换颜色代码。输入任何格式的颜色，立即获得所有其他格式。
开始使用颜色：
所有工具都是免费的，直接在浏览器中运行。