#FF5733、rgb(255, 87, 51)、hsl(11, 100%, 60%)——这三种写法描述的其实是同一个颜色，只是用了三套不同的"坐标系"。理解它们各自在描述什么，比死记 HEX 代码更有用。
RGB 直接对应屏幕显示的物理原理——每个像素由红（Red）、绿（Green）、蓝（Blue）三个发光单元组成，三种颜色光按不同强度混合，就能合成人眼可见的绝大部分颜色。每个分量用 0-255（8 位）表示强度，rgb(255, 87, 51) 就是"红光最大强度、绿光中等强度、蓝光较低强度"混合出的橙红色。RGB 的坐标系统完全贴合硬件的发光方式，这也是为什么它是最基础、最通用的颜色表示法。
HEX（十六进制颜色码）不是一种独立的颜色模型，只是把 RGB 的三个数字换成十六进制写法，拼在一起变成一个更紧凑的字符串：#FF5733 里，FF 是红色分量的十六进制（255）、57 是绿色分量（87）、33 是蓝色分量（51）。因为每 2 位十六进制正好能表示 0-255 的范围（16²=256），HEX 写法比十进制的 rgb(255,87,51) 更短，这也是网页开发和设计工具里最常见的颜色书写形式。
RGB/HEX 的问题是不直观——看到 #FF5733 很难立刻判断这是什么颜色、想让它变浅或变深该怎么调。HSL（Hue 色相、Saturation 饱和度、Lightness 明度）换了一套更符合人类描述颜色习惯的坐标：
用 HSL 调色的好处很直接：想要同一个色相更浅的版本，只需要调高 Lightness，色相数值完全不用变——这在 RGB/HEX 下几乎无法直觉地做到，因为改变明暗需要同时调整三个分量的数值。
三种表示法描述的是同一批颜色，选择更多是场景和习惯问题：HEX 最常用于网页 CSS 和设计稿交付（简短、和主流设计工具默认输出一致）；RGB 在需要精确控制每个颜色通道、或者做颜色混合运算（比如透明度叠加）时更直接；HSL 在需要"基于同一色相做明暗/鲜艳度变化"的场景（比如生成一组配色梯度、做主题色的深浅变体）明显更方便调整。现代 CSS 三种写法都原生支持，实际开发中经常需要互相转换，取的是各自在不同场景下的可读性和可操作性优势。