要点：HEX、RGB 与 HSL 都描述同样的颜色，只是方式不同。HEX 与 RGB 是同一组红绿蓝值的两种写法；HSL 把它们重新表达为色相、饱和度与明度，手动调整要容易得多。知道该用哪种格式，能在匹配或微调颜色时省去大量猜测。
网页上的颜色归根结底是三个通道——红、绿、蓝——但你如何书写这些通道，决定了理解和调整这些数值的难易。
HEX 与 RGB：同一颜色的两种表示法
RGB 直接列出三个通道：rgb(37, 99, 235)。HEX 把相同的值打包成十六进制字符串：#2563EB，其中 25、63、EB 分别是红、绿、蓝字节。两者可互换——HEX 紧凑、在设计工具中常见，RGB 在代码里方便，因为可逐通道计算。没有哪个更“准确”；它们是同一颜色的两种表示法。
HSL：为调整而生的格式
HSL 用色相（在色轮上的位置，0–360°）、饱和度（有多鲜艳，0–100%）和明度（有多亮，0–100%）来描述颜色。当你想调整而非替换颜色时就用它：为悬停态调低明度，为柔和变体降低饱和度，或移动色相去找互补色。在 HEX 里做同样的编辑，就是猜字节值。
alpha 与 8 位 HEX
透明度用 alpha 通道表达：rgba() 与 hsla() 加入第四个值，从 0（透明）到 1（不透明）。现代 CSS 也支持 8 位 HEX，末两位编码 alpha——#2563EB80 就是同一蓝色约 50% 不透明度。
CMYK 是另一个世界
HEX、RGB 与 HSL 都是屏幕颜色模型（加色光）。CMYK 用于印刷（减色墨）。二者之间的转换总是近似，因为它们无法完全重现相同色域，所以把屏幕到印刷的转换当作需要打样核对的起点，而非精确匹配。
一个实用流程
- 把起始颜色——任意格式——粘贴到颜色转换器，一次查看所有格式。
- 切到 HSL 来构建变体：为状态调明度，为柔和色调降饱和度。
- 需要透明时用
rgba()/hsla()或 8 位 HEX 加入 alpha。 - 用渐变预览为两种或更多颜色生成可复制的 CSS 片段。
若在批量处理一套调色板，可一次转换多种颜色（用逗号或换行分隔），并用字符计数器把结果放在笔记旁。
需要避免的常见错误
- 本可用 HSL 让调整一目了然，却在 HEX 里改颜色。
- 指望 CMYK 转换与屏幕完全一致。
- 忘了 alpha 通道，在想要透明处得到不透明色。
- 在样式表里不一致地混用格式。