Type a brand hex into the seed field — or paste any color and press Enter — then pick a harmony mode. Analogous and monochrome keep the set in one family; complementary, split-complementary, triad and tetrad spread further round the wheel; shades holds the hue and sweeps lightness. Every mode returns five swatches.
Build color sets you can actually use.
Generate a palette, lock the colors that work, tune each swatch by hand, then check WCAG contrast for text and UI. Export to CSS, Tailwind, SCSS, or JSON.
Press Space to regenerate
How it works
From one hex to a palette you can ship
Everything below runs in this tab. Nothing is uploaded.
Lock the swatches that already work, then regenerate or shuffle: locked colors stay fixed while the rest change. Each swatch also takes an exact hex value or the native color picker.
The contrast panel grades three pairs that carry a real interface: primary text on the page background, text on the secondary surface, and accent text on the page background. Copy the result as CSS variables, Tailwind, SCSS or JSON, or download it.
Reading the grades
WCAG contrast is a property of a pair — a text color and the surface behind it — not of a color on its own. The same forest green can be comfortable on cream and unreadable on charcoal, which is why the panel grades three real pairs.
- AAA — 7:1 for normal text, 4.5:1 for large text.
- AA — 4.5:1 for normal text, 3:1 for large text. This is the practical floor most style guides and procurement rules ask for.
- Fail — below AA. Fine for a divider, a focus tint or a decorative rule, not for words a reader has to read.
The ratio comes from relative luminance: each channel is linearised with the sRGB curve, weighted 0.2126 red + 0.7152 green + 0.0722 blue, and compared as (lighter + 0.05) / (darker + 0.05). Blue contributes least and green most, so two colors that look equally light can sit on opposite sides of 4.5:1.
Large text means 24px regular or 18.66px bold and up, and the same 3:1 threshold covers non-text essentials such as input borders, focus rings and icon buttons. When a pair fails, the panel looks for one change that reaches 4.5:1 without breaking the other graded pairs that share the color — the nearest lightness variant of the text color, or of the surface when the text is pinned. Apply writes that hex straight back into the swatch. If no single change can satisfy every pair involved, the panel says so rather than suggesting a fix that would break another pair.
Saving, sharing and exporting
Copy link puts the five hex values, the harmony mode and the lock states into the page URL, so a teammate opens exactly the palette you see — no account, no file to send. Locks are what make the tool usable with a real brand: lock the two colors you cannot change, then regenerate as often as you like.
Also in the collection: JSONView for inspecting the config you just exported, ZenFocus for writing the style guide that goes with it, and the rest of Bravest New World.
Questions
Palette, answered
What is Palette?
Palette is a free browser tool for generating harmonious color sets. It supports seven harmony modes, lockable swatches, manual color tuning, WCAG contrast grading for text and UI, and export to CSS variables, Tailwind, SCSS, and JSON.
How does the WCAG contrast check work?
Palette grades three interface pairs — primary text and accent text on the page background, and text on the secondary surface — against the WCAG thresholds: AAA, AA or fail, for normal text (4.5:1 / 7:1) and large text (3:1 / 4.5:1).
Can I lock colors and regenerate?
Yes. Click the lock on any swatch to keep it fixed, then regenerate or shuffle — locked colors stay put while the rest of the palette changes.
What happens when a pair fails contrast?
Each failing pair looks for one change that reaches 4.5:1 without breaking the other graded pairs sharing that color — the nearest lightness variant of the text, or of the surface when the text is pinned. Apply writes it back into the swatch, and the hex field or color picker can change it again at any time. If no single change satisfies every pair involved, the panel says so instead of suggesting a fix that breaks another.
Can I share a palette?
Yes — Copy link puts the five hex values, the harmony mode and the lock states into the page URL, so anyone opening it sees the same palette. Save current keeps named palettes in this browser only.
Is Palette free and private?
Palette is free and runs entirely in your browser — no account, no tracking, no uploads. It is one of the Bravest New World tools on apprun.icu.