Every Tailwind CSS colour — tap to copy
Browse the full Tailwind palette, shades 50–950, copy class names, HEX or RGB, and find the closest Tailwind colour.
About Tailwind colors
The grid shows all 22 colour families with 11 shades each, using Tailwind's default values. Choose what to copy — a class name (e.g. text-emerald-600), HEX or rgb() — and tap a colour.
Enter your brand colour in “Find the closest” to see the nearest Tailwind shade. Colour data is loaded from the Tailwind CSS v3 package itself.
FAQ
Are Tailwind v4 colours different?
v4 uses OKLCH values very close to v3; this page shows the v3 HEX values.
More tools here
JSON formatter Base64 encode / decode Image ↔ Base64 URL encode / decode HTML entities Hash generator UUID generator JWT decoder Regex tester Cron generator Unix timestamp converter Code formatter Markdown preview Text ↔ binary Color converter Contrast checker CSS gradient JSON to CSV CSV to JSON YAML ↔ JSON JSON to TypeScript AES encryption TOTP generator Password strength checker CSS box shadow CSS border radius Color palette generator Aspect ratio calculator Chmod calculator