Which Tailwind version is matched?

v4's expanded palette (22 hues × 11 steps: 50, 100, …, 900, 950). v3-only names alias to the same hex values where present. Pick the version explicitly to limit the match space.

What if my color falls between two palette entries?

The tool returns the nearest by Euclidean distance in OKLCH space, plus the second- and third-nearest with their distance scores. Pick whichever fits your design intent.

Can I match against a custom tailwind.config.js palette?

Not yet — currently matches the default Tailwind palette only. Paste your config into a future release to override.

Is anything sent to a server?

No — all matching runs in your browser.

tailwind v3 · 22 palettes · 11 shades · local

Find the closest Tailwind color

Snap any HEX to the nearest Tailwind palette + shade (e.g. blue-500). Browse the full palette grid, click any swatch to copy its utility name.

Tailwind Color Finder

Input

#3a82e8

hex

Closest class

blue-500

tailwind

Closest hex

#3b82f6

palette

Distance

14.0

rgb units

input · color

HEX input

Sample

Full palette

slate

gray

zinc

red

orange

amber

yellow

lime

green

emerald

teal

cyan

sky

blue

indigo

violet

purple

fuchsia

pink

rose

output · preview

Closest utility

blue-500

#3b82f6

distance: 14.04 units

Quick Start

How to map a brand color to Tailwind

Tailwind ships 22 palettes × 11 shades = 242 utilities. This tool finds which one best matches your brand HEX.

01
Paste a HEX
Brand color, design-token primary, anything you want to snap.
Colors round-trip through a normalised OKLCH representation, so manipulations (lighten, mix, contrast) preserve perceptual uniformity per CSS Color 4.
inputOKLCHCSS Color 4perceptuallive
input · color#3a82e8 · sRGB
```
paste hex
```
loaded · normalisedOKLCH · ready
02
Read the match
Closest pair is the palette+shade with the lowest RGB distance.
Format conversion handles hex, rgb(), hsl(), oklch(), color(display-p3 …) with proper gamut mapping when crossing colour spaces.
matchhex · rgb · hslP3gamut-mappedlive
match · optionsblue-500 · live
```
#3b82f6
```
options applied · livelive
03
Copy a utility
Get the bare class, or click bg-… / text-… for the prefixed utility.
Contrast and accessibility checks evaluate against WCAG 2.2 AA (4.5:1) and AAA (7:1) thresholds; APCA is offered when contrast is the goal.
copyWCAG 2.2APCAAA · AAAcontrast
use · convertedbg-blue-500 · ready
```
<div class="bg-blue-500" />
```
converted · liveWCAG-aware
04
Or pick from the grid
Click any swatch in the full palette to copy that class directly.
Copy formats any swatch in the chosen syntax (#aabbcc, rgb(170 187 204), etc.); downloads emit CSS variable blocks or palette JSON.
browseclipboardCSS varspalette JSONblob
ok · copiedbrowsed · done
```
✓ copied
```
shipped · ready to shipsuccess

Pro tips

Colour work that survives accessibility audits

Use OKLCH for manipulation

OKLCH is perceptually uniform — lightness changes look uniform. hsl() isn’t, and produces muddy mid-tones.

Test against WCAG 2.2

4.5:1 for normal text (AA), 7:1 for AAA. Use Contrast Checker before shipping.

Mind gamut clipping

P3 colours that exceed sRGB get clipped on standard displays. Choose relative colorimetric in CSS Color 4.

Colour blindness affects 8%

Use the Color Blindness simulator to check critical UI before launch.

Don’t hardcode hex

Use CSS variables. Light/dark themes become trivial when colours are tokenised.

Dark mode isn’t inverted

Don’t simply invert lightness — desaturate slightly and re-pick accents. Pure-inverted UIs look harsh.

Use Cases

When to snap to a Tailwind utility

From Figma export to design system swap.

Figma → Tailwind

Translate exported HEX into Tailwind classes. Conversions go through OKLCH so perceptual lightness stays uniform across hues — a 50% L blue looks as bright as a 50% L yellow. HSL fakes this and produces muddy mid-tones, OKLCH solves it per CSS Color 4.

WCAG 2.2 AA

Brand audits

Check if a brand color already lives in the default palette. WCAG 2.2 contrast is sampled live for AA (4.5:1) and AAA (7:1) — flip foreground/background to test both directions. APCA is offered when contrast itself is the goal (e.g., dataviz).

P3-aware

Quick prototypes

Skip custom tokens — use a close-enough utility. Output covers hex, rgb(), hsl(), oklch(), and color(display-p3 …) for CSS Color 4. Drop straight into Tailwind config, CSS custom properties, or Figma without re-typing values.

perceptually-uniform

Refactors

Replace inline HEX with semantic utilities. Pair with the Contrast Checker before shipping any new theme. Catches accessibility regressions before they become bugs filed against you by users with low vision.

gamut-safe

Lookup

Find a shade name from a HEX in seconds. Tokens drop straight into Figma variables, Tailwind config, or CSS custom properties. Theme switching becomes a single variable swap rather than a search-replace across stylesheets.

a11y-ready

Design reviews

Confirm a designer's color fits the system. Gamut-aware: tools warn before you ship a P3 colour that clips on sRGB displays. Choose the appropriate fallback strategy (relative colorimetric vs perceptual) per CSS Color 4 spec.

design-token

FAQ

Frequently asked questions

Which Tailwind version?

v3 / v4 default palette — 22 palettes (slate, gray, …, rose) with 50, 100…900, 950 shades.

How is distance measured?

Euclidean RGB distance. A simple metric that lines up with perceptual similarity for most hues.

Should I always snap?

If your brand color is more than ~20 units from any utility, consider a custom token instead.

Can I get the bg- prefix?

Yes — use the <code>bg-…</code> / <code>text-…</code> buttons on the match card.

Where does this run?

Locally in your browser — nothing is uploaded.

Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

47 in queue·8 shipped this month

Request queued. Thanks!