A free tool from Aesthetic

Turn any hex into a whole palette.

Paste a hex code and you get a full 11-step OKLCH ramp, plus secondary, status and neutral colours. Preview it across 10 real UI mockups in light and dark mode, then export-ready code. No signup, no watermark.

Try one

Pacific blue#1bc3e6 Cobalt#3b82f6 Emerald#10b981 Violet#8b5cf6 Rose#f43f5e Amber#f59e0b

How it works

Everything you need, nothing you don't

OKLCH-even ramps

Every step is calculated in OKLCH so perceived lightness changes at an even rate. No muddy middle shades, no blown-out lights.

Preview across 10 real UI mockups

See your palette applied to buttons, cards, nav bars and a full-page layout in both light and dark modes before you commit.

Export ready in every format

Copy Tailwind v4 @theme, Tailwind v3 config, CSS variables, SCSS, SVG swatches, Tokens Studio JSON or W3C design tokens.

Tailwind colours

Browse all 26 colour families

Red to olive. Every base Tailwind colour family with a full OKLCH ramp, ready to generate, preview and export.

View all palettes