# CSS 颜色名称解析器

把任意十六进制颜色解析成最接近的 CSS 命名色，给出真实 CIEDE2000 ΔE 距离，并浏览它所属的整个色族。

> 标准页面: https://elysiatools.com/zh/tools/css-color-name-resolver

- **分类:** Design

- **关键词:** css 颜色名, 颜色命名, 最近颜色, delta e, 色族查询, hex 转颜色名

## 概述

基于 CSS Color Module Level 4 完整关键字表（148 个关键字、139 个不同颜色，gray/grey、aqua/cyan、fuchsia/magenta 别名合并展示）。距离采用 CIEDE2000 公式（Sharma/Wu/Dalal 2005 版本，含 180° 色相环绕特例），经 sRGB → 线性 RGB → XYZ(D65) → CIELab 计算；经典 name-that-color 网站用的纯 RGB 欧氏距离会把深蓝、近黑排名排得很差——切换度量即可看到排名变化。色族视图用 HSL 阈值把 139 色分为 12 个设计师色族（白/灰/黑/棕/红/橙/黄/绿/青/蓝/紫/粉品红），“CSS 里有哪些棕色”一次查询即得。ΔE 经验值：<1 无法分辨，1–2 勉强可辨，2–10 一眼可见，≥50 相反色。

## 输入项

- **颜色（十六进制或 CSS 名称）** (text): #3366ff or cornflowerblue
- **距离度量** (select)
- **结果模式** (select)
- **显示数量** (number)

## 适用场景

- 需要为十六进制设计色值（如 #8842d4）寻找语义化的 CSS 关键字或设计令牌命名时。
- 评估自定义颜色与标准 Web 安全命名色之间的视觉色差（ΔE）并筛选替代色时。
- 希望按色相与饱和度快速浏览某一色族（如 CSS 中包含的所有棕色或紫色）时。

## 工作原理

- 输入十六进制颜色代码（如 #f4a460）或已有的 CSS 颜色名称（如 cornflowerblue）。
- 选择计算色差的距离度量方法（CIEDE2000、CIE94、CIE76 或 RGB 欧氏距离）并指定结果展示模式与返回数量。
- 系统将 sRGB 转换为线性 RGB、XYZ 及 CIELab 色彩空间，计算与 139 种标准 CSS 颜色的色差数值。
- 即时输出精确匹配或按 ΔE 升序排列的候选命名色列表，或展示所属色族的完整颜色卡片。

## 使用案例

- 前端工程师在编写样式或重构代码时，将随意指定的 Hex 色值替换为标准 CSS 颜色关键字。
- UI/UX 设计师在建立设计系统令牌（Design Tokens）时，为品牌色挑选贴切的语义化名称与备用色。
- 色彩研究人员与设计人员对比不同色差公式（CIEDE2000 与 RGB）在色彩接近度感知上的排序差异。

## 常见问题

### 什么是 ΔE（Delta E）色差值？

ΔE 表示人眼感知两种色彩差异的数值度量，通常 <1 无法分辨，1–2 勉强可辨，2–10 一眼可见，≥50 为相反色。

### 为什么推荐使用 CIEDE2000 而不是 RGB 欧氏距离？

CIEDE2000 考虑了人眼对不同色相与饱和度的非线性感知灵敏度，能避免 RGB 距离在深蓝与近中性色上的排序失真。

### 为什么 148 个 CSS 关键字只对应 139 种颜色？

CSS 标准中包含别名，如 gray/grey、aqua/cyan、fuchsia/magenta 指向完全相同的颜色值，工具已自动合并展示。

### “色族浏览”模式的作用是什么？

色族模式通过 HSL 阈值将所有 CSS 颜色分为白、灰、黑、棕、红等 12 个色族，便于快速查看同类所有命名色及距离。

### 工具支持哪些输入格式？

支持标准的 Hex 格式颜色代码（如 #f4a460）以及标准 CSS 颜色名称（如 sandybrown）。

## 相关工具

- [CMYK 颜色转换器](https://elysiatools.com/zh/tools/cmyk-converter): 在 HEX、RGB、HSL 和 CMYK 之间统一转换颜色。
- [棕褐色调器](https://elysiatools.com/zh/tools/color-sepia-toner): 为颜色应用棕褐色调效果，支持经典、温暖、冷调和自定义棕褐色风格
- [色彩空间转换器](https://elysiatools.com/zh/tools/color-space-converter): 在 HEX、RGB、HSL、CIELAB 与 Display-P3 之间转换颜色，提供 CSS 输出与色域检查。
- [分离互补色工具](https://elysiatools.com/zh/tools/color-split-complement): 生成分离互补色配色方案，使用基础色和其互补色两侧的相邻颜色创造和谐的对比效果
- [OKLCH 色彩转换器](https://elysiatools.com/zh/tools/oklch-color-converter): 使用 CSS Color 4 算法在 HEX、RGB、HSL、OKLCH、Display-P3 之间双向转换，提供感知亮度/彩度/色相读数、sRGB 与 Display-P3 色域检查及超域裁剪建议
- [Adobe RGB转CMYK转换器](https://elysiatools.com/zh/tools/adobe-rgb-to-cmyk-converter): 将Adobe RGB颜色值转换为CMYK格式用于印刷，支持alpha通道处理
- [Adobe RGB转HEX转换器](https://elysiatools.com/zh/tools/adobe-rgb-to-hex-converter): 将Adobe RGB颜色值转换为HEX格式用于网页设计
- [Adobe RGB转HSL转换器](https://elysiatools.com/zh/tools/adobe-rgb-to-hsl-converter): 将Adobe RGB颜色值转换为HSL格式用于设计工作

## 示例

- [颜色代码示例](https://elysiatools.com/zh/samples/color-code): 用于验证测试的各种格式颜色代码集合（Hex、RGB、HSL、命名颜色）
- [Web Python 图像处理示例](https://elysiatools.com/zh/samples/web-image-processing-python): Web Python 图像处理示例，使用 PIL/Pillow 包括读取、保存、缩放和格式转换
- [Bulma CSS 框架示例](https://elysiatools.com/zh/samples/bulma): Bulma CSS框架示例，包括列、组件、表单控件、布局系统和现代化基于CSS的设计模式
- [CSS选择器示例](https://elysiatools.com/zh/samples/css-selectors): 用于提取和分析测试的CSS选择器示例集合

## 相关内容

- [面向网页与印刷的色彩空间转换工具](https://elysiatools.com/zh/hubs/design-convert): 围绕网页到印刷的色彩空间转换整理的一组工具。
- [CSS 效果、配色板与设计 Token 生成工具](https://elysiatools.com/zh/hubs/design-generate): 围绕CSS 视觉效果、配色构建与设计 Token 生成整理的一组工具。
- [网页无障碍审查与可读配色工具](https://elysiatools.com/zh/hubs/web-accessibility-audits): 在一个专题中检查 WCAG 问题、读屏顺序、低对比度区域、色觉缺陷风险和可读配色选择，适合网页与 UI 无障碍工作流。
- [颜色设计与颜色空间转换工具](https://elysiatools.com/zh/hubs/color-design-tools): 在一个专题里比较颜色转换器、调色板生成器、和谐色工具、无障碍检查器和颜色调整工具，适合设计师和开发者。