Color Palette Generator
Generate complementary, split-complementary, analogous, triadic, tetradic, and monochromatic palettes from any base color, with click-to-copy swatches.
Processed locally in your browser — nothing is uploaded.
Color Palette Generator
Complementary
Split-complementary
Analogous
Triadic
Tetradic
Monochromatic
Click any swatch to copy its hex value. Palettes rotate the base hue on the HSL wheel; monochromatic keeps the hue and varies lightness.
About Color Palette Generator
Choose a base color (or hit Randomize for a pleasant starting point) and see six classic color-harmony palettes at once, all derived by rotating the base hue around the HSL wheel. Every swatch shows its hex value and copies it on click.
Complementary pairs sit opposite on the wheel, triadic and tetradic spread evenly around it, analogous colors sit close together, and the monochromatic ladder keeps the hue while stepping lightness.
Common uses
- Pick an accent color that complements a brand color
- Build a full UI color scheme from one starting color
- Explore harmonious combinations for a chart or illustration
Example
Input
#ff0000 · complementary
Output
#ff0000 and #00ffff
Limitations
- Hue-wheel harmony is a starting point, not a guarantee — always check contrast for text colors
Frequently asked questions
What is a complementary color?
The color sitting directly opposite yours on the color wheel — a 180-degree hue rotation. Complementary pairs like red and cyan have maximum hue contrast, which makes them effective for accents but harsh when used at full strength side by side.
How does this generator come up with the palette colors?
It converts your base color to HSL and rotates the hue by fixed angles while keeping saturation and lightness: 180° for complementary, three colors 120° apart for triadic, four 90° apart for tetradic, and a 30°-wide band for analogous. The monochromatic ladder instead keeps the hue and steps lightness from light to dark.
What's the difference between triadic and tetradic color schemes?
A triadic scheme uses three colors evenly spaced 120 degrees apart on the wheel; a tetradic scheme uses four colors 90 degrees apart, effectively two complementary pairs. Triadic palettes are easier to balance, while tetradic ones offer more variety but usually need one dominant color.
Is my base color sent to a server to build the palettes?
No. All six palettes are computed with hue-rotation math in your browser the moment you pick a color; nothing is uploaded or stored.
Can I use these palette colors directly for text on my site?
Not without checking contrast first. Hue harmony says nothing about readability — two harmonious colors can have a contrast ratio far below the WCAG minimum of 4.5:1 for body text, so verify any text/background pairing with a contrast checker.