Skip to content
ToolSMA

Color Palette Generator

Complementary

Analogous

Triadic

Split-complementary

Tetradic (square)

Tints & shades (100–900)

CSS variables

--color-base: #D12B3A;
--color-100: #FBEAEB;
--color-200: #F2C0C4;
--color-300: #E9959D;
--color-400: #E16B76;
--color-500: #D8414E;
--color-600: #BE2735;
--color-700: #941E29;
--color-800: #6A161D;
--color-900: #3F0D12;

Pick a base color to generate harmonious palettes based on color theory — complementary, analogous, triadic, split-complementary and tetradic — along with a full scale of tints and shades and WCAG contrast checks.

How to use the Color Palette Generator

  1. Choose a base color or type a HEX value.
  2. Browse the generated harmonies and the tint/shade scale.
  3. Click any swatch to copy its HEX, or copy the whole palette as CSS variables.

Color harmony types

Complementary: opposite on the color wheel (180°), maximum contrast. Analogous: neighbours (±30°), calm and cohesive. Triadic: three colors 120° apart, vibrant but balanced. Split-complementary: base plus the two neighbours of its complement. Tetradic: two complementary pairs.

Accessible contrast

WCAG requires a contrast ratio of at least 4.5:1 for normal text (AA) and 7:1 for AAA. Each swatch shows whether white or black text passes on top of it.

Frequently asked questions

What is a complementary color?

The color directly opposite on the color wheel, e.g. blue and orange.

Can I export the palette?

Yes — copy it as CSS custom properties or a list of HEX codes.