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

—

—

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, HEX, クラス名, tailwind color

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

  • Always double-check before pasting output into production
  • Try incognito if extensions break the page
  • Wait for processing on large inputs

Related learning content

Related tools