WebSafe 颜色表

使用方法

1. 「查询颜色」默认 #336699，可以写 6 位（#336699）也可以写 3 位（#369），带不带井号都认。光标停在框里按回车立即重查。
2. 「近似色候选数」默认 5，范围 1 到 10，步长 1。它决定结果区列出几个最接近的 WebSafe 色以及各自的欧氏距离。
3. 「色板分组」三选一：6×36 网格顺序按蓝通道最快变化排列；按色相分组把同色相的排在一起、灰阶排在最前；按亮度分组按 Rec.601 亮度从暗到亮排。
4. 「批量查近似色」默认已经写好六行十六进制颜色，每行一个。按 Ctrl+Enter（Mac 上 Cmd+Enter）一次算完，框被清空时点「查询」会自动填回示例。
5. 结果区给出当前色的 6 位写法、3 位缩写、rgb() 写法、十进制三元组，以及按欧氏距离排序的若干候选，距离 0 表示这个色本身就是 WebSafe 色。
6. 下面的色板共 216 行，每行前面是色块，后面是四种写法。点任意一行即把它设为当前色，结果区同步刷新。
7. 色板默认显示 12 行，点「加载更多」展开全部 216 行，点「导出 CSV」存成带 BOM 的文件，点「复制表格」复制制表符版本。
8. 颜色值留空、含非十六进制字符、位数不是 3 位或 6 位，批量里某一行写错，都会给出写明原因与行号的提示，不会拿上一次结果冒充本次输出。

这个 WebSafe 颜色表能解决什么问题

这一页的别名 WebSafeColors图表 是早期机翻留下的名字，指的就是同一张 216 色表。它要解决的问题很具体：在只有 256 色的显示模式下，哪些颜色可以放心用而不至于在另一台机器上变成别的颜色。

第一类是配色取值。216 色是全部 24 位真彩里的一个极小的子集，但它足够撑起一套完整的配色：6 档明度、6 档色相跨度，取出来的色彼此关系清楚，不会出现两个挨得很近却看不出差别的色。

第二类是找缩写。只要是 WebSafe 色，6 位写法一定能无损缩写成 3 位，这在手写 CSS、写内联样式、口述色值时非常省事。本页每一行都同时给出两种写法，可以直接照抄。

第三类是判断一个随手取到的色值离 WebSafe 有多远。设计稿里常常是 #315fe8 这类任意值，本页按欧氏距离找出最近的几档，让你在「保持原色」与「换成可缩写色」之间做决定。

第四类是理解色差。相邻档之间差 51 级，这个数值本身不大，但在 sRGB 的 gamma 曲线下，低亮度区从 0 跳到 51 的视觉跳变最明显，越往亮处走跳变越平缓。本页按亮度分组浏览时，这一点看得很清楚。

计算原理与变量说明

216 这个数字来自 6³：红、绿、蓝三个通道各自只取六个值，0、51、102、153、204、255，步长是 51 = 255 ÷ 5。三个通道各六档，6 × 6 × 6 = 216。

关键在第二个性质：这六个值写成十六进制是 00、33、66、99、CC、FF，两位数完全相同。正因为两位相同，把每对数字砍掉一半就得到无损的 3 位写法——#003366 → #036、#FFCC99 → #FC9。这正是 CSS 的 3 位写法能无损还原的原因：浏览器把每一位复制成两位即可，#369 还原成 #336699。反过来，任意 6 位色值要能缩写成 3 位，充要条件就是每两位相同，也就是必须落在 WebSafe 集合内。

216 的来历是一次妥协。256 色显示模式下，Windows 自己保留 20 色、Mac 自己保留 20 色，两边保留的并不完全相同；剩下 256 − 20 − 20 = 216 色是两边一致的，这部分就叫 WebSafe。所以它不是设计出来的色系，而是两个系统调色板求交集剩下的部分。

占多少？24 位真彩一共 16777216 种颜色，WebSafe 只有 216 种，占比 0.00128746032715，大约是 77672.2962963 分之一。今天还在用它，主要不是因为色彩科学，而是因为 3 位缩写好记、好写、好对齐。

相邻档的色差也要注意。相邻档差 51 级，在 sRGB 的 gamma 下，低亮度区从 0 到 51 的视觉跳变最大；越接近白端，同样的 51 级看起来越接近。一个直接后果是：如果按 24 档做灰阶，里面只有 6 档是 WebSafe 色，即 #000000、#333333、#666666、#999999、#CCCCCC、#FFFFFF。

「最近似」用的是三维欧氏距离：把颜色当成 RGB 空间里的一个点，距离 = √((ΔR)² + (ΔG)² + (ΔB)²)，在 216 个点里取最小的几个。它算的是数值距离，不是人眼感知距离——若要按感知挑，应当先转到 CIELAB 再算 ΔE。

完整示例（数值仅作演示）

打开页面时的默认值是颜色 #336699、候选数 5、网格顺序。它本身就是 WebSafe 色（三个通道分别是第 2、3、4 档），所以最近似的候选是它自己，距离 0；3 位缩写是 #369，rgb 写法是 rgb(51, 102, 153)，十进制三元组是 51,102,153。

批量框第一行的 #315fe8 不在 216 色里：红通道 49 离 51 只差 2，绿通道 95 离 102 差 7，蓝通道 232 离 255 差 23，最近的档是 #3366FF，缩写 #36F，欧氏距离约 24.12。三通道里蓝通道贡献了绝大部分距离。

再看 #808080：三个通道都是 128，恰好夹在 102 与 153 中间，离 153 只差 25，所以最近似是 #999999，缩写 #999，距离约 43.30。把它改成 #7f7f7f 会把结果翻到 #666666——127 离 102 是 25、离 153 是 26，方向就反了。

WebSafe 色值对照表

下表给出六个通道值对应的四种写法，本页 216 色全部由这六档组合而成。

第二张表是灰阶：24 档灰阶里只有这 6 档是 WebSafe 色，其余 18 档三通道不同时落在六档上。

结果边界、舍入与适用说明

• 颜色值留空时提示不能为空；含 0-9 与 A-F 之外的字符时提示该字符不合法并指出原文。
• 位数既不是 3 位也不是 6 位时提示「请写成 #RGB 或 #RRGGBB」，不自动补零也不截断——#33669 这种 5 位写法多半是漏了一位，补零会给出完全错误的颜色。
• 3 位写法按「每位复制成两位」还原，这是 CSS 的规定动作，不是四舍五入；所以 #369 得 #336699，不会得到别的数。
• 候选数留空、写成小数或超出 1 到 10 时分别给出对应提示，不套默认值。
• 批量框每行单独判定，任一行写错就报出行号与原文，其余行不再计算——避免把错误色值当成合法输入混进结果。
• 批量框被清空时不会报错，而是把六行示例填回去再算。
• 欧氏距离按 sRGB 数值直接算，不感知均匀：人眼对绿色更敏感，数值距离相同的两对颜色看起来未必一样近。
• 本页只做色值换算与检索，不做对比度评估。文字与背景的可读性请按对比度公式另算，不要拿这里的距离当依据。

常见问题

相关工具

• 十六进制转 RGB：把任意 6 位色值拆成十进制三元组。
• RGB 转十六进制：反方向拼回 6 位写法。
• 十六进制转 HSL：按色相饱和度亮度重新描述同一个色。
• CMYK 转 RGB：印刷四色转屏幕色，注意色域并不重合。
• 颜色对比度检测：算文字与背景的对比度，判断可读性。
• 颜色工具：查看全部颜色工具。