Color Palette + WCAG Checker

Check contrast ratios, AA/AAA compliance, generate palette variants, and export CSS or Tailwind v4 color tokens locally.

All color math runs locally in your browser. No uploads, no accounts, and no design data leaves your device.

Foreground color

Background color

Contrast ratio 4.51:1
AA body text Pass
AAA body text Fail
AA large text Pass

Primary color conversions

HEX #1A73E8
RGB rgb(26, 115, 232)
HSL hsl(214 82% 51%)
OKLCH oklch(0.574 0.195 257.9)

Generated palette

#1A73E8
Primary
#E88F1A
Complementary
#1ADAE8
Analogous left
#281AE8
Analogous right
#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);
}

Frequently Asked Questions

How does the passing suggestion work?

TeaFun keeps the hue and saturation as close as possible to your chosen foreground color, then adjusts lightness until the pair reaches at least WCAG AA for body text.

Does Tailwind export use the new v4 format?

Yes. The export uses `@theme` tokens with `oklch()` values so you can paste them directly into a Tailwind v4 project.

Can I use this for client work?

Yes. The checker is browser-only, so you can test brand colors, export tokens, and generate PNG swatches without sending anything to a third-party service.