颜色名称查找器
查找任意颜色值最接近的命名 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 模拟标准观看条件下的普通观察者。显示器及其校准、周围的颜色和个人色觉都会影响你认为哪种颜色最接近,因此应将排序视为有力参考,而非绝对结论。