How are shades calculated?

The tool interpolates lightness across the HSL spectrum to produce perceptually even steps.

Can I copy the full palette at once?

Yes — use the Copy all button to get all shades as CSS custom properties.

Color Palette Generator

Runs in browser

Generate a full color scale from a seed hex color with HEX, RGB, HSL output.

Generate consistent Tailwind-style colour scales from any seed colour. Outputs shades 50-950 with HEX, RGB, HSL, and HSB values you can copy in one click.

rgb(99, 102, 241) · hsl(239°, 84%, 67%)

Scale

50 → 900 (Tailwind-style)

#f7f7f850

#e3e3ed100

#cacbe7200

#adaee6300

#8b8cea400

#6467f2500

#2226f1600

#080cc9700

#04068b800

#00024c900

Monochromatic

same hue, varying lightness & saturation

#ffffff

#dadaec

#aeafe4

#8889e8

#6467f2

#272af1

#080cd3

Warm / Cool variants

hue shifted ±20° toward orange or blue

#9164f2

Warm

#6366f1

Base

#6496f2

Cool

Color harmonies

#6366f1

Base

#f2ef64Complementary

Complementary (180°)

#6366f1

Base

#adf264+30° from comp

#f2a864−30° from comp

Split complementary (±30° from complement)

#6366f1

Base

#64adf2−30°

#a864f2+30°

Analogous (±30°)

#6366f1

Base

#f26467+120°

#67f264+240°

Triadic (120° intervals)

#6366f1

Base

#f264ad+90°

#f2ef64+180°

#64f2a8+270°

Tetradic / Square (90° intervals)

Closest Tailwind color

indigo-500

#6366f1

Export scale

🔒 Runs in your browser · No uploads · Your data never leaves your device

How to use

Enter a seed colour
Type or paste any hex colour to generate a full 50–950 scale.
Copy a shade
Click any swatch to copy its HEX value, or use the ▾ dropdown to copy as RGB, HSL, HSB, or CSS variable.
Export as CSS variables
Use the CSS var format to drop the palette straight into a design system.

Common use cases

Building a design system color scale — Generate a full 50–950 shade scale from your brand color to use as CSS variables across your project.
Matching Tailwind's color system — Create a custom color palette that follows the same perceptual steps as Tailwind's built-in colors.

Examples

Indigo palette
Generate the Tailwind indigo scale from #6366f1.
Output
```
indigo-50: #eef2ff through indigo-950: #1e1b4b
```

Frequently asked questions

How are shades calculated?: The tool interpolates lightness across the HSL spectrum to produce perceptually even steps.
Can I copy the full palette at once?: Yes — use the Copy all button to get all shades as CSS custom properties.

Key concepts

Color scale: A set of systematically lightened and darkened variants of a base color, typically numbered 50–950 in design systems like Tailwind.
HSL: Hue, Saturation, Lightness — a color model that makes it easy to adjust brightness and create perceptually uniform shades.

You might find these useful too.