CSS 颜色名称查找器，免费

使用方法

1. 输入颜色值：键入或粘贴 hex 代码（#3b82f6）、RGB 或 HSL 值，或点击选择器直观选取颜色。
2. 获取颜色名称：最接近的 CSS 命名颜色、Pantone 参考及可读名称将即时显示。
3. 探索相似色：查看一系列相似的命名颜色，为设计寻找最佳匹配或备选方案。

为什么使用颜色名称查找器？

在设计系统、无障碍文档或客户沟通中，给颜色一个可读名称远比 hex 代码更有用。「Cornflower Blue」传达得清楚；「#6495ed」则不然。此工具在机器值和人类名称之间搭建桥梁，帮助设计师记录调色板、解释颜色选择，并为 hex 值回溯标准 CSS 名称。

功能特性

• 最接近的 CSS 名称：为任意 hex 或 RGB 代码（在 148 种 CSS 颜色中）找到最接近的命名颜色。
• 多种输入格式：接受 hex（#rrggbb）、RGB、HSL 和 HSV。
• 颜色选择器：使用原生选择器进行可视化选取。
• 相似颜色：展示相似的命名颜色以便选择替代方案。
• 颜色元数据：显示色相、饱和度、亮度和感知亮度。

常见问题

工具如何找出最接近的名称？

工具使用 CIEDE2000 色差公式计算您的颜色与所有 CSS 命名颜色之间的感知距离，该公式与人类对颜色差异的感知高度一致。返回距离最小的匹配作为名称。

这些颜色与 CSS 关键字相同吗？

是的。工具包含 CSS 规范（CSS Color Module Level 4）中全部 148 种标准命名颜色，如「rebeccapurple」「dodgerblue」「tomato」。您可以在 CSS 中直接使用它们来替代 hex 值。

如果我的颜色没有精确名称怎么办？

大多数颜色没有精确的 CSS 名称。工具会返回感知上最接近的命名颜色，并显示差异（delta E），让您知道匹配的接近程度。

从X11到CSS Color Module Level 4:通往「rebeccapurple」的漫长之路

