All tools › 🎨 Design
Color palette & shades generator
Turn one color into a full 50–950 shade scale and matching color harmonies.
Shades — click a color to copy it; the outlined one is your base color
Harmonies
Export
How it works
Pick a base color to get eleven shades from 50 (lightest) to 950 (darkest), like the color scales used by Tailwind CSS and most design systems. Your exact color is kept at the step whose lightness matches it best.
Shades are calculated in the OKLCH color space, which matches how people perceive lightness, so the steps look evenly spaced across all hues.
Harmonies show complementary, analogous, triadic and split-complementary colors. Click any swatch to copy it, or export the scale as CSS variables, a Tailwind config or JSON.