ColorWell · contrast check
White or black text on #10b981?
Tailwind emerald-500
Use black text. It gives 8.28:1, which passes AAA (and AA).
White text
2.54:1
fails AA
Black text
8.28:1
passes AAA (and AA)
What the thresholds mean
| Level | Needs | White text | Black text |
|---|---|---|---|
| AA, normal text | 4.5:1 | fail | pass |
| AA, large text (18pt+/14pt bold) | 3:1 | fail | pass |
| AAA, normal text | 7:1 | fail | pass |
If you need the other one to pass
Same hue, moved along the lightness ramp until the ratio clears AA.
- For white text, use
#007a4b— 5.4:1
The colour itself
- Hex:
#10b981 - RGB:
16, 185, 129 - Oklch:
69.59% 0.149 162
Shade ramp
#c0ffe2 #9ff3ca #75dcad #3abf8b #009c63 #007a4b #005a33 #003c1e #00200a
Paste this into your config
// tailwind.config.js
colors: {
brand: {
100: "#c0ffe2",
200: "#9ff3ca",
300: "#75dcad",
400: "#3abf8b",
500: "#009c63",
600: "#007a4b",
700: "#005a33",
800: "#003c1e",
900: "#00200a",
},
}Text colour to pair with the 500 shade (#009c63): black, at 5.94:1. For #10b981 itself it is black, at 8.28:1.
Your own colours, the same way
Paste any hex and get this page for it live — ratio, verdict, ramp. Export the whole palette to CSS variables, a Tailwind config or Figma tokens when you want it in the project rather than on the screen.
Open ColorWellOther colours
- text on #ef4444 Tailwind red-500
- text on #f97316 Tailwind orange-500
- text on #f59e0b Tailwind amber-500
- text on #eab308 Tailwind yellow-500
- text on #84cc16 Tailwind lime-500
- text on #22c55e Tailwind green-500
- text on #14b8a6 Tailwind teal-500
- text on #06b6d4 Tailwind cyan-500
- text on #0ea5e9 Tailwind sky-500
- text on #3b82f6 Tailwind blue-500
- text on #6366f1 Tailwind indigo-500
- text on #8b5cf6 Tailwind violet-500