三种写法，各管一段
同一个颜色在 CSS 里有好几种写法，值一样，区别只在写起来、改起来顺不顺手。
- HEX：
#B4552D。写得最短，设计稿和取色器给的就是它，适合写死在样式里的颜色。缺点是它把颜色当三个字节看，一眼读不出"这个橙有多艳"。 - RGB：
rgb(180, 85, 45)。三个通道各 0~255，好处是好算：整体调暗就把三个数一起乘 0.8；rgba()只改最后一个数就能加透明度，颜色不动。 - HSL：
hsl(18, 60%, 44%)。H 色相、S 饱和度、L 亮度，最贴近人描述颜色的方式："再亮一点""再灰一点"。
调色时 HSL 更顺手
手里有个砖橙 #B4552D，要配出主色、悬停深一档、禁用浅一档。用 HEX 或 RGB，你得把三个通道重算一遍：
三个数各减一点，橙色就往暗褐塌；红色通道本来只有 180，再减就发闷，最后往往推翻重来。
换成 HSL 只动最后一个数：34% 深一档、54% 浅一档，色相和鲜艳度纹丝不动，三个颜色天然是一家子。
不过要留个心眼：L 相同，人眼感觉到的明暗并不相同——黄色天生比蓝色显亮。 所以 HSL 只是起点，最后还得靠眼睛和对比度数值来校。
#RGB 什么时候能缩写
HEX 有 6 位和 3 位两种写法，每一对通道的两位数字都相同时，才能各取一位缩成 3 位：
#FFCC00 三组都重复，可以缩成 #FC0；
#B4552D 不行，B4、55、2D 里只有 55 是重复的，硬缩成 #B52 就是另一个颜色了。
3 位的写法浏览器会自动展开成 6 位，反过来不行，本页表格两种情况都会告诉你。
8 位的 #RRGGBBAA 也都认，后两位是透明度，比 rgba() 短，写渐变挺方便。
亮度和配字建议是怎么来的
人眼对红绿蓝的敏感度不一样：绿色最亮，红色次之，蓝色最暗。所以"有多亮"不能简单平均，要按感知加权：
亮度 = 0.299 × R + 0.587 × G + 0.114 × B它出自早期的电视信号标准（BT.601），本来是算黑白电视灰度值的，因为简单够用一直沿用到今天。 结果落在 0~255 之间：128 及以上配黑字，128 以下配白字，字和底明暗差得开；上面那排色板的标签就是这么选的。
更严格的是 WCAG 的对比度公式：先把通道伽马还原成线性光强，再按 0.2126 / 0.7152 / 0.0722 加权，
算 (亮 + 0.05) / (暗 + 0.05)，正文建议 4.5:1 以上、大字 3:1 以上。
两套算法在中间调的灰上会有分歧（#767676 附近），所以本页两个数都列出来。
深灰底配浅灰字最容易"看着有设计感、读起来要命"，先把对比度拉到 4.5:1 以上再谈好不好看。
最后一句实话
屏幕上的颜色是发光的，印刷是反光的，RGB 和 CMYK 能覆盖的范围本来就不一样；加上每台显示器的色温、亮度都不同，
同一串 #B4552D 在手机、笔记本、老显示器上能差出不少。
颜色如果要交付（印物料、定品牌色），一定以实物打样为准。
本页换算全在你的浏览器里完成，不联网、不上传，输入的内容也不会被保存。