颜色名称查找器
发现任意颜色的 CSS 名称
如何使用
- 输入 HEX 颜色代码： 在输入框中输入任意 6 位十六进制颜色代码（带或不带 #）。您也可以使用颜色选择器直观地选择任意颜色。
- 查找最接近的命名颜色： 点击 查找名称 以发现最接近的 CSS 命名颜色。该工具使用感知加权距离算法找到最佳的人眼感知匹配。
- 查看完整颜色数据： 查看颜色名称、色块预览、HEX、RGB、HSL 值，以及显示与原始输入匹配程度的距离分数。
- 浏览所有命名颜色： 使用搜索栏浏览所有 148+ 种 CSS 命名颜色。按名称片段（如 “dark”）搜索以探索相关颜色系列。
功能特性
- 148+ 种 CSS 命名颜色：包含所有标准 CSS 命名颜色的完整数据库
- 感知加权距离：使用基于人类感知的权重（R3、G4、B*2）找到最接近的视觉匹配
- 可视颜色选择器：内置原生颜色选择器，可从完整光谱中直观选择任意颜色
- 即时颜色搜索：按名称片段搜索所有 148+ 种颜色，结果即时显示
- 多格式输出：每个结果同时显示 HEX、RGB 和 HSL 值以及颜色名称
使用场景
- CSS 开发： 识别与设计稿十六进制代码匹配的 CSS 命名颜色，使样式表更易读。
- 设计文档： 用人类可读的颜色名称记录您的设计系统，沟通更清晰。
- 颜色无障碍： 学习标准颜色名称以改善 WCAG 合规的颜色沟通。
- 颜色探索： 浏览 148+ 种 CSS 命名颜色的完整调色板，发现新的色阶和灵感。
相关工具
常见问题
CSS 命名颜色有多少种？
所有现代浏览器都识别 148 种标准 CSS 命名颜色。包括最初的 16 种 HTML4 颜色、130 种额外的 SVG/CSS3 颜色，以及在 CSS Color Level 4 中新增的 rebeccapurple。
颜色匹配算法是如何工作的？
该工具使用 RGB 空间中的加权欧几里得距离公式，权重为 R*3、G*4、B*2，以更好地近似人类颜色感知。由于人眼对绿色最敏感，绿色差异的权重最高。
它支持像 #fff 这样的 3 字符十六进制代码吗？
支持，该工具会自动将 3 字符十六进制简写（例如 #f80 变为 #ff8800）展开，然后再查找最接近的命名颜色匹配。您可以使用 3 位或 6 位十六进制代码。