Color Palette Generator
Spin the color wheel, get a usable palette.
How to use the Color Palette Generator
Most good palettes are not invented — they are derived from a single base color using well-known rotations on the color wheel. This tool takes any hex color and produces six harmonies (complementary, analogous, triadic, tetradic, monochromatic, shades) so you can scaffold a UI or brand palette in seconds, all computed locally with HSL math.
- 01Type a hex color into the base color field, or use the color picker next to it.
- 02Six harmony schemes appear below, each with its hex values printed on the swatch.
- 03Hover any swatch and click copy to grab the hex — or screenshot the row for your design tool.
tips
- —HSL rotations are mathematically clean but perceptually uneven. Equal hue steps look larger around yellow and smaller around blue. For brand work that needs to feel balanced, fine-tune by eye after generating.
- —For a UI, pick a monochromatic base for neutrals (backgrounds, borders) and a complementary accent for CTAs. That combination covers 90% of dashboards without clashing.
- —Before shipping, verify text-on-swatch contrast with a WCAG checker. Two colors can look harmonious side-by-side and still fail the 4.5:1 ratio required for body text.
frequently asked
Which color harmony should I use?+
Complementary palettes (two opposite hues) have the strongest contrast — good for CTAs. Analogous (neighbors on the wheel) feel calm and cohesive. Triadic gives three balanced colors that work for playful brands. Monochromatic keeps things subtle with one hue at different lightness levels.
Are the generated colors accessible?+
The tool shows the hex values but does not yet compute contrast ratios. Before shipping a palette, check the foreground/background combination with a contrast checker — pairs that look fine together can still fail WCAG AA at body-text sizes.
Why do the swatches sometimes look "off"?+
HSL rotations are mathematically clean but perceptually uneven — equal hue steps do not look equally spaced to the eye, especially around yellow and cyan. For high-end brand work, use a tool that works in OKLCH or LCH color space.