How does the tool decide which Tailwind color is closest?

It computes the Euclidean distance in RGB space between your color and each of the 220+ official Tailwind palette swatches, then returns the one with the smallest distance. A distance of 0 means an exact match.

Which Tailwind version's palette is used?

The full default Tailwind CSS v3 palette is used, covering slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink and rose, each in shades 50 through 950.

Why is the match not exactly what I expected?

RGB distance is a fast approximation of perceptual difference. Two colors with similar numeric distance can look slightly different to the eye, especially in saturated blues and greens. The tool always returns the mathematically nearest swatch.

Can I paste a hex code instead of RGB?

Yes. Paste a 3- or 6-digit hex code into the hex field and the R, G and B values are parsed automatically. Both #fff and #ffffff are accepted.

What is the RGB to Tailwind Color Matcher?

Match any RGB color to the nearest Tailwind CSS v3 palette color. Enter R, G, B or a hex code and the tool finds the closest named utility class by minimizing perceptual color distance, with the exact swatch and distance shown. It runs free in your browser on Gera Tools, with nothing uploaded.

RGB to Tailwind Color Matcher

Name: RGB to Tailwind Color Matcher
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

Get one useful tool a week

Like this tool? Enter your email and we'll send you one genuinely useful Gera tool a week — plus a link to come back to this one. No spam, one-click unsubscribe any time.

This tool matches any RGB or hex color to the closest color in the official Tailwind CSS default palette. Paste a brand color or a value pulled from a design file, and it returns the single nearest named utility class — for example blue-500 or slate-700 — so you can replace arbitrary hex values with palette-consistent classes.

When to use this

Design tools like Figma, Sketch, and Adobe XD export hex and RGB values that may not match Tailwind’s built-in swatches exactly. Rather than hunting through Tailwind’s documentation color-by-color, this tool does the search in one step. It is particularly handy for:

Translating a brand palette (from a style guide PDF or Zeplin) into Tailwind classes before building a component
Auditing an existing stylesheet where designers wrote literal hex values and you need to know which utility class is closest
Quick prototyping — paste a color from an inspiration screenshot and immediately start building

How it works

Each color in the Tailwind palette is stored as an RGB triple. When you enter a color (r, g, b), the tool computes the straight-line distance to every palette swatch using the Euclidean formula:

distance = sqrt((r1 - r2)^2 + (g1 - g2)^2 + (b1 - b2)^2)

The swatch with the smallest distance wins. A distance of 0 means the color is already an exact Tailwind color; larger numbers mean the closest match is further away. Because the search runs over the full palette of more than 220 swatches, you always get the single best fit.

Worked example

Say your brand blue is #2563EB (RGB 37, 99, 235). Tailwind’s official blue-600 is exactly #2563EB, so the distance would be 0 and the match is perfect. For a slightly off-spec color like #2060E8 (RGB 32, 96, 232), the tool computes the distance to every swatch and finds blue-600 still wins — the numeric difference is tiny and not perceptible at normal screen resolutions.

A warmer purple like rgb(124, 58, 237) maps cleanly to violet-600; a mid-grey like rgb(107, 114, 128) maps to gray-500.

Palette coverage

The full Tailwind CSS v3 default palette spans 22 color families — from slate and gray through red, orange, yellow, lime, green, teal, cyan, blue, indigo, violet, purple, pink, and rose — each in shades 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950. That is more than 220 swatches in total, and this matcher searches all of them.

Tips and limitations

RGB Euclidean distance is a fast and reliable matching method for the well-spaced Tailwind palette. The main edge case is saturated blues and greens, where the human eye is more sensitive to perceptual difference than raw RGB numbers suggest. If the suggested class looks slightly off, check the neighboring shade (one step lighter or darker) — it may suit the design better even with a slightly higher numeric distance. The swatch displayed next to the result makes it easy to eyeball.

Everything runs in your browser; your colors are never uploaded.