颜色选择器

在 HEX、RGB、HSL、CMYK 之间选择并转换颜色。生成和谐色、检查 WCAG 对比度。

HEX

RGB

HSL

CMYK

预览

白底 3.7:1AA 未通过黑底 5.7:1AA 通过

对比度

#3b82f6

rgb(59, 130, 246)

rgba(59, 130, 246, 1)

hsl(217, 91%, 60%)

hsla(217, 91%, 60%, 1)

cmyk(76%, 47%, 0%, 4%)

--color-primary: #3b82f6

色彩和谐

互补色

类似色

三色

分裂互补

四色

明暗阶

如何使用

tools.colorPicker.editorialBody

常见问题

什么是颜色选择器，怎么用？

颜色选择器让你通过点击或输入数值选择颜色，并以多种格式（HEX、RGB、HSL、CMYK）查看。本工具会实时同步所有输入，可复制任意格式、生成和谐色并检查可访问性对比度。

HEX、RGB 和 HSL 有什么区别？

HEX 是 RGB 的紧凑写法（如 #ff0000 表示红）。RGB 用三个 0–255 的数值。HSL 用色相（0–360）、饱和度与明度（0–100%）描述颜色。本工具可在它们之间即时转换。

什么是 CMYK，什么时候用？

CMYK 指青、品红、黄、黑，主要用于印刷。本工具可显示任意颜色的 CMYK 等效值，便于统一屏幕与印刷品牌色。

什么是 WCAG 对比度比？

WCAG 规定了文字与背景的最小对比度。AA 要求正文 4.5:1；AAA 要求 7:1。本工具会显示在白底和黑底上的对比度，并标明是否通过 AA 或 AAA。

什么是色彩和谐？

色彩和谐是一组搭配协调的颜色：互补、类似、三色、分裂互补、四色等。本工具会根据当前颜色生成这些组合；点击色块可设为主色。

什么是明暗阶（tints & shades）？

明色是加白的颜色，暗色是加黑的颜色。本工具生成 10% 到 90% 的九个阶梯，类似 Tailwind CSS 的色阶。

能用于网页和 CSS 吗？

可以。你会得到 HEX、RGB、RGBA、HSL、HSLA 和 CSS 变量。可复制任意值到样式表；对比度检查有助于选择无障碍文字颜色。

什么是颜色的 CSS 自定义属性（变量）？

CSS 自定义属性允许定义一次颜色并重复使用（如 --color-primary: #1a2b3c; 再用 var(--color-primary)）。本工具会给出可在 :root 中使用的变量形式。