什么是CSS颜色代码生成器？

CSS颜色代码生成器，可将任意颜色转换为所有CSS兼容格式：HEX、RGB、RGBA、HSL、HSLA、OKLCH以及CSS命名颜色。通过可视化选色或输入任意格式即可立即获取所有其他格式，并附带 WCAG 对比度检查。

可以直接输入十六进制色值、拖动取色器、微调 RGB 滑块,或者粘贴现有的 rgb()、hsl() 字符串。工具会实时算出其他格式,包括用于感知均匀调色的 OKLCH,还会从 W3C 的 147 种 CSS 命名颜色中匹配最接近的那一个。把不透明度滑到 100% 以下时,rgba() 和 hsla() 才会显示 alpha 通道,不会污染不透明色的输出。对比度面板会显示该颜色在白底和黑底上的 WCAG 比值,一眼就能看出它作为文字是否清晰可读。

使用方法

1. 使用可视化取色器选择颜色，或以任意支持的格式（HEX、RGB、HSL）输入色值。
2. 同时查看所有CSS格式下的颜色显示，每种格式均可一键复制。
3. 使用透明度滑块调整不透明度，获取RGBA和HSLA值，然后复制所需的CSS代码。

何时使用

• 把设计师给的 HEX 色值转成 CSS 框架需要的格式。
• 搭建配色方案时,用 HSL 衍生出更亮或更暗的同色阶梯。
• 给品牌色加上透明度,用作蒙层、阴影或者悬停状态。

结果

一位前端开发者选择其品牌橙色#F97316，立即得到rgb(249, 115, 22)、hsl(25, 95%, 53%)以及其他所有格式，可在整个样式表中统一使用。

常见问题

为什么「命名颜色」一栏有时候是空的?

CSS 一共只内置了 147 种命名颜色,你的色值得跟其中一个完全一致才会匹配上。绝大多数品牌色都落在两种命名颜色之间,所以这是正常的。这一栏主要用来检查 tomato、steelblue 这类常见基础色。

什么情况下应该用 HSL 而不是 HEX 或 RGB?

HSL 手动调节更直观,亮度加 10 就变亮一档,色相加 30 就在色环上挪一段。做色阶的时候设计师常用 HSL。HEX 和 RGB 在最终样式表里字符稍微短一点。

不透明度滑块改变的是颜色还是透明度?

只改 alpha 通道,底层的 R、G、B 值不变。所以 rgba(255, 0, 0, 0.5) 叠在白底上看起来是粉色——红色没变,只是和背景五五混合。

这些 CSS 格式所有浏览器都支持吗?

HEX、RGB、RGBA、HSL、HSLA 和命名颜色拥有近 15 年的通用支持,一直到 IE11。本工具也会输出 OKLCH,它在所有较新引擎(2023 年起的 Chrome、Firefox、Safari、Edge)中都能用,如果还要兼容很旧的引擎,记得保留一个 hex 或 rgb() 作为后备。

怎么取网页上看到的某个颜色?

点「屏幕取色」打开吸管，然后点屏幕上任意一个像素——网页、图片、设计稿都行——那个颜色就会立刻载入。(吸管需要 Chrome、Edge 或 Opera;在 Safari 或 Firefox 上,改用操作系统自带的屏幕取色器取得 HEX,再粘到 HEX 框里。)无论哪种方式,都能一次看到所有等价格式和叠加透明度后的几种变体。

相关工具