Tailwind Color Reference
Free online tailwind color reference. No sign-up, no installation. Runs entirely in your browser.
What is Tailwind CSS Color Palette?
Tailwind CSS provides a comprehensive color palette with 22 color families, each containing 11 shades (from 50 to 950). This reference tool lets you instantly browse all colors, view their hex codes, and copy class names or hex values with a single click.
How to Use This Tool
Browse Colors: Scroll through the complete grid of all Tailwind colors organized by family.
Search: Use the search box to filter by color name (e.g., “blue”, “red”) or exact hex code (e.g., “#3b82f6”).
Copy Class Name: Click on a color swatch to copy its Tailwind class name (e.g., “bg-blue-500”) to your clipboard.
Copy Hex Code: Right-click or long-press a swatch to copy its hex value.
Track Copies: The counter at the bottom shows how many items you’ve copied in this session.
Common Use Cases
Web Design: Quickly find and copy exact Tailwind color classes while building responsive layouts.
Design System Reference: Use as a quick lookup for your team’s Tailwind color conventions.
Color Matching: Search by hex code to find the closest Tailwind shade for any color.
Development Speed: Eliminate switching between docs and your code editor.
Can I use these colors without Tailwind CSS?
Yes! All hex codes are displayed and copyable. You can use them in any CSS framework or custom CSS.
What if I search for a color that doesn’t exist?
The grid will show no results. Try searching with a simpler color name (e.g., “blue” instead of “sky blue”) or a partial hex code.
How are the color shades organized?
Each color family has 11 shades: 50 (lightest), 100, 200, 300, 400, 500 (medium), 600, 700, 800, 900, and 950 (darkest).
Can I copy multiple colors at once?
This tool copies one color at a time. For bulk exports, use the official Tailwind CSS documentation or export your config file.
Why is the search case-insensitive?
Case-insensitivity makes searching faster and more intuitive. “Blue”, “BLUE”, and “blue” all return the same results.
Do you store my data?
No. Everything runs in your browser. We don’t collect or store any personal information.