Tailwind CSS Color Converter

Your designer gave you #3B82F6 from the mockup and you need the Tailwind class name. Is it blue-500 or blue-600? What about #9CA3AF — is it gray-400 or gray-500? You need a tool that finds the closest Tailwind color to any hex value and shows you the exact class name.

Why This Converter (Not the Tailwind Docs)

The Tailwind docs show the color palette but don’t let you search by hex value. This tool lets you browse the full Tailwind v3 color palette, search by class name (like blue-500), and find the closest Tailwind color to any hex or RGB value. Copy HEX, RGB, HSL, and the Tailwind class name instantly. Everything runs in your browser.

What Is the Tailwind CSS Color Converter?

This tool gives you three ways to work with the Tailwind CSS v3 default color palette:

1. Browse the full palette — all 22 color families (slate through rose), each with 11 shades from 50 to 950, displayed as a visual color grid
2. Search by class name — type “blue-500” or “emerald” to filter the palette and jump straight to the colors you need
3. Find the closest Tailwind match — enter any hex or RGB color and instantly see which Tailwind class is the nearest match, using a perceptual color distance algorithm

For every color you select, the tool displays the Tailwind class name, HEX, RGB, HSL, and the ready-to-paste bg-{color} class — all copyable with one click.

The Tailwind v3 Color Palette

Tailwind CSS ships with a carefully curated default color palette. In version 3, the palette was expanded from the v2 system:

• 22 color families: slate, gray, zinc, neutral, stone (grays), red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
• 11 shades per family: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
• Total: 242 named colors

The 950 shade was added in Tailwind CSS v3.3, giving each family an extra dark tone useful for deep backgrounds and text-on-dark-background scenarios.

Gray Families

Tailwind provides five distinct gray families, each with a different undertone:

How to Use Tailwind Color Classes

Tailwind CSS color classes follow a predictable naming pattern:

<!-- Background color -->
<div class="bg-blue-500">...</div>

<!-- Text color -->
<p class="text-gray-700 dark:text-gray-300">...</p>

<!-- Border color -->
<input class="border-indigo-300 focus:border-indigo-500" />

<!-- Ring / outline -->
<button class="focus:ring-2 focus:ring-brand-500/30">...</button>

The numeric shade scale goes from 50 (lightest, near-white) to 950 (darkest, near-black). The mid-range shades (400–600) tend to work well as primary action colors, while 50–200 are popular for subtle backgrounds and 700–900 for dark text on light backgrounds.

Finding the Closest Tailwind Color

The “Find Closest Match” tab accepts any color you currently have — from a brand color, a design system token, or a CSS variable — and maps it to the nearest Tailwind color class. This is particularly useful when:

• Migrating a design from custom CSS to Tailwind
• Matching a brand color to the closest Tailwind default
• Exploring palette options by entering a color and discovering nearby Tailwind alternatives

The distance calculation uses the redmean weighted Euclidean formula, which gives more perceptually accurate results than plain RGB Euclidean distance by accounting for the non-linear way human vision perceives red, green, and blue channels.

Supported Input Formats

The “Find Closest Match” input accepts:

• #3b82f6 — 6-digit hex
• #38f — 3-digit hex shorthand
• rgb(59, 130, 246) — CSS rgb() function
• rgba(59, 130, 246, 1) — CSS rgba() function (alpha ignored for matching)
• 3b82f6 — hex without the # prefix

Dark Mode with Tailwind Colors

Tailwind’s dark mode variant (dark:) is most effective when you use the matching shade convention: pair a light shade with its dark-mode equivalent from the opposite end of the scale.

Common pairings:

<!-- Background: white-to-dark-gray -->
<div class="bg-white dark:bg-gray-900">

<!-- Text: dark-to-light -->
<p class="text-gray-900 dark:text-gray-100">

<!-- Muted text -->
<span class="text-gray-600 dark:text-gray-400">

<!-- Border -->
<div class="border-gray-200 dark:border-gray-700">

<!-- Card background -->
<div class="bg-gray-50 dark:bg-gray-800">

The shade pairings 50↔950, 100↔900, 200↔800, and 300↔700 create balanced light/dark contrast while keeping colors harmonious.

Tailwind Colors vs Custom CSS Colors

You can extend or override the default palette in tailwind.config.js or, in Tailwind CSS v4, via CSS @theme blocks. This tool displays the default (unmodified) palette — the colors available in every Tailwind project out of the box.

Frequently Asked Questions

What Tailwind version does this tool cover?

This tool covers the Tailwind CSS v3 default color palette, including the 950 shades introduced in v3.3. Tailwind v4 uses the same core color values but adds them through a different configuration mechanism (@theme CSS blocks). The hex values themselves are identical between v3.x and v4.

Is black/white in the Tailwind palette?

Yes — black (#000000) and white (#ffffff) are special non-scale colors in Tailwind. The palette shown here is the full default scale palette (50–950). For black and white, use bg-black / bg-white directly in your classes.

How do I add these colors to a custom Tailwind config?

In Tailwind v3:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          500: '#3b82f6', // same as blue-500
        },
      },
    },
  },
}

In Tailwind v4 (CSS-first config):

@import "tailwindcss";
@theme {
  --color-brand-500: #3b82f6;
}

Is my data sent to any server?

No. All color calculations, palette lookups, and closest-match computations happen entirely in your browser using JavaScript. Nothing is transmitted to any server.

What is the 50 shade for?

The 50 shade (e.g., blue-50) is an extremely light tint — almost white with a faint hue. It’s ideal for subtle hover backgrounds, selected-row highlights in tables, and light-theme card backgrounds where you want just a whisper of color without overwhelming the content.

Why are there five gray families?

Different gray tones read differently depending on the surrounding hues in your design. A blue-tinted gray (slate) feels modern and technical. A warm gray (stone) feels friendly and editorial. The availability of five families means you can choose the undertone that best complements your brand colors without reaching for custom values.