Skip to main content
Back to Tools
Web Tools

Tailwind Color Finder

Find the closest Tailwind CSS color class for any hex or RGB color. Uses perceptual CIE76 Delta E color distance in CIELAB space for accurate matching across the full Tailwind v4 palette (22 color families, 242 colors). Runs entirely in your browser — your data never leaves your machine.

tailwind color css finder palette match design

Published May 30, 2026

All interactive tools run entirely in your browser. Your data never leaves your device.

How It Works

Enter any color as hex (#ff5733), shorthand hex (#f57), or rgb(255, 87, 51). The tool calculates perceptual color distance using CIE76 Delta E in CIELAB color space and ranks every Tailwind color by visual similarity.

Features

  • Full Tailwind v4 palette: all 22 color families (slate through rose) plus black and white — 242 colors total
  • Perceptual matching: uses CIELAB color space with CIE76 Delta E, not simple RGB distance, for results that match human perception
  • Exact match detection: highlights when your input matches a Tailwind color perfectly
  • Configurable results: show 3, 5, 8, or 10 closest matches
  • Live preview: color swatch for your input alongside each match
  • One-click copy: copy any Tailwind class name to clipboard
  • 5 examples: coral, teal, gold, navy, salmon
  • Private: runs entirely in the browser — no data transmitted

Use Cases

  • Finding the best Tailwind class for a brand color from a design spec
  • Converting arbitrary hex colors from design tools (Figma, Sketch) to Tailwind classes
  • Exploring which Tailwind colors are perceptually close to each other
  • Quickly mapping CSS custom colors to Tailwind equivalents
  • Color palette migration when adopting Tailwind CSS