Skip to content

Color Scale Generator

Build a readable eleven-step color scale from one seed, then copy production-ready CSS.

Seed color

Enter one six-digit hex color. The valid scale updates immediately.

Generated scale

Each swatch uses its more readable black or white label.

50

Label #000000

Contrast 19.57:1

AA Pass

AAA Pass

100

Label #000000

Contrast 17.10:1

AA Pass

AAA Pass

200

Label #000000

Contrast 14.35:1

AA Pass

AAA Pass

300

Label #000000

Contrast 11.93:1

AA Pass

AAA Pass

400

Label #000000

Contrast 9.53:1

AA Pass

AAA Pass

500

Label #000000

Contrast 7.31:1

AA Pass

AAA Pass

600

Label #000000

Contrast 5.01:1

AA Pass

AAA Fail

700

Label #FFFFFF

Contrast 6.64:1

AA Pass

AAA Fail

800

Label #FFFFFF

Contrast 10.82:1

AA Pass

AAA Pass

900

Label #FFFFFF

Contrast 16.58:1

AA Pass

AAA Pass

950

Label #FFFFFF

Contrast 20.22:1

AA Pass

AAA Pass

Export tokens

Choose standard CSS variables or Tailwind CSS v4 theme tokens.

Export format

Code preview

:root {
	--brand-50: #FFF5F0;
	--brand-100: #FFE2D6;
	--brand-200: #FFCAB3;
	--brand-300: #FFB18E;
	--brand-400: #FF9260;
	--brand-500: #FF6A00;
	--brand-600: #D15500;
	--brand-700: #9E3F00;
	--brand-800: #6C2800;
	--brand-900: #3A1200;
	--brand-950: #120300;
}