Color Palette Generator

Choose a seed color, generate five related swatches, and copy HEX values or CSS custom properties.

Seed colorPalette mode

CSS variables

--color-1: #13C6C9;
--color-2: #1599E0;
--color-3: #2463EB;
--color-4: #3E3BED;
--color-5: #8952EF;

Common tasks

Choose a seed color, generate five related swatches, and copy HEX values or CSS custom properties.

1. Choose a seedUse the color picker to set a starting color.
2. Compare harmoniesSwitch between analogous, complementary, and triadic modes.
3. Copy the paletteClick a swatch to copy its HEX value or copy the five CSS variables.

Input

Seed #2563EB, analogous mode

Output

Five declarations named --color-1 through --color-5.

Generated colors are suggestions; contrast and accessibility are not checked.
Hue, saturation, and lightness adjustments mean the original seed need not appear unchanged.