Color Palette + WCAG Checker

本地检查对比度、AA/AAA 合规、生成 palette 变体，并导出 CSS 或 Tailwind v4 色彩 token。

所有色彩计算都在你的浏览器本地完成。不需要上传、不需要登录，设计数据不会离开你的设备。

前景色

背景色

对比比例 4.51:1

AA 正文字通过

AAA 正文字失败

AA 大字通过

主色转换结果

HEX #1A73E8

RGB rgb(26, 115, 232)

HSL hsl(214 82% 51%)

OKLCH oklch(0.574 0.195 257.9)

生成出来的 palette

#1A73E8

主色

#E88F1A

互补色

#1ADAE8

同色系（左）

#281AE8

同色系（右）

#0F4A97

深色 shade

#6DA6F0

浅色 tint

CSS variables

:root {
  --color-primary: #1A73E8;
  --color-background: #FFFFFF;
  --color-accessible: #1A73E8;
  --color-complementary: #E88F1A;
  --color-analogous-left: #1ADAE8;
  --color-analogous-right: #281AE8;
  --color-shade: #0F4A97;
  --color-tint: #6DA6F0;
}

Tailwind v4 @theme

@theme {
  --color-primary: oklch(0.574 0.195 257.9);
  --color-background: oklch(1.000 0.000 89.9);
  --color-accessible: oklch(0.574 0.195 257.9);
  --color-complementary: oklch(0.727 0.156 65.4);
  --color-analogous-left: oklch(0.811 0.135 203.2);
  --color-analogous-right: oklch(0.443 0.276 269.2);
  --color-shade: oklch(0.421 0.139 257.6);
  --color-tint: oklch(0.717 0.124 255.4);
}

常见问题

最近 pass 建议色是怎么计算的？

TeaFun 会尽量保留你原本前景色的 hue 和 saturation，再调整 lightness，直到正文至少达到 WCAG AA。

Tailwind 导出是 v4 新格式吗？

是。导出内容会使用 `@theme` token 和 `oklch()` 值，你可以直接贴进 Tailwind v4 项目。

可以用于客户项目吗？

可以。工具完全 browser-only，你可以检查品牌色、导出 token，并生成 PNG swatch，而不必把数据交给第三方服务。