Convert 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.
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.
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).
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)).
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.
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.
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.