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.
I built this Tailwind to HEX & OKLCH Converter to solve a constant friction point in the modern dev-to-design workflow. While Tailwind CSS provides an incredible color system, you often need the underlying color codes for "non-Tailwind" environments—like setting a project brand color in Figma, styling a third-party charting library, or creating a native mobile app asset. Instead of digging through documentation or inspecting the DOM, I wanted a "command-bar" style lookup that gives you the answer instantly.
One specific reason this tool stands out is its support for OKLCH. As CSS evolves, we are moving away from HSL toward perceptually uniform color spaces. OKLCH allows for more consistent lightness and chroma across different hues. By providing these modern values alongside standard HEX and RGB, this tool helps developers transition their design systems to the latest web standards while maintaining the exact visual identity of the Tailwind palette.
The utility isn't just a simple lookup; it's a normalization tool. Whether you type "blue 500," "blue-500," or "blue500," the logic is designed to understand your intent and provide the 100% accurate, framework-defined values. It’s about reducing the cognitive load of switching between code and design tools.
Practical Tip: When choosing colors for accessibility (WCAG compliance), remember that the "500" series in Tailwind is generally the "primary" hue, but you usually need to jump to 700 or higher for text contrast on a white background. Use the HSL or OKLCH "Lightness" values provided here to quickly compare the brightness of different shades across the palette.
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.