How to generate a coordinated palette from one colour
Pick a base colour, choose a harmony scheme or Tailwind-style scale, and copy individual swatches or the whole palette.
Step 1
Pick a base
Type any CSS colour or use the system picker. HEX, rgb(), hsl(), oklch(), named colours all work.
Step 2
Choose a scheme
Tailwind 50→900 scale for a brand palette, or one of six harmony rotations for accent colours.
Step 3
Copy or export
Click a swatch to copy its HEX, or export the whole palette as JSON or CSS custom properties.
In-depth guide
Palette generator — harmony schemes and Tailwind-style scales
Pick a base colour and generate a coordinated palette in one click. Choose from six harmony schemes (complementary, analogous, triadic, split-complementary, tetradic, monochromatic) or a Tailwind-style 50→900 perceptual scale. Every swatch is one click away from copying as HEX, and the whole palette exports as JSON or CSS custom properties. All locally — no upload, no telemetry.
Six harmony schemes
Each scheme rotates the base hue around the HSL colour wheel while preserving saturation and lightness:
Complementary — base + (hue +180°). Maximum contrast, useful for accents on a single dominant hue.
Analogous — base ± 30°. Quiet, harmonious; works well for gradients and "warm" or "cool" page sections.
Split-complementary — base + (hue +150°) + (hue +210°). Softer than complementary; one of the safest "interesting" choices.
Tetradic — four colours at 90° each. Strong; usually pick one as dominant and use the other three sparingly.
Monochromatic — five lightness steps of the base hue. Great for dashboards and single-colour brand systems.
The Tailwind 50→900 scale
Tailwind ships named hues (slate, blue, brand) with 11 hand-tuned steps from 50 (almost white) to 950 (almost black). The generator approximates that curve by stepping OKLCH lightness — a perceptually uniform space — while keeping the base's hue constant. Chroma is gently reduced at the extremes so 50 and 900 don't look artificial.
It's a good starting point for a brand palette. For production design tokens, drop the generated values into your tailwind.config.js theme.colors block and tweak by eye — the hand-tuned official palettes have a few intentional non-linearities the generator won't reproduce.
Exporting to your codebase
Each swatch has its own Copy button (HEX). For the full palette use the export panel:
JSON — object keyed by step / label, ready to paste into a config file.
CSS custom properties — a :root block of --palette-50 … --palette-900 variables. Reference them anywhere with var(--palette-500).
For more colour formats per swatch (RGB / HSL / OKLCH), drop a HEX into /tools/color-convert.
Privacy & safety
The base colour, the generated palette and every export are computed in your browser. No HTTP call ever fires. The page works fully offline once loaded.
When to use it vs alternatives
Use this tool for quick exploration, generation, previewing, and handoff values. Use your design system, brand guidelines, or accessibility review workflow when choices need formal approval.
Common pitfalls
Preview colours and generated assets in the context where users will actually see them.
Accessibility, contrast, and readability matter more than a palette looking good in isolation.
Generated values are a starting point; check names, formats, and edge cases before shipping.
Frequently asked questions
Does the palette generator send my colour anywhere?
No. Every harmony rotation, the Tailwind-scale generation and the CSS / JSON export all run locally in your browser. Nothing leaves the page.
How are harmony palettes computed?
By rotating the base colour's hue around the HSL colour wheel. Complementary is +180°. Analogous is ±30°. Triadic is +120° and +240°. Split-complementary is +150° and +210°. Tetradic is +90°, +180° and +270°. Saturation and lightness are preserved across rotations so the result feels related to the base.
How is the Tailwind 50→900 scale built?
By keeping the base colour's hue constant and stepping lightness on a perceptual (OKLCH) curve calibrated against Tailwind v4's default palette. Chroma is gently reduced at the very lightest and very darkest steps so 50 and 900 don't look unnatural — that matches what Tailwind does by hand for each named hue.
Why OKLCH for the scale and HSL for harmonies?
OKLCH is perceptually uniform, so stepping lightness in OKLCH gives evenly-spaced shades that look as evenly-spaced as their numbers — which is what you want for a UI scale. HSL is what designers reach for when thinking about hue relationships (the colour wheel maps to HSL hue), so rotations there feel intuitive.
Which colour formats can I paste as the base?
Any valid CSS colour — HEX (#ff0080 or #f08), rgb(), hsl(), hwb(), oklch(), oklab() or a named colour (tomato, rebeccapurple). The native colour picker is also available alongside the text input.
Can I copy the palette as code?
Yes. Each swatch has its own copy button, or use the export panel to grab the whole palette as a JSON object or a CSS :root block with --palette-<step> custom properties.
Why don't my generated 500 swatches exactly match the Tailwind brand-500 I started with?
Tailwind ships hand-tuned palettes — the official 500 of each named hue isn't strictly on the same OKLCH curve as 50 and 900. This generator approximates that curve so the relationship is close but not identical for any specific hue.
Does the generated palette pass WCAG contrast?
Use /tools/contrast-checker on any foreground/background pair to verify. As a rule of thumb, 50 on 900 or 100 on 800 typically clears AAA, and 50 on 700 typically clears AA.
Keep exploring
More tools you'll like
Hand-picked utilities that pair well with the one you're on — all
free, client-side, and zero-signup.