Color exploration with WCAG checks built in

State of Colors

A fast, visual workspace for building palettes, checking accessibility, analyzing gradients, simulating color vision, and exporting design-ready color tokens.

Open palette auditor Start with contrast

#0f766e

#f97316

#facc15

#2563eb

#111827

7.8:1 AAA

3.4:1 UI

Tokens ready

Discover

Start with named colors, harmonies, or quick palette ideas.

Verify

Run contrast, gradient, and color vision checks early.

Ship

Export tokens and reports your design system can use.

Feature tour

Every section is built around a real color decision.

Inspired by palette-first tools and AI-assisted color workflows, State of Colors keeps exploration playful while making accessibility measurable.

Contrast checker

Test color pairs before they reach production.

Paste foreground and background values in HEX, RGB, HSL, LCH, or OKLCH and see AA, AAA, large text, and UI component results immediately.

AA and AAA scoringShareable pairsFormat-aware inputs

Check contrast

Palette auditor

Stress-test a full palette, not just one lucky pairing.

Audit semantic roles across a contrast matrix so brand, status, accent, and neutral colors have clear usage boundaries.

Role-based paletteMatrix resultsExportable reports

Audit a palette

Gradient analyzer

Find the unsafe zones hidden inside beautiful gradients.

Sample contrast across linear, radial, and conic gradients with heatmap-style checks that reveal where text can safely sit.

Gradient samplingZone-by-zone checksCSS export

Analyze gradients

Design tokens

Turn a palette into portable, accessible color tokens.

Generate OKLCH scales, semantic tokens, dark mode mappings, and exports for CSS variables, Tailwind, W3C JSON, Style Dictionary, and Figma Tokens.

11-step scalesSemantic aliasesMulti-format export

Generate tokens

Color vision simulator

Preview how interface color choices hold up for more people.

Compare UI samples under protanopia, deuteranopia, tritanopia, and achromatopsia so color is never the only signal.

4 vision modesSide-by-side previewsUI-focused checks

Simulate vision

Color database

Browse named colors with practical accessibility context.

Explore hundreds of named colors with HEX, RGB, HSL, OKLCH values, harmonies, and contrast guidance for fast palette exploration.

500+ colorsHarmony ideasColor detail pages

Explore colors

Build the palette. Prove it works.

Move from exploration to accessible implementation without hopping between color pickers, contrast calculators, spreadsheets, and token converters.

Export design tokens