New

Color Palette Generator

Runs in browser

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.

Color Palette Generator tool

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

How to use

  1. Enter a seed colour

    Type or paste any hex colour to generate a full 50–950 scale.

  2. Copy a shade

    Click any swatch to copy its HEX value, or use the ▾ dropdown to copy as RGB, HSL, HSB, or CSS variable.

  3. Export as CSS variables

    Use the CSS var format to drop the palette straight into a design system.

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.

Related tools

You might find these useful too.