什么是颜色名称查找器？
输入任意 HEX、RGB 或 HSL 颜色值，即可从包含 1,500 多个名称的数据库中找到最接近的命名颜色。它把一串颜色代码变成你能直接念出来的名字，写设计文档或跟同事讨论配色时很方便。
工具使用的是开源 color-name-list 色名库,Figma 插件和 Tailwind 扩展也常引用同一份数据。可以输入十六进制值、切到 RGB 或 HSL 直接填通道,或者用取色器挑色块。工具会按 RGB 欧氏距离算出最接近的命名颜色,并以 HEX、RGB、HSL、HSV 和 CMYK 一并显示,再额外给出两个备选名字、相似度分数和 WCAG 对比度检查,方便判断是「几乎一致」还是「只是大致接近」。
使用方法
- 第一步——输入 HEX 格式的颜色值（如 #3B82F6），切到 RGB 或 HSL 直接填通道数字，或用取色器可视化选择颜色。
- 第二步——工具立即查找最接近的命名颜色，并显示精确匹配距离。
- 第三步——查看颜色名称、其精确 HEX 值，以及输入颜色与命名颜色之间的可视化对比。
何时使用
- 在写品牌规范或组件库之前,先给一个颜色取个标准名字。
- 把截图里的颜色翻译成开发者可以按名字搜索的标准色。
- 把油漆或布料色卡对照到常见的网页安全色,看看叫什么。
结果
开发者输入 #4A90D9，发现最接近的颜色是"钢蓝色"(#4682B4)，相似度为 96.2%。
常见问题
- 这些色名是从哪里来的?
- 数据来自开源项目 color-name-list,大约 1500 个名字,汇总了 xkcd 色彩调查、各大油漆品牌色卡和 CSS 规范命名。很多设计工具也在用这份数据,所以看起来会比较眼熟。
- 为什么有的颜色相似度永远到不了 100%?
- 只有完全等于色名表里某一条的颜色才能得到 100%。其他情况都是按 RGB 距离找最接近的一个。95% 以上肉眼基本看不出差别;低于 85% 就说明命名颜色和你输入的有明显出入。
- 它用的是 RGB 距离还是感知距离?
- 用的是 RGB 欧氏距离。算起来快,对大多数网页色都够用。但是高饱和的红色和绿色,人眼比 RGB 模型更敏感,这种情况下可能会挑出一个稍微偏色的名字。
- 能直接输入 HSL、RGB 或 HEX 吗?
- 可以——三种都内置了。把输入选项卡切到 HEX、RGB 或 HSL 填值即可,也能直接用取色器选。结果卡片还会同时给出匹配色的 HSL、HSV 和 CMYK,需要哪种格式直接复制就行。
- 为什么两个差很多的 HEX 值会匹配到同一个名字?
- 色名表在某些区域比较稀疏,比如灰调中性色和浅粉色。当两个输入都离任何已命名色都很远的时候,最近邻就会重复。看相似度分数就能看出差距有多大。