Loading…

How to use Tailwind Color Finder

Browse the complete Tailwind CSS color palette by shade, and click any swatch to copy its class name or hex value.

Frequently asked questions

How many Tailwind colors are there?

Tailwind v3 includes 22 color families, each with 11 shades from 50 to 950.

How do I use these in my project?

Use the class names like bg-blue-500 or text-pink-400 directly in your HTML.

Can I customize Tailwind colors?

Yes — add custom colors in tailwind.config.js under the theme.extend.colors key.

More Color Tools

Color Distance Calculator
Measure perceptual color difference using the ΔECIEDE2000 metric
Color Temperature Tool
Visualize warm/cool color temperature and generate palettes
HEX to RGBA Converter
Convert HEX colors to rgba() with custom alpha / opacity
Color Palette Sorter
Sort a list of hex colors by hue, saturation, or lightness
UI Color Scheme Builder
Build a complete UI color scheme with semantic role assignment
Contrast Grid Checker
Check WCAG contrast for every foreground/background pair in a palette at once
OKLCH Color Converter
Convert HEX/RGB to and from OKLCH and OKLab (CSS Color 4)
Material Tonal Palette
Generate a 50–900 tonal scale from one base color for design systems
Complementary Color Finder
Find the exact complementary (opposite) color for any hex value
Color Inverter
Invert any color to its RGB negative (255 minus each channel)
Lighten / Darken Color
Lighten or darken any color by a precise percentage of lightness
HSL Adjuster
Shift hue, saturation and lightness of a color with live preview

← View all Color ToolsBrowse all 1,100+ tools →