#336699 是什么颜色？HEX、RGB、HSL 与对比度

一、HEX 和 RGB 是同一种东西的两种写法

#336699 和 rgb(51, 102, 153) 表示完全相同的颜色，只是写法不同：

通道	HEX	十进制
红	33	51
绿	66	102
蓝	99	153

换算方法：十六进制两位一组，33 = 3×16+3 = 51，66 = 102，99 = 153。所以看到 HEX，两位两位读出来转成十进制就是 RGB。

HEX 紧凑，适合设计稿与 CSS；rgb() 可读性好，还能扩成 rgba(r, g, b, a) 加透明度。

二、#369 为什么等于 #336699

三位写法是六位写法的缩写，规则是每一位重复一次：

#369 → #336699
#ABC → #AABBCC

前提是每个通道的两位必须相同。#AABBCC 可以缩写成 #ABC，但 #ABCDEF 不能缩——缩了会变成 #AABBCC 这个完全不同的颜色。看到三位 HEX 想还原，就是每位重复一遍。

三、HSL：调色时更好用

#336699 的 HSL 是 hsl(210, 50%, 40%)：

• H（色相）210：色轮上的角度，210° 是蓝色系；
• S（饱和度）50%：越接近 100% 越鲜艳，0% 就是灰色；
• L（亮度）40%：0% 全黑、100% 全白。

HSL 的好处是符合直觉：想做一套「同色系深浅按钮」，固定 H 和 S、只改 L 就行——L 调到 60% 得到浅蓝，调到 25% 得到深蓝，色相一致，整套配色天然协调。在 RGB 里凑数要反复试，在 HSL 里改一个数就够。

顺带两个锚点：#ff0000 是 hsl(0, 100%, 50%)，#ffffff 是 hsl(0, 0%, 100%)（无饱和度、全亮）。

四、对比度：文字可读性的硬指标

WCAG 2.1 的要求是正文文字对比度 ≥ 4.5:1，大号文字 ≥ 3:1。对比度是两色的相对亮度比值，范围 1:1（同色）到 21:1（黑白）。

几个实测值：

背景色	黑字对比度	白字对比度	建议
#336699	3.50	6.00	用白字
#ffff00（黄）	19.56	1.07	用黑字
#7f7f7f（中灰）	5.24	4.00	黑字勉强达标，白字不够
#000000	1.00	21.00	用白字

注意第二行那种情况：黄色背景上白字对比度只有 1.07，几乎看不见；但黑字有 19.56，非常清楚。颜色越亮，越该用深色文字——工具会直接推荐可读性更好的那一种。

中灰（#7f7f7f）是典型的踩坑色：白字 4.00 低于 4.5 的正文标准，勉强用黑字才达标。灰底白字的设计稿很多都过不了这一个检查。

五、带透明度的三种写法

• #RRGGBBAA：后两位是透明度，FF 完全不透明，#33669980 约 50% 透明；
• rgba(51, 102, 153, 0.5)：a 取 0~1，语义更直观；
• 现代 CSS 也支持 8 位 HEX。

设计稿里给「悬停态」加一层半透明遮罩时，用 8 位 HEX 比另配一个颜色更省事，也不会因为底色不同而跑偏。

六、直接算

→ 颜色转换器：HEX、RGB、HSL 互转，含对比度与文字颜色推荐

→ 十六进制与二进制转换：理解 16 进制与字节的关系

→ ASCII 码表：颜色值其实是字节，这套换算和字符编码同源