Color Converter for Tailwind CSS Classes
Quick Answer: Enter any hex, RGB, or HSL color to find the closest matching Tailwind CSS color class. Tailwind includes 22 color scales with 11 shades each. If no exact match exists, the tool shows the nearest Tailwind color and the delta.
rgb(109, 40, 217)
hsl(263, 70%, 50%)
CSS Values
color: #6d28d9;
color: rgb(109, 40, 217);
color: hsl(263, 70%, 50%);
FAQ
How do I use custom colors in Tailwind?
Add to tailwind.config.js: theme.extend.colors: { brand: "#1a73e8" }. Then use as bg-brand, text-brand, etc. Or use arbitrary values: bg-[#1a73e8].
What color format does Tailwind use internally?
Tailwind v3+ uses RGB/HSL values internally for opacity support. In your config, use any valid CSS color format -- hex, rgb(), hsl(), or named colors.