Palette Generator

Generate color palettes from any base color: complementary, analogous, triadic, tetradic schemes plus shades and tints. Click any swatch to copy its hex.

How palette generation works

Color harmonies come from geometry on the color wheel. Your base color is converted to HSL, and each scheme rotates the hue by fixed angles while keeping saturation and lightness: the complement sits directly opposite at 180°, analogous neighbours sit ±30° away, a triad spaces three colors 120° apart and a tetrad spaces four at 90°. Shades and tints keep the hue fixed and step the lightness down toward black or up toward white instead. Because the rotations preserve saturation and lightness, the generated colors feel like they belong to the same family as your base.

complement = rotateHue(base, 180) // opposite on the wheel

Frequently asked questions

Does the generator upload my colors?

No. The palette math runs locally in your browser — hue rotations and lightness steps are computed instantly as you change the base color. Only the base hex appears in the URL so you can share a palette.

Which harmony should I choose?

Analogous palettes are calm and cohesive — good for backgrounds and gradients. Complementary pairs give maximum contrast — good for a brand color plus an attention-grabbing accent. Triadic and tetradic schemes are vibrant and balanced but harder to use well; let one color dominate and reserve the others for accents.

What's the difference between shades and tints?

Both keep the same hue. Shades mix the color toward black by lowering HSL lightness — useful for hover and pressed states. Tints mix it toward white by raising lightness — useful for subtle backgrounds and highlights. A practical UI palette usually needs both.

Last updated: 8 July 2026

More tools

Runs entirely in your browser — nothing you enter is uploaded. ColorMint · MintKit