CSS颜色名称查找器
查找任意HEX或RGB值最接近的CSS命名颜色
加载示例
颜色（HEX）
最接近的CSS命名颜色
MediumSlateBlue最接近
#7B68EEΔ 24
RoyalBlue
#4169E1Δ 38
SlateBlue
#6A5ACDΔ 39
CornflowerBlue
#6495EDΔ 47
MediumPurple
#9370DBΔ 54
Δ = 颜色距离（越小越接近）
什么是CSS颜色名称？
CSS定义了148个命名颜色，浏览器通过关键字而非数字代码来识别它们。你可以在样式表中写Tomato，而不是#ff6347；写SlateBlue，而不是#6a5acd。这些名称在CSS Color Level 3（2011年）和Level 4（2022年）中得到标准化，建立在CSS 2.1原始17种颜色以及从早期Unix窗口系统继承的140个X11颜色名称的基础之上。
颜色名称查找器接受任意hex或RGB值，并找到与之最接近的CSS命名颜色。匹配算法计算RGB空间中两种颜色之间的距离，通常采用欧几里得距离：sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2)。与输入距离最小的命名颜色即为结果。若距离为零，则输入与该颜色名称完全匹配。
当你希望CSS具有可读性和自说明性时，这一点尤为重要。background-color: Tomato比background-color: #ff6347更能传达意图。在设计评审、无障碍审计或文档编写中，用颜色名称来引用颜色也更加便利——与其说“那个偏橙的红色”，不如直接说“Tomato”。
为什么使用这个颜色名称查找器？
手动查找最近的命名颜色意味着在148条参考表中逐一浏览并对比hex值。本工具自动完成距离计算，并返回5个最接近的匹配结果，附带精确的hex代码和距离分数。
🔍
按名称识别任意颜色
粘贴来自设计文件、取色器或截图的hex代码，即可立即获取最接近的CSS命名颜色。工具按距离排序返回5个匹配结果，供你选择最合适的。
🔒
隐私优先的处理方式
所有颜色匹配均在浏览器中本地运行，颜色值不会发送至任何服务器。页面加载后，工具可离线使用。
⚡
即时返回结果
距离计算在每次按键时实时触发。修改hex输入中的任意字符，排序结果立即更新，无需等待网络往返。
📋
复制颜色名称和hex代码
点击任意结果即可将颜色名称或hex值复制到剪贴板，可直接粘贴到CSS、Sass变量、Tailwind配置或设计工具的字段中。
颜色名称查找器的使用场景
编写可读的CSS
前端开发者将hex字面量替换为命名颜色，可使样式表在代码审查时更易阅读。命名颜色无需颜色预览插件便能传达设计意图。
API响应标注
构建颜色相关API的后端工程师可在hex代码旁同时返回人类可读的标签。找到最近的CSS颜色名称，为用户提供熟悉的参考点，无需维护自定义名称字典。
无障碍文档
负责记录颜色对比度问题的QA工程师可以在缺陷报告中按名称引用颜色。“DarkSlateGray背景上的Crimson文字未通过AA对比度要求”比引用hex值对更加清晰。
数据可视化图例
数据工程师使用命名颜色标注图表系列，生成的图例无需色块即可阅读。在打印或黑白场景中，“CornflowerBlue”比“#6495ed”更具可读性。
设计交付
当设计师从Figma或Sketch分享hex颜色值时，开发者可查找最接近的CSS名称，并在Slack或拉取请求评论中按名称进行讨论。
学习CSS颜色
学习CSS的学生可以输入任意hex值，发现附近存在哪些命名颜色。浏览距离结果有助于熟悉148个内置颜色关键字。
按分组的CSS命名颜色参考
CSS Color Level 4规范定义了148个命名颜色关键字。下表按色相分组整理，包含每组的数量和部分示例名称。表中所有名称均为有效的CSS颜色关键字，在所有现代浏览器中均可使用。
| 颜色分组 | 数量 | 示例名称 |
|---|---|---|
| Red / Pink | 14 | IndianRed, LightCoral, Salmon, DarkSalmon, Crimson, Red, +8 more |
| Orange | 5 | Coral, Tomato, OrangeRed, DarkOrange, Orange |
| Yellow | 10 | Gold, Yellow, LightYellow, LemonChiffon, PapayaWhip, Moccasin, +4 more |
| Green | 19 | GreenYellow, Chartreuse, LawnGreen, Lime, LimeGreen, SpringGreen, +13 more |
| Blue / Cyan | 24 | Aqua, Cyan, LightCyan, PaleTurquoise, Aquamarine, Turquoise, +18 more |
| Purple | 19 | Lavender, Thistle, Plum, Violet, Orchid, Fuchsia, +13 more |
| Brown | 17 | Cornsilk, BlanchedAlmond, Bisque, NavajoWhite, Wheat, BurlyWood, +11 more |
| Gray / White | 27 | White, Snow, HoneyDew, MintCream, Azure, AliceBlue, +21 more |
颜色距离：RGB欧几里得距离与感知距离
衡量颜色距离的方法会影响哪个命名颜色被报告为最近匹配。目前有两种方式，对同一输入可能给出不同结果。
RGB欧几里得距离
将R、G、B视为三维空间中的坐标轴，计算直线距离：sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2)。计算简单、速度快，本工具即采用此方法。对大多数实际场景效果良好，但在绿色到蓝色的过渡范围内可能与人眼感知不符，因为人眼对绿色比蓝色更敏感。
CIEDE2000（Delta E）
由国际照明委员会（CIE）定义的感知距离公式。它先将颜色转换到CIELAB色彩空间，再对明度、色度和色相进行修正，以更贴近人眼感知。对边缘情况更准确，但计算复杂度显著更高。适用于工业色彩匹配；用于查找最近CSS关键字则过于复杂。
代码示例
通过编程方式，使用RGB空间中的欧几里得距离查找最近的CSS命名颜色。以下每个示例接受一个hex字符串，并从CSS规范中返回最接近的颜色名称。
JavaScript
// Euclidean distance in RGB space
function nearestCssColor(hex) {
const r = parseInt(hex.slice(1, 3), 16)
const g = parseInt(hex.slice(3, 5), 16)
const b = parseInt(hex.slice(5, 7), 16)
let bestName = ''
let bestDist = Infinity
for (const [name, value] of Object.entries(cssColors)) {
const r2 = parseInt(value.slice(1, 3), 16)
const g2 = parseInt(value.slice(3, 5), 16)
const b2 = parseInt(value.slice(5, 7), 16)
const dist = Math.sqrt((r - r2) ** 2 + (g - g2) ** 2 + (b - b2) ** 2)
if (dist < bestDist) { bestDist = dist; bestName = name }
}
return bestName
}
nearestCssColor('#6366f1') // → "SlateBlue"
nearestCssColor('#1e293b') // → "DarkSlateGray"Python
import math
CSS_COLORS = {
"Crimson": (220, 20, 60), "SlateBlue": (106, 90, 205),
"Tomato": (255, 99, 71), "Teal": (0, 128, 128),
# ... full list of 148 entries
}
def hex_to_rgb(hex_str: str) -> tuple[int, int, int]:
h = hex_str.lstrip("#")
return (int(h[0:2], 16), int(h[2:4], 16), int(h[4:6], 16))
def nearest_css_color(hex_str: str) -> str:
r, g, b = hex_to_rgb(hex_str)
best = min(
CSS_COLORS.items(),
key=lambda item: math.dist((r, g, b), item[1])
)
return best[0]
print(nearest_css_color("#6366f1")) # → SlateBlue
print(nearest_css_color("#ff6347")) # → Tomato (exact match, distance 0)Go
package main
import (
"fmt"
"math"
"strconv"
)
type CSSColor struct {
Name string
R, G, B int
}
var colors = []CSSColor{
{"Crimson", 220, 20, 60},
{"SlateBlue", 106, 90, 205},
{"Tomato", 255, 99, 71},
// ... full list
}
func hexToRGB(hex string) (int, int, int) {
r, _ := strconv.ParseInt(hex[1:3], 16, 64)
g, _ := strconv.ParseInt(hex[3:5], 16, 64)
b, _ := strconv.ParseInt(hex[5:7], 16, 64)
return int(r), int(g), int(b)
}
func nearest(hex string) string {
r, g, b := hexToRGB(hex)
best := ""
bestDist := math.MaxFloat64
for _, c := range colors {
d := math.Sqrt(float64((r-c.R)*(r-c.R) + (g-c.G)*(g-c.G) + (b-c.B)*(b-c.B)))
if d < bestDist {
bestDist = d
best = c.Name
}
}
return best
}
func main() {
fmt.Println(nearest("#6366f1")) // → SlateBlue
}常见问题
CSS支持多少个命名颜色？
CSS Color Level 4定义了148个命名颜色关键字。其中包括CSS 2.1原始的17种颜色（如black、white、red、blue）、CSS 3新增的140个X11颜色名称，以及CSS 4为纪念CSS作者Eric Meyer之女而添加的RebeccaPurple关键字。所有148个名称不区分大小写，在每个现代浏览器中均可使用。
颜色名称查找器与颜色转换器有什么区别？
颜色转换器在格式之间转换颜色：hex转RGB、HSL转hex、RGB转CMYK。颜色名称查找器的作用不同：它在148个CSS命名颜色中搜索，返回与你的输入距离最小的那个。输出是一个关键字（如Tomato或SlateBlue），而非数字表示。
RGB欧几里得距离在颜色匹配中有多准确？
RGB欧几里得距离对大多数颜色查找都能给出正确结果。在绿蓝色范围内可能出现意外匹配，因为人眼对绿色的感知比蓝色更强烈，而RGB模型对三个通道一视同仁。对于查找最近CSS关键字这类Web开发任务，这一差异在实践中很少影响结果。
能在JavaScript中使用CSS颜色名称吗？
可以。CSS.supports() API、canvas 2D上下文以及SVG的fill/stroke属性均接受命名颜色。你可以直接设置element.style.backgroundColor = 'Tomato'。命名颜色也适用于CSS自定义属性和getComputedStyle()方法，不过浏览器无论你如何设置，都会以rgb()格式返回计算后的值。
为什么有些颜色名称如此奇特，比如PapayaWhip或BlanchedAlmond？
这些名称来自X11颜色数据库，该数据库于1980年代为Unix工作站上的X Window System创建。名称由原作者自行命名，没有统一的命名规范。CSS在Level 3中采用X11颜色时，为向后兼容而保留了原有名称。结果是各类名称的混合：描述性名称（DarkRed）、食物相关名称（PapayaWhip、Chocolate、Salmon）以及地理名称（Peru、Sienna）。
RebeccaPurple是官方CSS颜色吗？
是的。RebeccaPurple（#663399）于2014年被加入CSS Color Level 4规范。它由CSS工作组提出，以纪念CSS作者Eric Meyer年仅六岁便因脑癌去世的女儿Rebecca Meyer。该颜色在2014年后发布的所有浏览器中均受支持。
如果输入的hex与两个命名颜色距离相同，会发生什么？
当两个命名颜色与输入的欧几里得距离完全相同时，结果取决于遍历顺序。本工具按字母顺序遍历CSS颜色列表，并保留找到的第一个匹配项。实际上，完全相同的距离非常罕见，因为148个命名颜色在RGB空间中分布不均匀。大多数hex输入都有唯一的最近匹配。