Free design system generator

Turn one color into an entire design system.

Generate accessible palettes, semantic tokens, light and dark themes, and production-ready code in seconds.

Try:

No account. No upload. Everything runs in your browser — or explore the individual tools.

Step 1
One color
HEX, RGB, HSL or a picked swatch
Step 2
Color scale
Perceptual 50–950 in OKLCH
Step 3
Semantic tokens
background → primary → status roles
Step 4
Light + dark
Independent accessible themes
Step 5
WCAG checks
AA / AAA measured, never assumed
Step 6
Production code
CSS, Tailwind v4, shadcn/ui, JSON

Real interfaces, not swatches

This dashboard is rendered live from the default example color #47003A. Open the generator to change it and watch every surface, badge and button follow.

Open in generator

Overview

MRR

$48,210

+12.4% sample

Active customers

1,284

+3.1% sample

Churned

-0.8% sample

Recent invoices

Customer	Amount	Status
Harbor & Co	$1,240.00	Paid
Northwind Labs	$860.00	Pending
Bluepeak GmbH	$2,410.00	Paid
Summit Studio	$310.00	Overdue
Ridgeway LLC	$980.00	Draft

Customer namePlan

Notifications Email None

Built like part of your team's toolchain

Perceptual color engine

Scales are generated in OKLCH so every step is evenly spaced to the eye — not arbitrary white/black mixes. Your brand hue survives end to end.

Semantic design tokens

Stop shipping raw hex values. Get background, surface, primary, border and status roles that map directly onto real component decisions.

Accessibility built in

Every key pairing is measured against WCAG 2.x thresholds for normal and large text. Failing pairs offer a nearest-accessible fix in one click.

Thoughtful dark mode

Dark themes are constructed independently — lighter primaries, tinted neutrals, verified foregrounds — never a mechanical inversion.

Live interface previews

Judge colors where they matter: a SaaS dashboard, marketing page, storefront and mobile app all render with your tokens instantly.

Exports developers can ship

Copy CSS variables, DTCG-style JSON, Tailwind CSS v4 theme output or current-convention shadcn/ui variables straight into your codebase.

What you can do with ChromaBrew

Generate a color palette from one color

Start with any HEX, RGB or HSL value and get complementary, analogous, triadic, split-complementary, monochromatic or tetradic palettes — all computed in OKLCH for perceptual consistency.

Try the color palette generator

Extract colors from an image

Upload any photo and instantly get its dominant colors as a clean palette. Perfect for matching designs to photography or building brand palettes from reference images.

Try the image color extractor

Check color contrast for accessibility

Verify any text/background pair against WCAG 2.x AA and AAA thresholds. When a combination fails, get a one-click fix that adjusts the color to meet the required ratio.

Try the contrast checker

Build Tailwind CSS color themes

Generate Tailwind CSS v4 @theme color variables from a single brand color. Get a full 50–950 perceptual scale ready to paste into your project.

Try the Tailwind color generator

Create accessible dark themes

Turn any brand color into a proper dark mode with semantic tokens — never a mechanical inversion. Includes verified foreground/background pairs and WCAG contrast checks.

Try the dark mode generator

Simulate color blindness

See how your colors appear to people with protanopia, deuteranopia, tritanopia and achromatopsia. Build designs that work for the 8% of men with color vision deficiency.

Try the color blindness simulator

Free color & design token tools

The same engines behind the color palette generator, available as focused single-purpose tools. Generate color palettes, extract colors from images, check WCAG contrast ratios, convert color formats, and build CSS gradients — all free, no sign-up required.

Start with one color. Walk away with a design system.

Generate a complete color palette, semantic tokens, light and dark themes, and production-ready CSS — from a single HEX value. Free, no account required.