颜色名称查找器
发现任意颜色的 CSS 名称
颜色名称查找器能把任意十六进制值映射到最接近的 CSS 命名颜色，并给出该名称的完整信息，包括十六进制、RGB、HSL 值和数值化距离分数。当你手里有一个来自设计稿的十六进制、想知道某个标准名称是否足够接近可用时，它会很有帮助；浏览命名颜色调色板、想看看每个名称实际长什么样时也同样适用。
使用方法
- 在输入框中输入十六进制代码，可带或不带
#，也可以用原生取色器可视化地选取一个颜色。 - 点击 查找名称，与全部 148 种命名颜色进行比对。
- 阅读结果卡片：颜色名称、色块、十六进制、RGB、HSL 以及距离分数。
- 用搜索框按子串过滤命名颜色列表。输入
dark会列出所有 dark 前缀家族，输入blue会把列表中所有蓝色聚到一起。
三位简写会自动展开，因此 #f80 按 #ff8800 处理。输入不区分大小写，十六进制字母可大写也可小写。
匹配是如何打分的
每种命名颜色都存为一个 RGB 三元组。对于一个候选颜色，工具计算：
distance = sqrt( (3*ΔR)^2 + (4*ΔG)^2 + (2*ΔB)^2 )
其中 ΔR、ΔG、ΔB 是输入与候选之间各通道的差值。权重在平方之前施加，因此绿色每单位贡献是蓝色的十六倍、红色的约 1.8 倍。距离最小的候选会被返回，同时给出保留两位小数的距离。
这是一种快速、无依赖的近似方法。它不是 CIEDE2000 那样的感知色差标准，甚至也不是更早的 CIE76 delta-E；它只是把搜索偏向人眼最敏感的绿色，远离最不敏感的蓝色。
实操示例
| 输入 | 展开后 | 最接近的名称 | 该名称的十六进制 | 距离 |
|---|---|---|---|---|
#f80 | #ff8800 | darkorange | #ff8c00 | 16 |
#663399 | #663399 | rebeccapurple | #663399 | 0 |
#00ffff | #00ffff | aqua | #00ffff | 0 |
#f5f5f5 | #f5f5f5 | whitesmoke | #f5f5f5 | 0 |
tomato | #ff6347 | tomato | #ff6347 | 0 |
第一行说明了权重为什么重要。#ff8800 与普通橙色 #ffa500 很接近，但 darkorange 在数值上更近：红、蓝通道完全相同，只有绿色相差 4，乘上权重 4 后距离为 16。
命名颜色在哪里会失灵
- 同义词共享同一十六进制。 aqua/cyan、fuchsia/magenta 以及 gray/grey 对浏览器而言可以互换。工具返回内部顺序中的第一个，所以结果是确定的，但同义词之间是任意的。
- 灰色区域非常密集。 几十个近似灰的名称彼此靠得很近，中等灰输入可能落在 gainsboro、lightgray、silver 或 darkgray 上，取决于极小的通道差异。这时分数比名称更有参考价值。
- RGB 距离不等于感知。 两种颜色的 RGB 距离可以很小，一旦考虑明度却读起来不同，因为 RGB 没有独立的明度项。
- 匹配只是建议。 即便某个颜色没有贴切的名称，工具也总会返回一个名称，因此信任标签之前请先看距离。
解读 HSL 输出
除十六进制和 RGB 之外，每个结果还会显示 HSL：0 到 360 度的色相，以及以百分比表示的饱和度和亮度。HSL 往往比 RGB 更好推理，因为三个轴分别对应直觉。色相是颜色家族，饱和度是鲜艳程度，亮度是它离黑或白有多近。
上面示例中的两个结果可以说明这一点：
| 颜色 | 十六进制 | HSL |
|---|---|---|
| rebeccapurple | #663399 | hsl(270, 50%, 40%) |
| darkorange | #ff8c00 | hsl(33, 100%, 50%) |
Rebeccapurple 读作中等亮度、半饱和的紫色，与 270°、50%、40% 吻合。Darkorange 完全饱和且正好位于黑白之间，因此是 100% 和 50%。想调亮或调暗一个匹配到的颜色时，调整亮度百分比远比逐个编辑 RGB 通道更可预测，这也是工具在距离计算仍用 RGB 的情况下仍显示 HSL 的原因。
关于名称来源
这些命名颜色并非随意取定。最初的 16 种来自早期 HTML 和基础 VGA 调色板，更大的一组随 SVG 和 X11 而来并被纳入 CSS。这段历史解释了一些古怪之处：aqua 和 cyan 同时存在，是因为两个社群给同一个值用了不同的词；gray/grey 拼写并存，则是为了同时照顾美式和英式用户。
其中有一个名字是刻意带有个人色彩的。rebeccapurple 于 2014 年随 CSS Color Level 4 加入，取代了非正式的 beccapurple 提议，用以纪念 Rebecca Meyer。它是 CSS 规范中的正式成员，所有现代浏览器都与旧名称一并接受它。
实用建议
- 对于手写的小型调色板，命名颜色比十六进制可读性更高；对于品牌配色，请保留十六进制，名称只作注释。
- 把精确的名称来回换算一次，确认浏览器实际使用的十六进制，因为好几个名称是别名。
- 命名颜色不保证对比度。用于文字前，请把结果交给对比度检查器。
- 当你需要的是感知上最接近而非 RGB 上最接近时，先转成 HSL 再手动比较亮度和色相，或改用专门的调色板工具。
相关工具
常见问题
当输入同时匹配两个名称（如 aqua 与 cyan）时返回哪一个？
输入值对应的两个名称共享同一个十六进制值，aqua 和 cyan 都是 #00ffff。查找按列表顺序扫描并保留第一个精确匹配，因此返回 aqua。fuchsia 与 magenta、gray 与 grey 这几组同义词也是同样规则。
距离分数具体代表什么？
它是输入颜色与匹配名称之间的加权 RGB 距离，保留两位小数。0 表示精确匹配。它没有官方阈值，但大致 10 以下肉眼很难分辨，50 以上通常看起来已经像另一种颜色。这个数字适合用来比较候选名称，而不是感知色差 delta-E。
为什么 #ff8800 匹配到 darkorange 而不是 orange？
换算后 #ff8800 与普通橙色 #ffa500 更接近，但与 darkorange #ff8c00 的加权距离更小：红、蓝两个通道完全相同，只有绿色通道相差 4，乘以权重 4 后距离为 16。因此数值上更近的 darkorange 胜出。
可以直接输入颜色名称（如 tomato）而不是十六进制吗？
可以。输入框同时接受带或不带 # 的三位或六位十六进制值，以及 CSS 颜色名称。输入 tomato 这类有效名称会返回该颜色且距离为 0，输入无法识别的名称则不返回结果。
HSL 输出和 RGB 有什么区别？
HSL 把颜色拆成色相（0–360 度）、饱和度和亮度三个独立维度。想调亮或调暗一个匹配到的颜色时，改亮度百分比通常比逐个编辑 RGB 通道更可预测，因此结果会同时显示 HSL，尽管距离计算本身在 RGB 中进行。
rebeccapurple 这个名字是怎么来的？
它在 2014 年随 CSS Color Level 4 加入，取代了非正式的 beccapurple 提议，用以纪念 Rebecca Meyer。它是 CSS 规范中的正式名称，所有现代浏览器都与旧名称一并支持。
由 HandyTools Hub 团队审校 · 最后更新