WEB 安全色

功能

• 216 色全部列出，按色相分组，每条都带色块
• 每个颜色给出六位色值与三位短写两种写法
• RGB 与 HSL 一并给出，可以直接粘进样式表
• 输入任意颜色，判断它是不是 WEB 安全色
• 不是的话给出最接近的那一个，以及色差有多大
• 标出三个通道的取值 —— 这是「为什么它一定能缩写成三位」的答案
• 三位短写（#f00）与六位（#ff0000）随便用哪种都能查，大小写不拘
• 标出配黑字还是白字更清楚，并给出 WCAG 对比度
• 216 个色值全在可搜索的下拉里，按色相分组
• 留空看整张色板，可以当调色板浏览
• 粘贴容错：正文例子的「」引号、输入法打出的全角都不影响查询
• 色值逐行可复制，方便贴进设计稿或代码

使用方法

1. 在输入框里打一个色值，例如 #f00 或 #336699
2. 结果给出六位、三位短写、RGB、HSL、通道取值，以及该配黑字还是白字
3. 打一个不在色板里的颜色，例如 #123456，它会给出最近的那个并算出色差
4. 留空则列出全部 216 色，按色相分组

常见问题

「WEB 安全色」今天还有意义吗？

作为技术约束已经没有了，这一点得说实话：它当年的前提是显示器只能凑出 216 色，而现在任何一块屏幕都能显示远多于此的颜色，「保证不偏色」这件事早就不需要靠它了。 它今天还有用的是另外三点：一是分布均匀 —— 三个通道各分六级，是一份很规整的现成调色板，挑色不容易挑到一堆挤在一起的颜色；二是能写成三位短写，CSS 里 `#f00` 比 `#ff0000` 短也更好记；三是跨工具一致，很多老系统、图表库、终端主题的默认色板就是这一套。所以把它当成一份好用的调色板，而不是一份必须遵守的兼容性清单。

为什么 216 个颜色全都能缩写成三位？

因为每个通道只取六个值：0、51、102、153、204、255。写成十六进制分别是 `00`、`33`、`66`、`99`、`cc`、`ff` —— 两位一模一样，所以六位写法里每一位都是重复的，可以缩掉一半。反过来也成立：能缩写成三位的颜色，三位里每一位展开都是重复的两位，于是通道取值必然落在这六个里。这两个条件互为充要，所以「三位短写」与「WEB 安全色」指的是同一批颜色。

「最接近的」是怎么算的？

用的是 RGB 空间上的加权距离（redmean 公式）：同样差 255，在绿色通道上的差异会被算得比在蓝色通道上大，因为人眼对绿色最敏感、对蓝色最迟钝。直接用普通的欧氏距离（三个通道一视同仁）会经常给出「一眼就看出不对」的近似色。没有上 CIEDE2000 那个更精确的标准，是因为这里只需要在 216 个候选里挑一个，redmean 已经到肉眼难辨的程度，而它的实现只有三行、不会写错。

色差那个数字是什么单位？

没有单位，它是按上面那个公式算出来的距离，只能用来互相比较：越接近 0 说明越像，数值越大说明差得越远。它不对应任何色彩学标准里的 ΔE，所以不要拿它去和别的工具的数字比 —— 换成另一个距离公式，同一个色对的数字就会变。它的职责只是告诉你「这个近似色到底有多近」。