How is contrast calculated?

Contrast ratio uses WCAG 2.2 relative luminance: (L1+0.05)/(L2+0.05).

Can I export CSS variables?

Yes. Copy a ready-made :root block with palette variables and a sample gradient.

Yes. Toggle preview cards to see headings, body text, and buttons in both modes.

Create harmonious palettes, verify WCAG contrast, and export CSS variables.

Base color Base (hex) Steps Mode

Foreground Background Text size

—

Body text uses the foreground color on the background color.

Flip roles to test contrast in dark mode.

How do tints & shades work?

Tints add white, shades add black. We generate an even scale around your base color for UI usage.

Why might contrast fail?

Even attractive combinations can fail WCAG thresholds. Nudge lightness or choose darker text on lighter backgrounds.

Can I copy a full brand kit?

Yes — use Copy CSS variables to grab a :root block with palette variables to paste into your project.