Tailwind Color Search

Find closest Tailwind class from HEX. e.g. bg-blue-500.

About this tool

This tool finds the closest Tailwind color class from HEX in one click. Three features: 1) Enter HEX to get closest class from Tailwind palette, 2) Output as bg-blue-500, text-red-600, etc., 3) Ideal for converting design colors to Tailwind classes.

Tool interface

Closest Tailwind class

—

—

Tailwind CSS color palette — how to use it

The 50–950 scale

Tailwind’s default palette is a consistent scale from 50 (lightest) to 950 (darkest). Picking steps from the same hue keeps contrast and hierarchy predictable across UI.

Backgrounds (50–100)

bg-blue-50 and similar shades work as soft section fills or hover highlights without fighting content.

Borders (200–300)

border-gray-200 / border-slate-300 give quiet dividers that stay out of the way.

Primary actions (500–600)

bg-indigo-500 for primary buttons; pair with hover:bg-indigo-600 for a natural pressed feel.

Text (700–950)

Prefer text-slate-800-style near-blacks over pure #000 for readable, modern body copy.

Why look up HEX?

You often need the hex behind a class like emerald-500 outside Tailwind — Figma, Chart.js, Canvas, or a legacy stylesheet.

  • Design handoff: Match Figma fills to the same Tailwind step.
  • Chart libraries: Pass #10b981 into JS options.
  • Canvas: ctx.fillStyle = '#10b981'.
  • Partial migration: Align one accent in non-Tailwind CSS.

Search by class name (red-500) or paste a HEX to reverse-lookup the closest palette step.

Tip

Paste a Figma hex such as #3b82f6 into the search box — you’ll get blue-500 (or the nearest match) without flipping docs tabs.

Usage

  1. Enter HEX color code in the input field
  2. Closest Tailwind class name from palette is displayed
  3. Copy bg-blue-500, text-red-600 etc. to use

When to use

Design colors to Tailwind classes, consistent color palette.

Examples

#3b82f6 → blue-500, #ef4444 → red-500

FAQ

Tailwind color syntax?

color-shade. blue-500, red-600. 50=lightest, 950=darkest.

Custom colors?

Extend in tailwind.config. This tool uses default palette only.

How to find Tailwind class from HEX?

Enter HEX in this tool. Closest Tailwind color class (bg-blue-500, text-red-600) is shown.

What HEX is Tailwind blue-500?

#3b82f6. Use this tool to search HEX→class name.

Tailwind shade scale?

50,100,200,300,400,500,600,700,800,900,950. 500=base, higher=darker.

Match design colors to Tailwind?

Enter design HEX in this tool. Adopt closest Tailwind class for consistent palette.

Tailwind gray vs slate?

Gray=neutral. Slate=blue-tinted gray. Choose by design tone.

Tailwind color classes list?

slate,gray,zinc,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose.

bg- vs text- in Tailwind?

bg-=background, text-=text color, border-=border. Same color-shade, different use.

How to use Tailwind color search?

Enter HEX. Get closest Tailwind class from full palette instantly.

Is Tailwind Color Search free?

Free to use, no sign-up required.

Is data sent to a server?

Data stays on your device; we do not store it on our servers.

Supported browsers?

Tested on recent Chrome, Edge, Firefox, and Safari.

Offline use?

Core features work offline after the first load.

vs CLI or desktop apps?

Tailwind Color Search is an install-free online alternative to CLI or desktop apps.

When to use it?

Use it when: Design colors to Tailwind classes, consistent color palette.

Usage example?

Example: #3b82f6 → blue-500, #ef4444 → red-500

Main features?

HEX→Tailwind class, Full palette, Closest match

How is this different from similar tools?

Tailwind Color Search runs in the browser with no install—ideal for quick checks before heavier CLI or IDE workflows.

Search keywords

Tailwind Color Search

Basic workflow

  1. Enter HEX color code in the input field
  2. Closest Tailwind class name from palette is displayed
  3. Copy bg-blue-500, text-red-600 etc. to use

Practical use cases

  • Design colors to Tailwind classes, consistent color palette.
  • This tool finds the closest Tailwind color class from HEX in one click. Three features: 1) Enter HEX to get closest class from Tailwind palette, 2) Output as bg-blue-500, text-red-600, etc., 3) Ideal for converting design colors to Tailwind classes.
  • HEX→Tailwind class
  • Full palette

Privacy & data handling

Data stays on your device; we do not store it on our servers.

Things to watch out for

  • Treat Tailwind Color Search as a quick check — re-verify critical values in your editor or CI before shipping.
  • If a browser extension breaks the page, retry in a private window with extensions disabled.
  • Very large pastes can freeze a tab briefly — wait for the result before closing the tab.

Related guides

Related learning content

Related tools