Palette Generator

← All tools

Pick a base color and hueshift builds a full scheme around it using classic color-wheel relationships — complementary, analogous or triadic — so you leave with more than one color to work with.

How to use the Palette Generator

  1. Pick or type a base color.
  2. Choose a scheme: Complementary (opposite hue), Analogous (neighboring hues) or Triadic (three evenly spaced hues).
  3. Review the generated swatches — each keeps your base color's saturation and lightness; only the hue changes.
  4. Copy any swatch's HEX value individually.

FAQ

What's the difference between the three schemes?
Complementary pairs your color with its opposite on the color wheel (180° away) for high contrast. Analogous uses hues 30° to either side for a calmer, related look. Triadic spaces three hues 120° apart for a balanced, vibrant set.
Why do all my swatches look similarly light or dark?
Each scheme rotates only the hue and keeps your base color's saturation and lightness, so the palette reads as a family rather than a random assortment.
Can I use this for a whole design system?
It's a starting point — pair it with the Contrast Checker to confirm any text/background combination you build from it meets WCAG.
Does it store my base color?
No — everything runs client-side and nothing is saved or sent anywhere.