What is the Tailwind Colors tool?

This tool provides a complete reference of all Tailwind CSS color classes with visual previews. Browse, search, and copy Tailwind color values for use in your projects.

Can I search for specific colors?

Yes. Search by color name like 'blue' or 'emerald', or search by shade number like '500'. Find the exact Tailwind color class you need quickly.

Can I copy the HEX value or the class name?

Both. Click to copy either the Tailwind class name like 'bg-blue-500' or the HEX value. Choose whichever format you need for your code.

Does it include all Tailwind color shades?

Yes. All standard Tailwind CSS colors from 50 to 950 are included. This covers the complete default color palette that ships with Tailwind.

Can I generate custom Tailwind colors?

Yes. Enter a custom base color and the tool generates a Tailwind-compatible shade scale from 50 to 950 that you can add to your tailwind.config file.

Tools Color ToolsTailwind Color Finder

Tailwind Color Finder

Find the closest Tailwind CSS color

slate

red

orange

yellow

green

blue

indigo

purple

pink

How to Use

Step 1

Pick a Color

Enter a color value or use the picker to select your starting color

Step 2

Explore Options

View conversions, palettes, or variations generated from your color

Step 3

Get Results

See all color values and outputs displayed instantly

Step 4

Copy Values

Click any color value to copy it for use in your designs

Share this tool

Learn More

What Is Tailwind Colors?

Tailwind Colors is a free online tool that provides a complete reference for the Tailwind CSS color palette. Browse, search, and copy Tailwind color classes and their HEX values instantly.

Key Features

Complete Tailwind CSS color palette reference. Search by name or shade number. Copy class names or HEX values. Generate custom Tailwind color scales. Visual comparison of all shades.

Benefits

Quickly find and copy Tailwind color values. Generate custom color scales compatible with your Tailwind config. Visual reference saves time browsing documentation.

Use Cases

Look up Tailwind color values during development. Generate custom color scales for Tailwind projects. Compare color shades to choose the right one. Copy class names for rapid prototyping.

Tips for Best Results

Use shade 500 as your primary brand color. Use 50-100 for backgrounds and 800-900 for text. Generate custom scales that match your brand colors and add them to your Tailwind configuration.