A fixed palette instead of arbitrary hex values
Tailwind CSS ships with a default palette of 22 color families (slate, gray, red, blue, and so on), each with eleven shades numbered 50 (lightest) through 950 (darkest), plus plain black and white. Utility classes like bg-blue-500 or text-red-600 reference this fixed palette by name rather than by an arbitrary hex value, which is the whole point of a design-system approach: a project that only ever uses palette colors is guaranteed visual consistency, since every color in the interface comes from the same curated, pre-tested set rather than one-off values chosen ad hoc.
How the nearest-match lookup works
Given an arbitrary hex value that isn't already an exact palette entry, this tool searches every color in Tailwind's default palette and returns whichever one is numerically closest in RGB space (measured as Euclidean distance across the red, green, and blue channels), labeling the result "(nearest)" to make clear it's an approximation rather than an exact match. #3B82F7, one unit off from Tailwind's actual blue-500 (#3B82F6), correctly resolves toblue-500 (nearest) — close enough that the visual difference is imperceptible. A very different color, like a dark navy such as #123456, might resolve to something likeblue-950 (nearest) even though the match isn't especially close, since Tailwind's palette simply doesn't include every possible color — the tool always returns the closest available option, not a guarantee of visual similarity.
Palette data sourced directly, not re-derived
Tailwind's default color values aren't computed from a formula — they're a curated, hand-picked set of hex codes chosen by Tailwind's maintainers for visual consistency and accessibility across the full range of shades. This tool's palette data is taken directly from Tailwind CSS's published source (the MIT-licensed default color definitions), rather than approximated or regenerated, since there's no algorithm that would reliably reproduce hand-tuned design values — the only accurate source is the actual published palette itself.
Reverse lookup: name to hex
Going the other direction — typing a Tailwind color name like emerald-600 and getting its exact hex value — is a plain lookup against the same palette table, with no approximation involved, since every valid Tailwind color name corresponds to exactly one defined hex value. This direction is useful when working from Tailwind class names in existing markup back to a concrete color value, for instance when handing a design over to someone working outside a Tailwind-based codebase who needs the literal hex value rather than a utility class name.
How the eleven-shade scale is structured
Each of Tailwind's color families follows the same numbering convention: 50 is the lightest, near-white tint of that hue, and 950 is the darkest, near-black shade, with 500 generally representing something close to the color's most saturated, "pure" form — the shade most likely to be used as a primary brand or accent color, with the lighter numbers reserved for backgrounds and the darker numbers for text or high-contrast elements. That consistent numbering across all 22 families is part of what makes the palette easy to work with: reaching for -100 reliably gives a very light background shade regardless of which color family is chosen, without needing to check each family's specific values.
Practical use: auditing an existing color palette
A common reason to convert hex to Tailwind is auditing a design system built before adopting Tailwind, or migrating from another CSS framework — checking, color by color, how close an existing brand palette already is to Tailwind's defaults, or identifying which colors would need to be added as custom values because no close default exists. Running a full palette through this tool in batch mode, one hex value per line, produces exactly that kind of audit: a table showing each original color next to its nearest Tailwind name, from which it's easy to spot both good matches and colors that clearly need a custom theme extension instead of relying on the default palette.
Why this doesn't cover custom Tailwind themes
Tailwind projects frequently extend or override the default palette in their configuration file, adding brand-specific colors or replacing default shades entirely. This tool only knows the stock default palette as shipped by Tailwind CSS itself — it has no way to know about a specific project's custom theme configuration, so a nearest-match result should be understood as "the closest color in Tailwind's unmodified defaults," which may or may not correspond to what a customized project's blue-500actually renders as.