HEX、RGB、HSL 三种写法
网页和设计软件里同一个颜色有多种写法。HEX（十六进制）如 #2b6cb0，两位一组分别表示红、绿、蓝 0–255 的值，#abc 是 #aabbcc 的缩写，8 位形式的最后两位是透明度。RGB 直接写三个 0–255 的分量，rgb(43, 108, 176)，rgba 多一个 0–1 的透明度。HSL 按色相（0–360 度，红 0、绿 120、蓝 240）、饱和度和亮度（百分比）描述，hsl(211, 61%, 43%)，更符合人对颜色的直觉：想要“同一色系更浅一点”只需提高亮度，想要“更灰一点”只需降低饱和度，做主题色的深浅梯度非常方便。三种写法可以无损互转（HSL 取整后可能有 1 的误差）。
对比度是怎么算的
WCAG（网页内容无障碍指南）用“相对亮度”衡量颜色明暗：先把每个分量除以 255，小于等于 0.03928 的除以 12.92，否则按 ((v+0.055)/1.055) 的 2.4 次方做伽马校正，再按 0.2126 R + 0.7152 G + 0.0722 B 加权，得到 0（黑）到 1（白）之间的亮度 L。两个颜色的对比度 = (L 亮 + 0.05) / (L 暗 + 0.05)，范围 1:1 到 21:1。
WCAG 2.1 规定：正文文字与背景的对比度至少 4.5:1 才达到 AA 级，大字号（18pt 以上或 14pt 加粗）放宽到 3:1；AAA 级要求 7:1。图标、输入框边框等非文字元素也需 3:1。本工具自动计算你输入的颜色作为背景时，白色和黑色文字各自的对比度并给出等级，帮助按钮、标签、状态色的配色一次到位。常见误区是浅灰文字配白底，例如 #999 对白色只有 2.85:1，视力较弱的用户和强光下的手机屏幕都很难看清。