Color Palette Generator

Pick a base color, choose a harmony mode, copy CSS-ready output.

primary
secondary
tertiary
quaternary
quinary
Preview
primary
secondary
tertiary
quaternary
quinary

Sample text using your palette in light mode. Aa Bb Cc 123.

WCAG Contrast
Aa
primary / white 3.68:1
AA AAA
Aa
primary / black 5.71:1
AA AAA
Aa
secondary / white 1.89:1
AA AAA
Aa
secondary / black 11.11:1
AA AAA
Aa
tertiary / white 6.35:1
AA AAA
Aa
tertiary / black 3.31:1
AA AAA
Export 
:root {
  --color-primary: #3b82f6;
  --color-secondary: #f6af3b;
  --color-tertiary: #513bf6;
  --color-quaternary: #dff63b;
  --color-quinary: #f63bdf;
}