Interactive Tailwind Color Finder

Color

Find the closest Tailwind CSS color for any hex or RGB value.

ttb run tailwind-colors

Input →

Closest Tailwind Colors

cyan-400

#22d3ee · Δ0.0

sky-400

#38bdf8 · Δ32.7

cyan-500

#06b6d4 · Δ48.0

teal-400

#2dd4bf · Δ48.3

sky-500

#0ea5e9 · Δ50.4

teal-300

#5eead4 · Δ69.3

cyan-300

#67e8f9 · Δ73.0

blue-400

#60a5fa · Δ78.1

teal-500

#14b8a6 · Δ78.2

blue-500

#3b82f6 · Δ85.1

emerald-400

#34d399 · Δ86.9

sky-300

#7dd3fc · Δ92.1

Share this tool:

Ad Space Available

Reach developers using the Tailwind Color Finder tool

Get your dev-focused product, API, or service directly in front of highly targeted traffic. Secure this exclusive sponsorship block.

Sponsor Tool

How to Use Tailwind Color Finder

Browse the complete Tailwind CSS color palette with all shades (50-950) for every color family. Click any swatch to copy its HEX value, Tailwind class name, or RGB value. Search by color name or HEX code to find the closest Tailwind match. An indispensable reference for Tailwind developers.

Enter your parameters

Configure the inputs for the Tailwind Colors according to your specific needs.

View real-time results

The utility instantly processes your request and displays the calculated outputs directly in your browser.

Copy or Download

Click the copy icon next to the final output to instantly grab the result, or export it if applicable.

Frequently Asked Questions

What is Tailwind CSS?+

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for styling (e.g., bg-blue-500, text-lg, p-4). Instead of writing custom CSS, you compose designs directly in HTML using utility classes. It's the most popular CSS framework as of 2024.

Can I use these colors without Tailwind?+

Absolutely. The color palette is a carefully designed set of HEX values. Copy them and use them in any CSS, Figma, Sketch, or design tool. The Tailwind palette is considered one of the best pre-built color systems for web design.

Interactive Tailwind Color Finder

Reach developers using the Tailwind Color Finder tool

How to Use Tailwind Color Finder

Enter your parameters

View real-time results

Copy or Download

Frequently Asked Questions

More Color Tools

Color Format Converter

Palette Generator

Gradient Generator

Contrast Checker