颜色名称与十六进制查询
输入颜色名称即可查到十六进制、RGB 和 HSL 数值，也能由代码反查最接近的颜色名。收录全部 148 种 CSS 颜色的深浅变化与 WCAG 对比度。
CSS 全部具名颜色
CSS 内置的全部 148 个颜色名称，附十六进制与 RGB 数值。点击任意一行即可在上方打开。
十六进制颜色代码的原理
十六进制代码不过是用十六进制写出的三个数字：红色多少、绿色多少、蓝色多少，每项从 00 到 FF。所以 #FFD700 表示红色满值、绿色 215（满值 255）、完全没有蓝色，眼睛看上去就是金色。真正起作用的只有这三组两位数，这也是 #FFF 和 #FFFFFF 都是白色的原因。
十六进制、RGB 与 HSL 的比较
三者描述的是同一批颜色，只是承载的信息不同。十六进制紧凑，是 CSS 中的惯用写法。RGB 把同样的数字写成十进制，更便于计算。HSL 把色相与饱和度、明度分开，因此手工调配色板要容易得多：保持色相不变，只改明度，就能得到相配的深浅。
为什么对比度很重要
文字必须与背景拉开足够差距，视力较弱的人或在昏暗屏幕上才读得清。无障碍指南规定普通文字的对比度为 4.5 比 1（AA 级），更严格的 AAA 级为 7 比 1，大号文字则允许 3 比 1。本工具会分别计算相对白色和黑色的比值，您一眼就能看出该把哪种颜色叠在上面。
实用提示
- CSS 共有 148 个具名颜色，其中若干是重复的：grey 与 gray、aqua 与 cyan 完全相同。
- 十六进制的缩写形式只有在每组两位重复时才成立，所以 #FFCC00 可以写成 #FC0，而 #FFD700 无法缩写。
- 再加两位十六进制数即可设定透明度，因此 #FFD70080 是不透明度约为一半的金色。
- 要搭配色板，就在 HSL 中固定色相、只改明度，这样得到的颜色看起来总是同一家族。
常见问题
名为 gold 的 CSS 颜色是
#FFD700，即 rgb(255, 215, 0)。它是明亮的黄金色而非金属色调，因为纯色无法再现真金的光泽。若想要更接近金属的质感，设计师通常会把它与更深的金色搭配，例如 CSS 中称作 darkgoldenrod 的 #B8860B。在上方输入框里键入名称，即可同时得到十六进制、RGB 和 HSL 数值。CSS 的 148 个具名颜色全部适用，反过来也行：粘贴一个十六进制代码，工具会告诉您最接近的具名颜色以及两者的确切差距。
两者用不同记法承载完全相同的信息。十六进制把三个通道各写成两位十六进制数字，所以 #FF7F50 就是红 255、绿 127、蓝 80。RGB 把同样的数字写成十进制的 rgb(255, 127, 80)。没有哪一种更精确，十六进制只是在 CSS 里更好打字。
即色相、饱和度和明度。色相是色轮上 0 到 360 度的位置，饱和度表示颜色有多鲜艳，明度则从 0% 的黑到 100% 的白。它是最适合设计的格式，因为保持色相不变、只调整明度，就能得到一组明显属于同一系列的深浅色。
CSS 规范中共有 148 个具名颜色，包括 transparent 在内。有几个名称指向完全相同的数值，尤其是 grey 与 gray、aqua 与 cyan、magenta 与 fuchsia。附带十六进制和 RGB 数值的完整清单就在本页。
无障碍指南要求正文文字至少 4.5 比 1，大号文字至少 3 比 1，这是 AA 级标准。更严格的 AAA 级要求 7 比 1。本工具会计算您的颜色相对白色和黑色的比值，并指出哪一种达标，方便您立刻选出可读的那一种。
可以。八位的十六进制代码在末尾追加两位透明度数值，00 表示完全透明，FF 表示完全不透明。因此 #FF000080 就是不透明度约 50% 的红色。目前所有浏览器都支持，不过较早的 rgba() 写法依然十分常见。
因为这 148 个具名颜色只是屏幕可显示的约 1670 万种颜色中极小的一部分。如果您的数值不在这些精确点上，本工具会在 RGB 空间中测量距离，找出最接近的具名颜色，并明确告知这是近似值而非完全匹配。
颜色的十六进制代码是什么？
输入颜色名称即可一次获得十六进制、RGB 和 HSL 数值，或粘贴任意代码来查找最接近的 CSS 具名颜色。gold 是
#FFD700，coral 是 #FF7F50，teal 是 #008080。每条结果还会显示深浅变化以及相对黑白的对比度。