Color Palette Generator

How to choose a color palette that holds up in production

Most palettes fail for the same reason: they are chosen as five pretty swatches and then discovered to be unusable once real UI needs appear. A working palette is a scale, not a set — you need a color for the primary button, one for its hover state, one for a subtle background, one for a border, and one for text on a light surface. This generator derives all of them from a single base color.

Start with one decision, not five

Pick the base color from something you already own: a logo, a product screenshot, a brand guideline. Use the picker above, or sample a pixel with the image color picker. Starting from an existing asset keeps the palette defensible and consistent with the rest of the brand.

Generate the scale

The generator keeps hue and saturation fixed and moves only lightness, producing five steps. Fixed hue is what makes the result look like one family rather than five unrelated colors. In practice the five steps map neatly onto common UI needs: the lightest works as a tinted background, the second as a border or hover state, the base as the primary action color, and the two darkest as text or pressed states.

The 60-30-10 rule

A useful sanity check borrowed from interior design: roughly 60% of a screen should be a neutral background, 30% a secondary surface or supporting color, and 10% the accent that draws the eye. If your palette makes everything accent-colored, nothing stands out. Generate a restrained scale and spend the accent sparingly.

Check every text pair

Before shipping, run each intended text-and-background combination through the WCAG contrast checker. Body text needs at least 4.5:1 (AA) and ideally 7:1 (AAA); large text needs 3:1. This is not optional polish — roughly one in twelve men and one in two hundred women have some form of color vision deficiency, and low contrast affects everyone reading on a phone in daylight.

Add contrast deliberately

A single-hue scale is calm but can feel flat. When you need a second color that genuinely contrasts — for a warning, a chart series, a call to action — derive it from a harmony rule rather than guessing: try the color wheel and compare complementary, analogous and triadic options side by side.

Export as tokens, not hex strings

Copy the palette as CSS custom properties, Tailwind config, SCSS variables or JSON and wire it into your build. Tokens mean a future rebrand is one file instead of a search-and-replace across the codebase, and they keep the palette consistent between design and implementation.

Common mistakes

Too many saturated colors. Desaturated neutrals carry most of a UI; saturated colors are for the few things that must be noticed. No neutral. Every palette needs at least one near-grey for text and surfaces. Ignoring state colors. Success, warning and error are part of the system — decide them now, not when the first error message ships.

Tints, shades, tones: sixty seconds of vocabulary

Traditional color theory names three ways to move a hue off its pure form. A tint adds white — the color gets lighter and usually washed out. A shade adds black — darker and heavier. A tone adds grey, which quiets a color without changing its apparent brightness much. The five-step scale generated above is not produced by mixing in black, white or grey, though: it moves HSL’s lightness channel directly, which keeps saturation constant and produces a more consistent family than paint-style tinting. When a designer says a color looks “dirty,” they usually mean it needs a tone — and the fastest route is to lower saturation slightly while nudging lightness toward the middle.

From five steps to a 50–900 scale

Mature design systems publish ten steps per color (50, 100, 200 … 900) because five rarely covers every surface, border, hover and text role a real interface needs. You can extend the generated palette by hand: keep hue and saturation fixed and interpolate lightness between your five anchors, adding a near-white step around 8% lightness and a near-black step around 92%. The five steps you have stay as the named landmarks; the in-betweens are glue. Export as JSON if you want to script that interpolation inside your build.

Name tokens by role, not by value

A palette exported as --palette-1 through --palette-5 is a starting point; production stylesheets survive change better when tokens are named for what they do. Map the lightest step to something like --surface-accent, the base to --action-primary, the second-darkest to --action-primary-pressed, and reference them through var() everywhere else. If the brand color moves next year, the definition file changes once and the semantic names keep their meaning.

Deriving a dark theme from the same scale

A dark variant is not the same palette with inverted lightness. A practical recipe: keep the hue, pull saturation down slightly (dark surfaces amplify chroma), use the mid and upper steps of your scale for accents against near-black backgrounds — something like #0f1115 rather than pure #000 — and re-run every text pair through the contrast checker, because ratios computed against white backgrounds do not transfer. The lightness ladder you generated is exactly the raw material; mainly the assignment of steps to roles flips.

A quick QA pass before shipping

Three one-minute checks catch most palette problems before design review does. Squint test: blur your eyes — the hierarchy should still read. Grayscale test: convert the screen to greyscale and check that nothing disappears when hue differences are removed; if two swatches merge, they need a lightness gap, not a hue gap. Zoom test: look at 100% on the smallest text size you ship, where low contrast hurts most.

Frequently asked questions

What is a five-step lightness palette?

It keeps your base hue and saturation and produces five colors at different lightness levels, from light to dark. The result is a set of tones you can use for primary, secondary, hover, disabled and border states.

How do I use a palette in CSS?

Choose the "CSS variables" export format and copy the generated :root { --palette-1: …; } block into your stylesheet, then reference the colors with var(--palette-1).