Color Palette Generator
Pick a base color, preview harmony palettes and a 100-900 shade scale, then copy HEX, CSS or Tailwind values.
Generated palette
Click any shade to copy its HEX
Harmony
Light to dark scale 100 is lightest, 500 is base, 900 is darkest
Shades keep the base hue and adjust lightness in HSL space. Text on each strip switches to black or white for readability.
On this page
Start with one color
Pick a base color or enter a three- or six-digit HEX value. Choose a harmony mode or keep the monochromatic scale of nine steps numbered 100 through 900. Step 500 is the color you entered; lower steps are lighter and higher steps are darker.
How the shades are made
Each step keeps the base hue and moves lightness in HSL color space, so tints stay tinted and dark steps stay rich instead of washing out to pure white or black. Harmony modes rotate the base hue for complementary, split-complementary, analogous, triadic and square combinations.
Copy the palette
Click any strip to copy its HEX value, copy the full list at once, or export the scale as CSS variables or a Tailwind config snippet. Values are six-digit uppercase HEX colors ready for stylesheets and design tokens.