颜色代码怎么看：HEX、RGB、HSL 一次讲清
做网页、改 PPT 配色、给设计师提需求，总会遇到 #3FB4FF、rgb(63, 180, 255) 这样的颜色代码。它们看着不一样，其实可以描述同一个颜色。理解这几种写法之后，你能看懂别人给的色值，也能自己微调颜色，不再只靠“再亮一点”“再蓝一点”沟通。
RGB：红、绿、蓝三种光混出来
屏幕上的颜色由红（R）、绿（G）、蓝（B）三种光按强度混合而成，每种光的强度取 0 到 255 之间的整数，共 256 级。rgb(0, 0, 0) 是三种光都不亮，即黑色；rgb(255, 255, 255) 是全部最亮，即白色；rgb(255, 0, 0) 是纯红。三个分量相等时得到的是不同深浅的灰色。
HEX：把 RGB 写成十六进制
HEX 色值就是 RGB 的十六进制写法：# 后面每两位代表一个分量，依次是红、绿、蓝。十六进制用 0–9 和 A–F 表示 0 到 15，两位最大是 FF，即 255。
| HEX | 拆开 | RGB |
|---|---|---|
#3FB4FF | 3F / B4 / FF | 63, 180, 255 |
#FF0000 | FF / 00 / 00 | 255, 0, 0（红） |
#808080 | 80 / 80 / 80 | 128, 128, 128（灰） |
手算方法：把一位十六进制换成数字，第一位乘 16 再加第二位。例如 B4：B 是 11，11 × 16 + 4 = 180。反过来，180 ÷ 16 = 11 余 4，写成 B4。
还有一种 3 位简写：#FFF 等于 #FFFFFF，#09C 等于 #0099CC，每一位重复一次即可。字母大小写没有区别。
HSL：更符合直觉的调色方式
HSL 用色相（Hue）、饱和度（Saturation）、亮度（Lightness）描述颜色：
- 色相：0 到 360 度的色环位置，0 是红，120 是绿，240 是蓝。
- 饱和度：0% 是灰色，100% 最鲜艳。
- 亮度：0% 是黑，100% 是白，50% 是最“纯”的颜色。
HSL 的好处是调色直观：想让按钮在鼠标悬停时深一点，只需把亮度从 62% 调到 52%，色相不变，颜色还是那个蓝。用 RGB 做同样的事，三个数字都得改。
透明度怎么写
CSS 里可以加第四个值表示不透明度：rgba(0, 0, 0, 0.5) 是半透明的黑色，0 是完全透明，1 是完全不透明。HEX 也可以写成 8 位，最后两位是透明度，#00000080 中 80 换成十进制是 128，128 ÷ 255 约等于 0.5。较新的 CSS 规范还允许 rgb(0 0 0 / 50%) 这种空格分隔写法，具体支持情况以浏览器官方文档为准。
对比度：颜色好看还要看得清
浅灰字配白底看起来很“高级”，但很多人读起来吃力。W3C 的 WCAG 无障碍指南用“对比度”衡量文字和背景的区分程度，取值从 1:1（完全相同）到 21:1（黑白）。AA 级要求普通正文至少 4.5:1，大号文字至少 3:1；AAA 级要求正文至少 7:1。例如 #777777 灰字配白底约为 4.48:1，略低于 4.5，正文用它就不达标，换成 #767676 则刚好达到。
实用小技巧
- 设计稿给的是 HEX，代码里要用 RGB 加透明度时，按上面的方法拆开换算即可。
- 同一套配色，用 HSL 只改亮度生成浅色背景和深色文字，整体更协调。
- 批量替换样式表里的色值，可以先用 正则测试工具 写出匹配
#[0-9A-Fa-f]{6}的规则再替换。 - 做带品牌色的二维码时，前景要足够深、背景要足够浅，否则可能扫不出，参考 《二维码原理与使用技巧》。
颜色写法的权威定义见 W3C CSS Color Module Level 4，对比度要求见 WCAG 2.1，以官方为准。