HEX、RGB、HSL 三种颜色格式怎么互转
设计稿给的是 HEX，代码里要用 RGB，想调深浅建议用 HSL。搞清三者的适用场景，再讲一遍带透明度的 HEX 怎么读。
同一种颜色有三种常见写法，多数人靠工具换算，但不知道各自适合什么场景。搞清楚了，换算就不会出错。
RGB：设备怎么表示颜色
RGB 用红绿蓝三个通道描述颜色，每个通道 0~255：
rgb(255, 99, 71) /* 番茄红 */
这是最贴近硬件的形式——屏幕本来就在混三个色光。缺点是不直观：看到 rgb(200, 150, 100)，你很难立刻说出它偏冷还是偏暖。
HEX：RGB 的十六进制简写
把三个通道各自写成两位十六进制，拼起来就是 HEX：
#FF6347 = rgb(255, 99, 71)
之所以常见，是因为它短。CSS 里如果每两位重复，还能进一步缩写成三位：#FF6347 可写作 #F63（精度略有损失）。
带透明度的写法是 8 位：#FF634780。前六位是颜色，最后两位是 alpha，80 等于 128，约 50% 不透明度。
HSL：唯一能靠直觉调色的格式
HSL 把颜色拆成语义化的三个维度：
- H（Hue，色相）：0~360 度，对应色环上的位置
- S（Saturation，饱和度）：0%~100%，越高越鲜艳
- L（Lightness，亮度）：0%~100%，0 是黑、100 是白
hsl(9, 100%, 64%) /* 同样是番茄红 */
它的价值在于批量调色：想给整套主题色「加深一档」，只要把所有颜色的 L 减 10%，色相和饱和度不动，视觉上仍然和谐。用 RGB 做同样的事，得同时改三个通道，很容易偏色。
这也是很多设计系统的主题色定义用 HSL（或 OKLCH）的原因。
互转时的两个常见坑
一是别拿 HEX 当字符串做加减。 想实现「悬停时变暗 10%」，不能简单把 #FF6347 的数值减掉一截——十六进制借位会让结果完全走样。先转 HSL 调 L，再转回 HEX。
二是透明度叠在什么颜色上要看背景。 rgba(0,0,0,.5) 压在白底上是灰，压在蓝底上是深蓝。做对比度检查时要把这一层合成算进去，否则会得出「文字看不清」或「明明能看清」的错误结论。
需要换算时用颜色转换工具：HEX / RGB / HSL / HSV 四向互转，带色盘取色和实时预览。