Color Palette Generator
Build complementary, analogous, triadic, tetradic and monochromatic palettes from one colour.
CSS variables
How to use the Color Palette Generator
- Choose a base color with the picker or type a HEX code.
- Pick a harmony: complementary, analogous, triadic, tetradic or monochromatic.
- Click any swatch to copy its HEX code.
- Export the palette as CSS custom properties for your website or theme.
Why use the Color Palette Generator?
Starting from one confident brand color and building the rest with color theory gives you combinations that feel intentional rather than random. Complementary pairs create contrast for buttons and highlights, analogous schemes feel calm and cohesive, and monochromatic palettes suit minimal brands and interface states. The CSS variables export drops straight into a stylesheet or a theme's custom CSS panel. Always check text contrast before using a palette for body copy and buttons.
Frequently asked questions
What is the difference between triadic and tetradic?
Triadic uses three hues evenly spaced around the color wheel (120° apart). Tetradic uses four hues that form a rectangle on the wheel — two complementary pairs — which gives more variety but needs careful balancing.
How many colors should a brand palette have?
Many brands work well with one or two main colors, one accent and a set of neutrals. Use accent colors sparingly so they keep their impact.
Are these colors accessible?
Color harmony does not guarantee readable contrast. Check text and background combinations against WCAG guidelines — 4.5:1 for normal-sized text.
How do I use the CSS variables?
Paste them into your stylesheet, then use them like color: var(--brand-1);. In WordPress, you can add them under Appearance → Customize → Additional CSS.