EspañolHEX color to Tailwind class
Type or pick your brand color. The tool compares it with the 242 colors of the default Tailwind palette and shows the closest ones, with the class ready to copy.
Which Tailwind color is closest
Available in: 
HEX color to Tailwind class: what it is for
If you use Tailwind CSS and get the brand color as a HEX code, you want to know which default palette color comes closest, so your code is not full of bracket values.
The tool compares your color with the 242 colors of the Tailwind 3 palette (slate to rose, shades 50 to 950, plus white and black) using distance in OKLab space, which follows how the eye sees color. It shows the five closest ones, with the class ready, and tells you when none is close enough.
How to use
- Paste the color in HEX or rgb(), or pick it.
- Choose the class prefix (bg, text, border…).
- Copy the class of the closest color or the exact value.
When to use it
- Fitting a brand color into a Tailwind project.
- Converting a Figma layout into classes.
- Deciding whether to add a new color to the theme.
Frequently asked questions
How is the closest color chosen?
By the color distance in OKLab space, which follows human perception better than comparing RGB numbers. The smaller the distance, the more alike the colors.
What if none of them is close?
Use the exact value with brackets, like bg-[#1f6feb], or add your brand color to the theme (theme.extend.colors in tailwind.config or @theme in Tailwind 4) under a name such as brand.
Is the palette from Tailwind 3 or 4?
The comparison uses the HEX values of the default Tailwind 3 palette. Tailwind 4 defined the same colors in OKLCH, with slightly more vivid tones, but the names (blue-600, red-500…) are the same.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.