Color Palette Generator

Generate complementary, analogous, triadic, tetradic or monochromatic palettes and export CSS variables.

Palette mode

#64ADF2Copy

#648AF2Copy

#6467F2Copy

#8564F2Copy

#A864F2Copy

CSS variables

:root {
  --color-1: #64ADF2;
  --color-2: #648AF2;
  --color-3: #6467F2;
  --color-4: #8564F2;
  --color-5: #A864F2;
}

Related Tools

Pick or paste a color, convert between HEX, RGB and HSL, with a shade palette.

Preview and copy CSS linear or radial gradients from two colors.

Tune box-shadow with sliders and copy the CSS code.

Adjust all four corners and copy the border-radius CSS.

Preview system fonts at any size and weight before choosing.

Check WCAG contrast between text and background colors with AA/AAA pass results.