ColorWell · contrast check
White or black text on #db2777?
Tailwind pink-600
Use white text. It gives 4.6:1, which passes AA, not AAA.
White text
4.6:1
passes AA, not AAA
Black text
4.57:1
passes AA, not AAA
What the thresholds mean
| Level | Needs | White text | Black text |
|---|---|---|---|
| AA, normal text | 4.5:1 | pass | pass |
| AA, large text (18pt+/14pt bold) | 3:1 | pass | pass |
| AAA, normal text | 7:1 | fail | fail |
The colour itself
- Hex:
#db2777 - RGB:
219, 39, 119 - Oklch:
59.16% 0.218 1
Shade ramp
#ffd0ee #ffb3d9 #ff8fbe #ff629e #e21f79 #b5025d #890043 #60002a #3a0013
Paste this into your config
// tailwind.config.js
colors: {
brand: {
100: "#ffd0ee",
200: "#ffb3d9",
300: "#ff8fbe",
400: "#ff629e",
500: "#e21f79",
600: "#b5025d",
700: "#890043",
800: "#60002a",
900: "#3a0013",
},
}Text colour to pair with the 500 shade (#e21f79): black, at 4.71:1. For #db2777 itself it is white, at 4.6: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 #10b981 Tailwind emerald-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