Tailwind color picker
Browse Tailwind v4 default color utility names with reference sRGB hex approximations, or paste a hex to find the nearest tokens (OKLab distance). Copy bg- /text- /border- utilities and check contrast. Share with ?c=.
Enter a valid 3- or 6-digit hex color.
Closest utilities
Nearest matches
Contrast checks
Pick a valid color to see WCAG ratios.
| Pair | Ratio | AA | AA large | AAA |
|---|---|---|---|---|
Default utility palette
About this tool
Utility names follow Tailwind v4 (slate…rose, shades 50–950). Tailwind v4’s canonical palette is defined in OKLCH; the displayed hex values are rendered/reference sRGB approximations for browser previews, matching, and contrast calculations. Nearest-color uses OKLab Euclidean distance — a useful perceptual approximation, not a guarantee of design-system intent. Custom theme colors are not included.
Contrast uses WCAG 2 relative luminance. AA needs 4.5:1 (3:1 large text); AAA needs 7:1. Preview colors are inline CSS, not compiled Tailwind.
Read more
Free books, courses, and software
Get my programming books, course editions, and complete software.
Get the download library →