CSS 命名颜色参考 浏览所有 140+ 个 CSS 命名颜色，支持搜索、按色调或亮度排序。

What Is CSS 命名颜色参考?

CSS 命名颜色参考是一个全面、视觉化的目录，包含了 W3C 规范中定义的所有 140+ 个 CSS 命名颜色。与简单的查询工具不同，这个参考资料提供多种排序选项--字母顺序、按色调（将相似的颜色分组在一起）和亮度（从最浅到最深）--使其成为一个功能强大的颜色探索和发现工具。每个颜色条目显示了可视化的样本、语义名称和 HEX 代码。搜索函数根据部分名称匹配进行筛选，因此输入 "blue" 会显示所有与蓝色相关的颜色（aliceblue、blue、cadetblue、cornflowerblue 等）。这个参考资料对于开发人员来说是必不可少的，他们可以快速找到命名颜色，探索可用的 CSS 颜色名称，或为原型设计选择语义上有意义的颜色名称。

Why Use CSS 命名颜色参考?

• 完整的140+个CSS命名颜色目录
• 三个排序选项：名称、色相和明度
• 通过部分名称匹配进行搜索筛选
• 视觉样本用于即时比较颜色
• 每个HEX代码的一键复制

Common Use Cases

颜色发现

浏览按色相排序的命名颜色，以发现您不知道CSS中存在的新颜色。

快速参考

找到任何CSS命名颜色的确切HEX值。

原型设计

为快速原型设计选择语义化的颜色名称，而无需查找十六进制代码。

教育

学习CSS命名颜色的全部范围及其视觉外观。

Technical Guide

CSS 命名颜色是在 CSS Color Module Level 4 规范中定义的关键字。共有 148 个命名颜色（包括 aqua/cyan 等别名）。每个名称都映射到特定的 sRGB 颜色。按色调排序使用从每个颜色的十六进制值中提取的 HSL 色调角度 (0-360°)，将红、橙、黄、绿、蓝和紫色分组在一起。亮度排序使用 HSL 亮度值 (0-100%)。无彩色（黑、白、灰）具有 0° 的色调，但饱和度非常低，因此它们聚集在色调排序的一端。由于继承了 X11 颜色系统，一些命名不一致--特别是，"darkgray" (A9A9A9) 比 "gray" (808080) 浅。

Tips & Best Practices

• 1
  按色相排序以找到所有蓝色、绿色、红色等分组在一起
• 2
  按明度排序快速找到用于背景的浅色或用于文本的深色
• 3
  搜索接受部分匹配--"sea"可以找到seagreen、seashell、darkseagreen等
• 4
  命名颜色适合控制台日志样式、SVG填充和快速原型设计
• 5
  在生产环境中，用确切的HEX值替换命名颜色以实现可预测性

Related Tools

十六进制到RGB转换器

使用实时预览色块，瞬间将HEX颜色代码转换为RGB值。

🎨 Color Tools

十六进制到HSL转换器

将HEX颜色代码转换为HSL（色相、饱和度、亮度）值。

🎨 Color Tools

颜色名称转换为HEX

查找所有140+个CSS命名颜色的HEX代码，支持搜索和预览。

🎨 Color Tools

颜色拾取器

交互式颜色拾取工具，支持HEX、RGB、HSL和CMYK输出。

🎨 Color Tools

Tailwind 颜色查找器

为任意 HEX 编码找到最接近的 Tailwind CSS 颜色类。

🎨 Color Tools

Frequently Asked Questions

Q CSS命名颜色有多少种?

CSS规范中有148个命名颜色，其中145个是唯一的（3个是别名：aqua=cyan、fuchsia=magenta、darkgrey=darkgray）。

Q 按色相排序是什么意思?

色相排序按照颜色的位置在色轮上进行排列（0-360°）。红色首先出现（0°），然后是橙色、黄色、绿色、蓝色、紫色，最后回到红色。灰色没有定义的色相，因此出现在一端。

Q 我可以在现代CSS中使用命名颜色吗?

是的，命名颜色可用于所有接受颜色值的CSS属性。它们是在CSS标准中定义的，并且得到普遍支持。

About This Tool

CSS 命名颜色参考 is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.