Tailwind Color Finder

What Is a Tailwind Color Finder?

Tailwind CSS ships with a default color palette of 22 color families, each containing 11 shades from 50 (lightest) to 950 (darkest). That gives you 242 predefined colors with class names like bg-indigo-500 or text-red-400. When you have a hex or RGB value from a design file and need to find the closest Tailwind class, a Tailwind color finder calculates the distance between your input and every color in the palette, then returns the best matches.

The matching process works by converting both your input color and each Tailwind color to RGB triplets, then computing the Euclidean distance in 3D color space: sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2). The Tailwind color with the smallest distance is the nearest match. If the distance is zero, your input maps exactly to a Tailwind default shade.

This is different from a general color converter or color name finder. A converter changes formats (hex to HSL, RGB to CMYK). A name finder matches against the 148 CSS named colors. A Tailwind color finder matches specifically against the Tailwind CSS default palette, returning class names you can paste directly into your markup.

Why Use This Tailwind Color Finder?

Manually comparing a hex value against 242 Tailwind shades means scrolling through documentation or config files. This tool runs the distance calculation for every shade and shows the top matches ranked by proximity, with their exact hex values and Tailwind class names ready to copy.

Tailwind Color Finder Use Cases

Tailwind CSS Default Color Palette

Tailwind CSS v3 includes 22 color families. Each family has 11 shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950. The 500 shade is considered the 'base' for each family. The table below lists every family with its lightest (50) and darkest (950) hex values.

Tailwind v3 vs v4 Color Palette

Tailwind CSS v4 changes how colors are defined but keeps the same default palette names and shade numbers.

Code Examples

Find the nearest Tailwind color programmatically using Euclidean distance in RGB space. Each example takes a hex string and returns the closest Tailwind class name from the default palette.

// Find nearest Tailwind color from hex input
const TAILWIND_COLORS = {
  'red-500': [239, 68, 68],
  'blue-500': [59, 130, 246],
  'indigo-500': [99, 102, 241],
  'green-500': [34, 197, 94],
  // ... full palette (242 entries)
}

function hexToRgb(hex) {
  const n = parseInt(hex.replace('#', ''), 16)
  return [(n >> 16) & 255, (n >> 8) & 255, n & 255]
}

function nearestTailwind(hex) {
  const [r, g, b] = hexToRgb(hex)
  let best = '', bestDist = Infinity
  for (const [name, [r2, g2, b2]] of Object.entries(TAILWIND_COLORS)) {
    const d = Math.sqrt((r - r2) ** 2 + (g - g2) ** 2 + (b - b2) ** 2)
    if (d < bestDist) { bestDist = d; best = name }
  }
  return best
}

nearestTailwind('#6366f1') // → "indigo-500" (exact match)
nearestTailwind('#5a5de0') // → "indigo-500" (distance: 19.3)
nearestTailwind('#ff4500') // → "red-500" (distance: 57.2)

import math

TAILWIND = {
    "red-500": (239, 68, 68),
    "blue-500": (59, 130, 246),
    "indigo-500": (99, 102, 241),
    "green-500": (34, 197, 94),
    # ... full palette
}

def hex_to_rgb(h: str) -> tuple[int, int, int]:
    h = h.lstrip("#")
    return int(h[0:2], 16), int(h[2:4], 16), int(h[4:6], 16)

def nearest_tailwind(hex_str: str) -> tuple[str, float]:
    r, g, b = hex_to_rgb(hex_str)
    name, dist = min(
        TAILWIND.items(),
        key=lambda item: math.dist((r, g, b), item[1])
    )
    return name, round(dist, 1)

print(nearest_tailwind("#6366f1"))  # → ('indigo-500', 0.0)
print(nearest_tailwind("#1e293b"))  # → ('slate-800', 0.0)
print(nearest_tailwind("#333333"))  # → ('zinc-700', 17.5)

# tailwind.config.js — extend palette with a custom color
# mapped to its nearest default Tailwind shade
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          // Your brand color: #5a5de0
          // Nearest Tailwind: indigo-500 (#6366f1)
          // Use the exact brand color, reference Tailwind for context
          DEFAULT: '#5a5de0',
          light: '#8183f0',   // near indigo-300
          dark: '#3b3dab',    // near indigo-700
        }
      }
    }
  }
}

# Check Tailwind classes in markup:
# npx tailwindcss -o output.css --content ./src/**/*.html

Frequently Asked Questions