颜色转名称

什么是 CSS 颜色名称？

CSS 颜色名称是浏览器映射到固定 RGB 值的人类可读关键字。CSS 定义了约 140 种命名颜色——从 red、blue、white 等 17 种基本 HTML 颜色，到扩展的 X11 列表，新增了 skyblue、tomato、rebeccapurple 等。每个名称都对应一个精确的 RGB 三元组，因此 skyblue 始终表示 rgb(135, 206, 235)。

命名颜色很方便，因为它们比 HEX 代码更易记忆和阅读，并且可以直接在 CSS、HTML 和 SVG 中使用，无需引号或函数。设计师在讨论调色板时也将它们作为共同词汇——说"用 tomato 代替 red"比引用两个 HEX 代码更清晰。

如何找到最接近的匹配

因为只有约 140 种命名颜色，但 HEX 颜色超过 1670 万种，所以你拾取的大多数颜色都没有精确的命名匹配。本工具通过计算你的颜色与每种命名颜色在 RGB 空间中的欧几里得距离，返回距离最小的那个：

距离 = √((R₁ − R₂)² + (G₁ − G₂)² + (B₁ − B₂)²)

结果是视觉上最接近你输入的命名颜色。对于大多数拾取，匹配效果极佳；对于位于两种命名颜色之间的颜色，结果可能与其他工具略有不同，因为简单的 RGB 距离忽略了人眼感知差异的方式（它对所有通道同等加权，而不考虑亮度敏感度）。

何时使用颜色名称

颜色名称在以下实际工作流中表现出色：

• 快速原型。 在草拟 UI 时，拼写 coral 比查找 #FF7F50 更快。
• 可读代码。 color: tomato; 比原始 HEX 值更清晰地传达意图给下一位开发者。
• 设计讨论。 为颜色命名（"这个品牌蓝接近 dodgerblue"）创建了共同词汇。
• 无障碍审查。 了解最接近的命名颜色有助于推理亮度和对比度。
• 教育。 学习 CSS 的学生可以在转向 HEX 和 HSL 之前使用命名颜色。

对于生产环境的品牌调色板，你仍应发布精确的 HEX 代码——名称是便利层，不能替代精确令牌。

命名颜色与 HEX 和 RGB 的区别

命名颜色、HEX 和 RGB 都描述相同的底层 sRGB 颜色。名称只是某个固定 RGB 三元组的别名：skyblue、#87CEEB 和 rgb(135, 206, 235) 产生相同的像素。区别在于便利性——名称可读，HEX 紧凑且通用，RGB 暴露通道以便程序化操作。

HEX 是跨工具一致性最安全的选择，因为每个浏览器、设计应用和图像编辑器都支持它，且没有歧义。命名颜色最适合快速草稿和文档，而 RGB（及其 HSL 表亲）最适合需要计算或动画颜色值时使用。

如何查找颜色名称

使用本工具查找最接近的颜色名称只需一秒，完全在浏览器内完成。无需上传、无需注册、无需安装。请按以下步骤操作：

1. 拾取颜色。 使用颜色选择器，或在 RGB 输入框中输入红、绿、蓝值（0–255）。
2. 查看结果。 最接近的 CSS 颜色名称及其 HEX 值实时更新，并显示匹配颜色的色块。
3. 复制名称。 点击"复制名称"复制关键字，然后粘贴到你的 CSS 或设计工具中。

每一步都使用 JavaScript 在浏览器中本地运行，因此你的颜色选择永远不会离开浏览器。这使得工具完全私密且即时。