Color Palette Generator
Color Palette Generator make colors from base hex analogous triadic palette split complementary swatchesExplore one color-wheel direction at a time
Type or paste a base color, or choose one with the color picker. Select a relationship and Generate palette. Five labeled swatches appear with copyable HEX values. Treat them as a practical starting set: keep, adjust, or discard colors after seeing them in the real design.
What each relationship produces
Complementary pairs the base hue with the hue 180 degrees away and adds lighter variants plus a base shade. Analogous uses neighbors at 30- and 60-degree steps. Triadic places three main hues 120 degrees apart. Split-complementary uses the base plus hues 150 and 210 degrees away. Monochromatic keeps hue and saturation fixed while changing lightness.
How the palette is calculated
The entered opaque sRGB color is converted to HSL. Relationship angles rotate its hue around a 360-degree wheel; rotations wrap at zero. Most palette types preserve the base saturation and lightness for their main hues, then add a lighter tint and darker shade for working range. Results are converted back to 8-bit sRGB and displayed as six-digit HEX.
Worked example
Start with #336699, which is hsl(210, 50%, 40%), and choose Triadic. Rotating 120 and 240 degrees gives hues of 330 and 90 degrees. The three principal swatches are #336699, #993366, and #669933; a lighter base tint and darker base shade round out the five-color set.
From harmony to a usable interface
Color-wheel spacing can suggest variety or cohesion, but it does not assign roles. Decide which color is background, text, accent, border, warning, or decoration. Use fewer colors when every swatch competes for attention. Test palette members in realistic components, including hover, focus, disabled, selected, error, and dark-theme states.
Limitations and privacy
Palette generation stays in this browser. Mathematical harmony does not guarantee brand fit, emotional tone, accessibility, or identical reproduction across displays. This tool does not test contrast, simulate color-vision differences, manage alpha, preserve wide-gamut colors, create print separations, or account for a device's color profile. HSL is convenient for hue relationships, not a perceptually uniform color space.
Palette Generator FAQ
Why do some bright colors feel uneven?
Equal HSL steps do not look equally strong to human vision. Adjust saturation and lightness by eye for the intended context.
Which relationship is safest for a brand?
None is automatically safest. Brand meaning, competitors, content, contrast, and use across media matter more than wheel geometry alone.
Can I use every generated swatch?
You can, but a restrained subset often produces clearer hierarchy.