Color Palette Generator
Build a theme palette and export it as CSS, Tailwind, SCSS or JSON.
Loading the palette builder…
About the Color Palette Generator converter
Choose the colours a theme needs, name them for the job they do, and take away the variables ready to paste into a stylesheet.
Every pairing is scored for contrast as you go, so the combination nobody thought to check does not become the one that fails in production.
Name colours for their job, not their hue
A variable called `danger` survives a rebrand; one called `red` becomes a lie the moment the brand colour changes to orange. The palette is built around roles — primary, accent, success, danger, surface, ink — because that is what the stylesheet should reference.
Turn on the ramp for any colour you need shades of and it expands to the familiar 50–950 steps, generated in OKLCH so the hue holds steady all the way down.
Contrast across the whole theme
Themes rarely fail on the obvious pairing. They fail where a muted grey lands on a light surface, or where two brand colours are used together on one card.
Every pairing in the palette is scored and the weakest are listed first, with the WCAG grade each one earns. Fixing the top of that list is usually the whole job.
A colour-blindness check built in
Switch the preview to protanopia, deuteranopia or tritanopia and the palette redraws as someone with that deficiency would see it. Any pair that was distinct before and is not afterwards is called out by name.
That is not automatically a bug. It only matters when the colour is carrying meaning on its own — a red and green status dot with no icon or label beside it is the classic case.
Exports that drop straight in
CSS gives you custom properties on `:root`. Tailwind gives you a v4 `@theme` block, where `--color-primary-500` is what makes `bg-primary-500` resolve. SCSS gives you variables plus a map you can iterate with `@each`. JSON gives you the raw values for a design-token pipeline.
Names are sanitised into valid identifiers and duplicates are disambiguated, so two swatches both called "brand" do not silently overwrite each other.
Frequently asked questions
How many colours should a theme have?
Fewer than you think. One primary with a full ramp, one accent, three status colours and two neutrals covers most interfaces. Extra hues mostly create more pairings that can fail contrast.
Does the Tailwind export work with version 3?
It targets v4, where the theme lives in CSS. For v3, use the JSON export and paste it under theme.extend.colors in tailwind.config.js — the structure is already nested the way that file expects.
What is OKLCH and should I use it?
A perceptual colour space where equal changes in the numbers look like equal changes to your eye, which sRGB and HSL do not manage. It is supported in every current browser and is the better choice for generating shades and rotating hues. Keep hex for anything that has to work in old email clients.
Why do the ramp steps not match Tailwind's own colours exactly?
Because they are generated from your colour rather than hand-tuned by Tailwind's designers. The lightness steps follow the same scale, so they drop in as replacements, but a hand-picked ramp will always beat a generated one if you have time to make it.
Do my colours leave the browser?
No. Everything here is arithmetic on a colour value, done in the page. Nothing is uploaded, and the tool works offline once loaded.