酷酷站汇
🎨

颜色转换与取色

HEX / RGB / HSL 互转 + 色阶生成

HEX

#4f46e5

RGB

rgb(79, 70, 229)

RGBA

rgba(79, 70, 229, 0.6)

HSL

hsl(243, 75%, 59%)

明度色阶(可直接做主题变量)

互补色

#4f46e5 · #dce546 · #8ce546

类似色

#4f46e5 · #9f46e5 · #e546dc

三角配色

#4f46e5 · #e54f46 · #46e54f

分裂互补

#4f46e5 · #e59f46 · #8ce546

白字效果

6.29:1

正文 AA 通过

黑字效果

3.34:1

仅大字通过

建议正文配色使用 白色 文字(对比度 6.29:1)。WCAG AA 要求正文 ≥ 4.5:1,大字与图标 ≥ 3:1。

工具介绍

拖动取色器或输入任意格式的颜色值,四种写法同步更新。下方的明度色阶能一键生成 50–900 的变量表,直接复制进 CSS 或 Tailwind 配置;对比度模块会告诉你这组文字颜色是否达到 WCAG AA。

怎么用

  1. 取色或粘贴颜色值
  2. 复制需要的 CSS 写法
  3. 需要主题色时查看色阶与互补色

常见问题

色阶是怎么算的?

固定色相与饱和度,按感知均匀的方式调整明度,比简单线性插值更接近设计稿效果。

对比度标准是什么?

沿用 WCAG 2.1:普通文本 AA 需 4.5:1,大字 3:1。工具会标注通过与否。

同分类其它在线工具

相关推荐