颜色转换

HEX、RGB、HSL 有什么区别？

HEX（十六进制）

形如 #534AB7，每两位表示 R、G、B 通道，取值范围 00-FF（0-255）。是 CSS 和设计稿里最常见的写法，简洁易复制。

RGB

形如 rgb(83, 74, 183)，每个通道 0-255，直接对应屏幕三原色的发光强度，最贴近硬件，但很难凭数字想象出颜色。

HSL

形如 hsl(245, 44%, 50%)，分别代表色相（0-360°，决定是什么颜色）、饱和度（0-100%，颜色浓淡）、亮度（0-100%，明暗）。HSL 最符合人的直觉，想调亮就加 L，想调灰就减 S，因此做主题配色和生成色阶时最方便。

做配色的小技巧

• 主色确定后，同类色用相同 H、不同 L 生成深浅色阶，视觉最统一。
• 强调色取主色 H + 150°~180° 的互补色，对比强烈。
• 文字与背景的亮度差建议大于 40%，保证可读性。