Tailwind to HEX, RGB, HSL Converter & Color Code Lookup
Design ToolsConvert any Tailwind CSS color name (e.g., 'red-500', 'blue-200') to its exact HEX, RGB, HSL, and OKLCH color codes. This tool is a quick and accurate color lookup for the entire Tailwind palette, perfect for developers and designers.
How to Use Tailwind to HEX, RGB, HSL Converter & Color Code Lookup
Frequently Asked Questions
How accurate is the color conversion?
The conversion is 100% accurate. Since the tool performs a direct lookup of a known Tailwind color to its predefined HEX value, there is no approximation or color matching involved. It's a simple and precise utility.
What Tailwind colors are included?
All official Tailwind CSS default colors are included: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, slate, gray, zinc, neutral, and stone - each with all shade variants (50-950).
What color formats does it generate?
The tool provides four key color formats: HEX (e.g., #3B82F6), RGB (e.g., rgb(59, 130, 246)), HSL (e.g., hsl(217, 91%, 60%)), and the modern OKLCH (e.g., oklch(0.65 0.16 261.2)).
Can I use this for design systems?
Yes! This tool is perfect for design and development teams who need to quickly reference or verify the exact color values from the official Tailwind palette. It ensures consistency when using Tailwind colors across different applications and design tools.
What Tailwind format should I use?
You can use any standard Tailwind color name, such as `red-500`, `blue100`, or `emerald-600`. The tool is designed to intelligently normalize your input to find the correct match.
How is this different from a color picker?
A color picker lets you select any color from a spectrum, whereas this tool is a specific lookup utility. It's designed to give you the exact color codes for the official Tailwind palette, ensuring you use the precise values from the framework.