TW
HEX to Tailwind Converter
Convert HEX to the nearest Tailwind CSS token and class, such as amber-500.
Tailwind token
—
Class
—
Matched HEX
—
Convert HEX to a Tailwind color token
Paste a HEX color to find the nearest Tailwind CSS default palette token, such as amber-500, and a suggested class like bg-amber-500.
Matching uses Euclidean distance in RGB against Tailwind’s 50–950 steps. Custom theme colors are not included.
Copy the token into your config or class list. For raw HEX or RGB values, use a dedicated converter.
hex to tailwind FAQ
How do I convert HEX to a Tailwind color?
Paste a hex code. The nearest default token such as slate-900 or amber-500 is shown with a suggested class.
Does it include custom Tailwind theme colors?
No. Matching uses the default Tailwind palette only.
Related tools
VAR
CSS Color Code Generator
Generate CSS color, background-color, and custom property declarations.
NAM
Color Name Finder
Find the closest CSS color name for any HEX code.
RGB
HEX to RGB
Convert a HEX color code to RGB. Free in your browser.
HEX
Color Picker
Free color picker online. Pick a color and copy HEX, RGB, HSL, HSV, and CMYK.