Skip to main content
FreeToolkit .ai

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

颜色名称转换为HEX illustration
🎨

颜色名称转换为HEX

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

1

按名称搜索

输入颜色名称，如「珊瑚红」或「蓝色」，以筛选列表。

2

浏览颜色

滚动浏览所有 140+ 个 CSS 命名颜色，并带有视觉色块。

3

复制 HEX 代码

点击「复制」按钮以获取任意命名颜色的 HEX 代码。

Loading tool...

What Is 颜色名称转换为HEX?

CSS颜色名称到HEX查询工具提供了即时访问所有140+种在CSS规范中定义的颜色的途径，通过人类可读的名称。您不需要记住十六进制代码，CSS允许您直接在样式表中使用像"珊瑚红","番茄红","钢蓝"或"丽贝卡紫"这样的名称。此工具显示每种命名颜色及其视觉色块、精确的HEX代码和一键复制功能。对于想要在原型中使用语义化颜色名称、查找已知颜色的十六进制值或发现CSS规范中未知存在的新颜色的开发人员来说，这是一个无价的参考资源。可搜索的界面使得快速找到特定颜色或浏览整个颜色家族变得容易。命名的CSS颜色从基本的原色到细腻的阴影，如"柠檬奶油","木瓜鞭"和"薄荷奶油"。

Why Use 颜色名称转换为HEX?

  • 所有 140+ 个 CSS 命名颜色的完整参考
  • 视觉色块使得快速比较颜色变得容易
  • 即时搜索筛选，根据部分名称查找颜色
  • 每个颜色 HEX 代码的一键复制
  • 适用于快速原型设计和学习 CSS 颜色名称

Common Use Cases

快速原型设计

使用命名颜色进行快速原型设计，无需查找十六进制代码。

CSS 参考

找到 CSS 命名颜色的确切 HEX 值，以确保跨浏览器的一致性。

学习辅助工具

探索所有 CSS 命名颜色及其十六进制等价物的全范围。

代码审查

验证代码中的命名颜色是否与预期的视觉外观相匹配。

Technical Guide

CSS命名颜色是一组预定义的148个颜色关键字（包括像"水绿"/"青色"和"紫红"/"洋红"这样的重复项），如CSS Color Module Level 4中指定的。每个名称都映射到一个特定的sRGB颜色，定义为HEX三元组。这些名称起源于Unix窗口系统使用的X11颜色集，并随着时间的推移进行了添加。"丽贝卡紫" (#663399) 的名称是在2014年作为对Eric Meyer的女儿的致敬而添加的。在CSS中，命名颜色是大小写不敏感的： "暗灰石板色"和"darkslategray"是相同的。虽然在开发过程中很方便，但命名颜色也有局限性：它们只提供了16.7百万种可能的RGB颜色的148种，而且名称可以是主观的（例如，"灰色"是#808080，而"暗灰色"是#A9A9A9，它比"灰色"更浅）。对于生产代码，大多数团队更喜欢使用HEX或HSL来实现精确的颜色控制和与设计规范的一致性。

Tips & Best Practices

  • 1
    CSS 命名颜色是大小写不敏感的 -- 「DarkBlue」和「darkblue」是相同的
  • 2
    反直觉的是，「darkgray」 (#A9A9A9) 比 「gray」 (#808080) 更浅
  • 3
    命名颜色适合原型设计，但通常在生产中用确切的 HEX 值替换
  • 4
    关键字「transparent」也是一个有效的 CSS 颜色，相当于 rgba(0,0,0,0)
  • 5
    rebeccapurple (#663399) 是最近添加的命名颜色，以纪念 Rebecca Meyer

Related Tools

十六进制到RGB转换器 - free online tool

十六进制到RGB转换器

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

🎨 Color Tools
十六进制到HSL转换器 - free online tool

十六进制到HSL转换器

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

🎨 Color Tools
颜色拾取器 - free online tool

颜色拾取器

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

🎨 Color Tools
Tailwind 颜色查找器 - free online tool

Tailwind 颜色查找器

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

🎨 Color Tools
CSS 命名颜色参考 - free online tool

CSS 命名颜色参考

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

🎨 Color Tools

Frequently Asked Questions

Q 有多少个 CSS 命名颜色?
CSS 规范中有 148 个命名颜色，包括一些重复对（aqua/cyan、fuchsia/magenta）。这意味着有 145 种独特的颜色。
Q 所有浏览器都支持命名颜色吗?
是的，所有现代浏览器都支持所有 CSS 命名颜色。它们自 CSS1（基本颜色）和 CSS3（扩展颜色）以来就是 CSS 规范的一部分。
Q 我可以在 JavaScript 中使用命名颜色吗?
是的，您可以在 Canvas、CSS-in-JS 库以及通过 JavaScript 设置任何 CSS 属性中使用命名颜色。例如：element.style.color = "tomato"。
Q 为什么 darkgray 比 gray 更浅?
这是 X11 颜色命名系统中的一个历史怪癖。「gray」是 #808080（中灰），而「darkgray」是 #A9A9A9（更浅的阴影）。原始规范中的命名不一致。

About This Tool

颜色名称转换为HEX 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.