Color Palette Generator — Accessible & Performant Skip to main content
Color Palette Generator

Design palettes fast — export as CSS tokens

Pick a base color, choose a harmony, and generate accessible color schemes. Uses HSL math, contrast checking, and CSS custom properties.

Palette Controls

Configure your color scheme settings below.

Live Preview
Base Color

Enter a 3 or 6 character hex code

5

Number of colors to generate, from 3 to 7

24°

Degrees of hue separation between colors

80%

Color intensity from 20% to 100%

52%

Color brightness from 18% to 78%

CSS Export

Ready for :root

Keyboard: Alt+R Randomize · Alt+G Generate · Alt+C Copy CSS

Generated Palette

Click any swatch to copy its hex value.

Accessibility Guide

AA Large Text (3:1)
Minimum
AA Normal Text (4.5:1)
Good
AAA Normal Text (7:1)
Excellent
Preview Component
Uses your palette colors