Tailwind Orange

Name: Tailwind CSS orange colour scale
Creator: ColorsMine

All 11 shades with hex codes — and, for each one, whether you can actually put text on it.

orange-700

lightest shade that passes AA for body text on white — 5.18:1

Body copy at 5.18:1

✓ orange-600 clears 3:1 for borders and icons on white ✓ orange-600 is the darkest that passes AA on black

Every shade links to its full contrast report on white.

Shades, hex codes and contrast

Shade	Hex	On white	On black	APCA Lc	Body text on white
`orange-50`	`#FFF7ED`	1.06:1	19.78:1	0	✕ fails
`orange-100`	`#FFEDD5`	1.15:1	18.33:1	0	✕ fails
`orange-200`	`#FED7AA`	1.35:1	15.51:1	16	✕ fails
`orange-300`	`#FDBA74`	1.69:1	12.45:1	28	✕ fails
`orange-400`	`#FB923C`	2.26:1	9.28:1	42	✕ fails
`orange-500`	`#F97316`	2.80:1	7.49:1	51	✕ fails
`orange-600`	`#EA580C`	3.56:1	5.90:1	60	✕ large text only
`orange-700`	`#C2410C`	5.18:1	4.06:1	72	✓ AA
`orange-800`	`#9A3412`	7.31:1	2.87:1	82	✓ AAA
`orange-900`	`#7C2D12`	9.37:1	2.24:1	88	✓ AAA
`orange-950`	`#431407`	15.65:1	1.34:1	100	✓ AAA

4.5:1 is the WCAG 2.2 minimum for body text (1.4.3). 7:1 is AAA.
3:1 is the minimum for large text and for non-text things you have to see — borders, icons, focus rings (1.4.11).
APCA Lc is a perceptual model that weights dark-on-light differently from light-on-dark. It disagrees with the ratio often enough to be worth reading; Lc 60 is roughly body-text territory, Lc 75 comfortable.
Tailwind's orange sits closest to the colour name Tangerine at its 500 stop.

Paste a brand hex and get an 11-stop OKLCH ramp built around it, with every pairing checked before you ship.