跳转到正文

颜色名称查找器

查找任意颜色值最接近的命名 CSS 颜色。粘贴最多 100 个任意 CSS 格式的颜色,即可查看每种颜色在 148 个 CSS 命名颜色中按 CIEDE2000 色差排序后最接近的结果,包括名称、十六进制代码、Delta E 值和匹配评分。每种颜色最多显示 10 个匹配项。适合为设计令牌命名、在文档中描述颜色,以及快速查找关键词。

重置

常见问题

会搜索哪些颜色名称?

CSS Color 4 中的 148 种命名颜色,从 aliceblue 到 yellowgreen,包括 rebeccapurple。具有相同数值的名称(如 aqua 和 cyan、fuchsia 和 magenta,以及 gray 和 grey 这两种拼写)会显示在同一行,因此共有 139 种不同颜色。不包括 transparent 和系统颜色。

如何衡量最接近的名称?

使用 culori 库在 CIELAB 中计算的 CIEDE2000 色差 Delta E 2000。这是衡量普通观察者眼中两种颜色差异的行业标准;数值越小,匹配越接近。

匹配评级是什么意思?

“完全一致”表示命名颜色具有相同的十六进制代码。“非常接近”表示 Delta E 小于 2,难以区分;“相似”表示小于 5,并排比较时可以察觉差异;“较远”表示为 5 或更高,此时名称仅描述大致的颜色类别。

可以获得多少个匹配结果?

每种颜色可获得 1 到 10 个结果,默认 3 个,按从最接近到最远排序。更多结果会有所帮助,例如最接近的名称亮度合适但色相不对,或反过来的情况。

如何输入颜色?

每行输入一种颜色;也可以在同一行输入多种颜色,并用逗号或分号分隔;rgb() 或 hsl() 内部的逗号不会用于分隔。支持带 # 或不带 # 的十六进制代码、CSS 颜色名称、rgb()、hsl()、hwb()、lab()、lch()、oklab()、oklch()、color() 和 cmyk();每次最多处理 100 种颜色。

透明颜色会怎样处理?

命名颜色是不透明的,因此会忽略 alpha,并将颜色视为完全不透明进行比较。HEX 列显示参与比较的 6 位代码。

广色域颜色会怎样处理?

sRGB 之外的颜色(例如鲜艳的 Display P3 或 OKLCH 值)会先使用 CSS Color 4 算法映射到 sRGB,因为所有 CSS 命名颜色都是 sRGB 颜色。随后,HEX 列会显示映射后的值,名称将根据此值进行比较。

可以用名称代替我的十六进制代码吗?

只有在完全匹配时才可以;否则命名颜色看起来会有所不同。接近的名称仍可作为设计令牌或文档中的易读提示,例如一种接近 steelblue 的蓝色。

为什么只有 CSS 个名称,而不是更多?

CSS 名称是所有浏览器都能识别、且可以直接输入样式表的名称。更大的命名列表因供应商而异,而且通常需要授权;而这些 148 个名称由 CSS 标准定义。

为什么 Delta E 更高的匹配对我来说看起来更接近?

Delta E 2000 模拟标准观看条件下的普通观察者。显示器及其校准、周围的颜色和个人色觉都会影响你认为哪种颜色最接近,因此应将排序视为有力参考,而非绝对结论。

关于 OneClick Pro

OneClick Pro 是一个免费的工具集合,包含超过 150 种网络工具,助你处理日常工作:转换图像和单位、格式化和验证代码、检查域名和 SEO,以及处理文本、日期和数字。所有工具均可免注册、免订阅使用;你输入的内容仅用于计算结果,绝不会被存储。你可以将它用作处理临时任务的快捷工具箱,也可以收藏每天都会用到的工具。