Color Palette Generator
Generate harmonious color palettes from a base color. Supports complementary, analogous, triadic, tetradic, and monochromatic schemes.
About the Color Palette Generator
This color palette generator runs entirely in your browser. Pick a base color and a harmony scheme, then click Generate to produce a coordinated palette instantly. Click any swatch to copy its HEX value. Nothing is uploaded — all color math happens locally.
Color theory basics
Color theory is the practical guidance behind mixing colors and the visual effects of how colors relate. Most palette schemes are based on the HSL color wheel, where hue is measured in degrees from 0° to 360°. By picking hues at fixed angular distances from a base color, you get combinations that feel intentional and harmonious rather than random.
Color harmony schemes
- Complementary — Two hues directly opposite on the wheel (180° apart). High contrast, great for accents and call-to-action buttons.
- Analogous — Three hues next to each other on the wheel (±30°). Soothing and natural; common in landscape and nature palettes.
- Triadic — Three hues evenly spaced at 120° increments. Vibrant and balanced; works well when one color dominates and the other two accent.
- Tetradic — Four hues at 90° increments (two complementary pairs). Rich and versatile; balance warm and cool tones carefully.
- Monochromatic — Variations of a single hue with different lightness. Subtle and elegant; ideal for clean, minimal designs.
Using palettes in design
- Follow the 60-30-10 rule — Use one color for 60% of the design (dominant), another for 30% (secondary), and a third for 10% (accent).
- Check contrast for accessibility — Text on background should meet WCAG AA ratios (at least 4.5:1 for normal text).
- Test on real content — A palette that looks great in swatches may feel different when applied to typography, imagery, and UI elements.
- Vary saturation and lightness — Even within a single hue, range keeps a palette from feeling flat.
Frequently asked questions
How are palettes generated? The base color is converted to HSL, then hues are rotated based on the chosen scheme. Saturation and lightness are preserved unless monochromatic.
Can I copy all colors at once? Yes, click Copy All HEX to put every HEX value on your clipboard, one per line.
How do I get a random palette? Click Random to pick a new base color and regenerate using the current scheme.
What color spaces are shown? Each swatch shows HEX, RGB, and HSL so you can paste into any design tool.