← Back to tools

Tool

Color Palette Generator

Pick a base colour, choose a harmony (complementary, analogous, triadic, split-complementary, tetradic, monochromatic), and get a five-colour palette with full contrast scoring. Export as CSS, SCSS, or JSON.

  • Design
  • Content

Palette

Per-colour values

Colour 1

Hex

RGB

HSL

Colour 2

Hex

RGB

HSL

Colour 3

Hex

RGB

HSL

Colour 4

Hex

RGB

HSL

Colour 5

Hex

RGB

HSL

Contrast & accessibility

WCAG AA needs 4.5:1 for body text, 3:1 for large text and UI.

  • Colours 3 & 5
    4.94:1AA
  • Colours 1 & 5
    3.84:1AA Large
  • Colours 4 & 5
    3.04:1AA Large
  • Colours 2 & 3
    2.71:1Fail
  • Colours 1 & 2
    2.10:1Fail
  • Colours 2 & 5
    1.82:1Fail
  • Colours 2 & 4
    1.67:1Fail
  • Colours 3 & 4
    1.62:1Fail
  • Colours 1 & 3
    1.29:1Fail
  • Colours 1 & 4
    1.26:1Fail

Export palette