Advertisement

Tailwind CSS Color Finder

Find the closest Tailwind CSS color class for any hex color. Browse the full Tailwind palette and copy class names on click.

Closest Tailwind Color

blue-500
#3B82F6
Distance: 0.0%Exact match!

Tailwind CSS Color Palette

Advertisement

Related Tools

Color Converter

Convert colors between HEX, RGB, HSL, CMYK, and more formats instantly.

Palette Generator

Generate beautiful, accessible color palettes with WCAG compliance checking. Extract colors from images and export to CSS/JSON.

Contrast CheckerNEW

Check color contrast ratios for WCAG 2.1 AA and AAA compliance with real-time calculation and pass/fail indicators.

Color Blind SimNEW

Simulate how colors appear under protanopia, deuteranopia, and tritanopia. Side-by-side comparison swatches for accessibility testing.

Advertisement

Frequently Asked Questions

How does the closest color matching work?
The tool calculates the Euclidean distance between your input color and every color in the Tailwind CSS palette in the RGB color space. The color with the smallest distance (most similar appearance) is returned as the closest match. This mathematical approach provides accurate visual matching for most use cases.
Which version of Tailwind CSS colors does this use?
This tool uses the Tailwind CSS v3/v4 default color palette, which includes 22 color families (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose) with 11 shades each (50 through 950).
Can I browse the full Tailwind palette?
Yes, the tool displays the complete Tailwind CSS color palette organized by color family. Each shade shows the color swatch, hex value, and class name. Click any color to copy its class name to your clipboard.
What format should I enter the color in?
Enter a hex color code with or without the # prefix. Both 3-digit shorthand (#F00) and 6-digit (#FF0000) formats are supported. You can also use the color picker to select a color visually.
What if there is no exact match?
The tool always finds the closest match from Tailwind's palette, even if it is not an exact match. It shows the distance percentage so you can judge how close the match is. A distance of 0% means an exact match, while higher percentages indicate a greater difference.
How do I use the Tailwind color class?
Tailwind color classes follow the pattern: {property}-{color}-{shade}. For example: bg-blue-500 for background, text-blue-500 for text color, border-blue-500 for borders. Replace the property prefix based on your needs.

How to Find Tailwind CSS Colors

When working with Tailwind CSS, you often have a specific hex color from a design file and need to find the closest Tailwind utility class. Our Tailwind color finder does this instantly, comparing your color against every shade in the Tailwind palette.

Step 1: Enter your color. Type a hex color code or use the color picker. The tool accepts any valid hex color with or without the # prefix.

Step 2: See the closest match. The tool instantly finds the Tailwind color that most closely matches your input. It shows the Tailwind class name, the matched hex value, and a visual comparison between your color and the match.

Step 3: Copy and use. Click any color in the palette or the matched result to copy the class name. Use it directly in your Tailwind CSS markup like bg-blue-500, text-red-600, or border-green-400.

The Tailwind CSS Color System

Tailwind CSS includes a carefully crafted color palette with 22 color families, each containing 11 shades from 50 (lightest) to 950 (darkest). The palette was designed by the Tailwind team to provide perceptually uniform steps between shades, ensuring consistent visual hierarchy and sufficient contrast between adjacent shades.

The palette includes both warm neutrals (stone, neutral) and cool neutrals (slate, gray, zinc), giving designers flexibility for different design aesthetics. The chromatic colors span the full spectrum from reds through purples, each optimized for accessibility and visual harmony when used together in a design.

Using Tailwind Colors Effectively

Semantic color mapping. Map Tailwind colors to semantic roles in your design: a primary color (e.g., blue-600), secondary (e.g., violet-500), success (green-500), warning (amber-500), and danger (red-500). Use Tailwind config to create custom color aliases that reference these palette colors.

Contrast and accessibility. When pairing Tailwind colors for text and background, ensure sufficient contrast. Generally, pairing a 50-100 shade background with 700-900 shade text (or vice versa) meets WCAG AA contrast requirements. Use the Chroma Creator contrast checker to verify specific combinations.

Dark mode considerations. Tailwind makes dark mode straightforward with the dark: variant. A common pattern is using lighter shades for dark mode backgrounds (e.g., dark:bg-gray-800) and darker shades for light mode backgrounds (bg-white). Keep your color choices consistent by always using palette colors rather than arbitrary hex values.

Advertisement