Color Palette Generator

Generate beautiful color schemes using color theory. Press Space to regenerate (locked colours stay), 1–8 to toggle the lock on a swatch. The URL always holds the current palette, so you can share it.

Base Color

Hue217

Saturation91

Lightness60

Harmony Mode

Palette size5

PreviewHover or focus a swatch to copy or lock it

#3cf6af

hsl(157, 91%, 60%)

1.40 Fail14.99 AAA

#3ce0f6

hsl(187, 91%, 60%)

1.59 Fail13.19 AAA

#3c83f6

hsl(217, 91%, 60%)

3.64 AA Large5.77 AA

#523cf6

hsl(247, 91%, 60%)

6.30 AA3.34 AA Large

#af3cf6

hsl(277, 91%, 60%)

4.38 AA Large4.80 AA

Contrast matrix

WCAG contrast ratios between every pair of palette colours. Rows are text colours, columns are backgrounds.
Text colour \ background	#3cf6af	#3ce0f6	#3c83f6	#523cf6	#af3cf6
#3cf6af	—	1.14Fail	2.60Fail	4.49AA Large	3.12AA Large
#3ce0f6	1.14Fail	—	2.29Fail	3.95AA Large	2.75Fail
#3c83f6	2.60Fail	2.29Fail	—	1.73Fail	1.20Fail
#523cf6	4.49AA Large	3.95AA Large	1.73Fail	—	1.44Fail
#af3cf6	3.12AA Large	2.75Fail	1.20Fail	1.44Fail	—

Export

:root {
  --primary: #3cf6af;
  --secondary: #3ce0f6;
  --accent: #3c83f6;
  --neutral: #523cf6;
  --muted: #af3cf6;
}