今天大多数人使用的CSS命名颜色继承自X窗口系统颜色列表(rgb.txt),该列表于1986年在麻省理工学院为X11图形环境组装。该列表在接下来的十年中有机地增长,充满了像「papayawhip」、「peachpuff」和「papayawhip」这样异想天开和晦涩的名字。当Mosaic(1993)然后Netscape Navigator(1994)在HTML中标准化颜色时,他们保留了X11名称的一个子集。CSS1(1996年12月)仅正式确定了16个命名颜色,与原始VGA调色板相匹配:aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow。HTML 4(1997)添加了「orange」作为第17个。CSS2.1(2011年6月)保留了17个。CSS3 Color Module(2014年6月,2018年定稿)添加了X11名称的其余部分,使总数达到147。在2014年6月,颜色「rebeccapurple」(#663399)被添加以纪念Eric Meyer因脑癌去世的女儿Rebecca;她说紫色是她最喜欢的颜色。它被添加到CSS Color Module Level 4,使总数达到148。十六进制值#663399是唯一一个为纪念特定人物而添加的CSS命名颜色。

超越命名颜色的CSS颜色:oklch、lab、color()

命名颜色仍然只覆盖现代显示器可以显示的一角。CSS Color Module Level 4(候选推荐,当前草案)引入了更广泛的颜色语法。lab()和lch()允许你在CIE Lab和LCh中指定颜色,这些是感知上均匀的颜色空间。oklab()和oklch()(Björn Ottosson,2020)是改进版本,可以更好地处理明亮的饱和颜色;oklch(70% 0.15 240)是鲜艳的天蓝色。color(display-p3 1 0.5 0)提供了对现代iPhone、iPad和Mac可以显示的更广泛的P3颜色色域的访问,比命名颜色限制的sRGB饱和度高约25%。相对颜色语法(oklch(from blue calc(l - 10%) c h))允许你从一种颜色派生另一种颜色。到2024年,所有四个颜色函数的浏览器支持达到>90%。对于2025年代的设计,使用命名颜色进行原型设计,然后移植到oklch()用于跨颜色色域光谱工作的生产调色板。

「最接近的颜色」是如何实际计算的

两种颜色之间的「距离」不是一个单一的概念。不同的公式给出不同的答案,它们各自适合不同的用例。

• sRGB中的欧几里得距离。 sqrt((r₁−r₂)² + (g₁−g₂)² + (b₁−b₂)²)。快速,但不符合人类感知,看起来相同的两种颜色在RGB中可能相距很远,看起来差异很大的两种颜色可能很接近。避免用于「最接近名称」查询。
• Delta E CIE76。相同的欧几里得公式,但在CIE Lab空间中,大致感知上均匀。大致,而非完全。良好的初步近似;在受控条件下,ΔE ≤ 2.3被认为是「刚可察觉的」。
• Delta E CIEDE2000。当前的行业标准,由CIE于2001年发布。添加了对亮度、色度和色相旋转的修正,更好地匹配人类实际感知颜色差异的方式。ΔE2000 ≤ 1对大多数观察者来说是不可察觉的;≤ 5看起来像相似的颜色。此工具使用CIEDE2000进行「最接近匹配」。
• OKLab中的欧几里得距离。Björn Ottosson的2020年颜色空间设计使得普通欧几里得距离紧密近似ΔE2000。比ΔE2000快,感知质量相似。在设计工具中越来越成为默认。

命名颜色实际有帮助的地方

• 设计系统文档。「主要操作:Royal Blue(#4169e1)」在设计规范和品牌指南中比单纯的十六进制值更易读。
• 客户沟通。「让我们使用coral和steel blue」在会议中起作用;「#ff7f50和#4682b4」不起作用。在你承诺确切值之前,名称将对话锚定。
• 无障碍审计。在记录哪些颜色未能通过对背景的WCAG对比时,人类名称使审计报告对非开发人员可用。
• 遗留代码翻译。旧的CSS文件经常使用命名颜色。在迁移到设计令牌或自定义调色板时,你需要知道「lightseagreen」和「mediumaquamarine」映射到哪些确切颜色。
• 快速原型。键入background: tomato比从色轮中选择十六进制更快。命名颜色是在最终颜色被选择之前为草图布局提供的出奇好的默认值。
• 命名品牌颜色。如果你的品牌红色接近crimson(#dc143c),内部称之为「Brand Crimson」比「Red 8」更易记。
• 样本匹配。设计师粘贴从照片或截图中采样的颜色,并询问「这个颜色接近什么?」以从现实世界参考开始一个调色板。

CSS命名颜色的错误和惊喜

• gray vs grey。CSS接受两种拼写,但X11列表最初只有「gray」。「grey」后来被添加。lightgray和lightgrey是别名,颜色相同。在代码库中坚持一种拼写。
• 「dark」变体并不总是比基础颜色更暗。 darkgray(#a9a9a9)实际上比gray(#808080)更浅,这是X11列表的一个著名历史怪癖,CSS继承了它。darkgrey也有同样的陷阱。
• aqua和cyan是同一种颜色。两者都是#00ffff。CSS将两者作为遗留别名包含在内。fuchsia和magenta也是相同的(#ff00ff)。
• 「orange」是CSS命名颜色,但「pink」变体不同。 orange = #ffa500。但没有单一的「pink」,CSS有pink、lightpink、hotpink、deeppink、palevioletred,都明显不同。
• 「最接近的颜色」取决于你的大脑认为颜色是什么。两个人对同一个油漆芯片进行采样可能会选择不同的名称。CIEDE2000捕捉平均感知,而不是你的。始终视觉检查样本,而不是只信任距离数字。
• 命名颜色都是sRGB。CSS命名颜色被定义为8位sRGB三元组。在P3或BT.2020显示器上,鲜艳的颜色如tomato和fuchsia可能看起来比color(display-p3 ...)中指定的相同色调更暗淡。对于原型,没问题;对于现代硬件上的生产,移植到宽色域语法。
• 单独的命名颜色无法通过无障碍检查。 yellow在white上不可读;red在black上是边缘的。颜色的命名状态对对比度没有任何说明。始终将颜色选择与WCAG对比度检查配对。

更多常见问题

实际上是谁选择了像「papayawhip」和「peachpuff」这样的名字?

没有一个单一的人;X11 rgb.txt文件在1980年代后期通过麻省理工学院和其他Unix供应商的多位贡献者增长。许多名字来自Sinclair Paints和当时的其他油漆目录。命名是有意非正式和不一致的,贡献者根据他们桌上或窗外的物体命名颜色。没有中央委员会。当CSS3在2014年整体采用X11列表时,所有的怪癖都伴随而来。

我应该在生产中使用rebeccapurple吗?

自2014年以来浏览器支持是通用的,所以它在任何地方都可以工作。它完全等同于#663399。使用在你的代码中读起来更好的名字;「rebeccapurple」是每个使用它的页面上一个小但可见的致敬。

CIEDE2000和更简单的ΔE公式之间有什么区别?

ΔE76(CIE Lab中的欧几里得距离)很快,给出合理的答案,但低估饱和颜色的差异,高估暗色的差异。CIEDE2000添加了五个修正项(对亮度、色度、色相旋转和两个交叉项),这些项符合关于人们如何实际感知颜色差异的经验数据。修正是显著的;同一对颜色可以给出ΔE76 = 4和ΔE2000 = 2(感知判断截然不同)。对于「这种颜色是否足够接近那种」,使用ΔE2000。对于速度很重要的批处理,OKLab欧几里得距离是快速近似。

我可以添加自己的自定义颜色名称吗?

不能作为CSS关键字,命名颜色列表由规范固定。但CSS自定义属性(变量)为你提供了相同的人体工程学::root { --brand-coral: #ff7f50; }然后color: var(--brand-coral)。设计令牌本质上是这个想法的正式化,现代设计系统普遍使用它们。

我的颜色数据会被发送到任何地方吗?

不会。所有颜色转换和距离计算都在你的浏览器中运行。在DevTools中打开网络选项卡并选择一个颜色,你将看到零出站请求。对未发布的品牌颜色或任何内部调色板工作都是安全的。