What is Tailwind CSS Colors?
Tailwind CSS Colors is a comprehensive reference tool providing instant access to the complete Tailwind CSS color palette. Browse, search, and copy from 242 carefully crafted colors across 22 color families, each featuring 11 shades ranging from 50 (lightest) to 950 (darkest).
Neutral Colors (5)
Slate, Gray, Zinc, Neutral, and Stone - perfect for text, backgrounds, and borders with subtle variations in warmth and tone.
Hued Colors (17)
Red, Orange, Amber, Yellow, Lime, Green, Emerald, Teal, Cyan, Sky, Blue, Indigo, Violet, Purple, Fuchsia, Pink, and Rose for vibrant UI elements.
bg-blue-500 or raw HEX values like #3b82f6 - with just one click.How to Use
Browse Colors
The color grid displays all 22 color families in an organized layout. Each row shows a family name on the left and its 11 shades from lightest (50) to darkest (950). Simply hover over any color to see its shade number and HEX value instantly.
Search Colors
Use the search box to quickly find colors by:
- Family name: Type "blue", "slate", or "emerald"
- HEX value: Enter "#3b82f6" or just "3b82f6"
Results filter in real-time as you type.
Filter by Category
Use the filter dropdown to narrow your view:
- All Colors: Complete palette (22 families)
- Hued Colors: Chromatic colors only (17 families)
- Neutrals: Grayscale variants (5 families)
Copy Colors
Select your preferred format from the dropdown, then click any color to copy instantly:
| Format | Example | Best For |
|---|---|---|
| Class Name | bg-blue-500 |
Tailwind HTML/JSX |
| HEX | #3b82f6 |
CSS, Design Tools |
| RGB | rgb(59, 130, 246) |
CSS rgba(), JavaScript |
| HSL | hsl(217, 91%, 60%) |
Color Manipulation |
View Color Details
Double-click any color to open the detail modal. Here you can see all format values at once, copy individual values with dedicated buttons, and navigate to related shades within the same color family.
Features
Complete Color Palette
Access all 242 colors from the official Tailwind CSS palette. The grid layout makes it easy to compare shades within a family and find the perfect color for your project.
- 22 color families
- 11 shades per family
- Easy visual comparison
Multiple Copy Formats
Copy colors in the exact format you need for your workflow:
- Class Name: Ready for HTML (
bg-blue-500) - HEX: For CSS and design tools
- RGB: For rgba() functions
- HSL: For color manipulation
Favorites System
Save frequently used colors to your favorites list. Click the star icon on any color to add it. Your favorites are stored locally and persist across sessions.
- One-click favorites
- Persistent storage
- Quick access panel
Export as CSS Variables
Export all your favorite colors as CSS custom properties with one click. Perfect for creating a custom color palette for your project that's ready to use in your stylesheets.
- One-click CSS export
- Custom property format
- Project-ready code
Color Detail Modal
Double-click any color to see comprehensive information including all format values and quick access to related shades in the same family.
- All formats at once
- Individual copy buttons
- Related shade navigation
Smart Search
Find colors instantly by typing the family name or HEX value. The search filters the grid in real-time as you type, making color discovery fast and intuitive.
- Real-time filtering
- Family name search
- HEX value search
Frequently Asked Questions
What version of Tailwind CSS colors does this use?
This tool uses the official Tailwind CSS v4 color palette, which includes all 22 color families with 11 shades each (50 through 950). This ensures you're working with the most current and accurate color values from the Tailwind framework.
What's the difference between the neutral colors?
Tailwind provides 5 neutral color families with subtle but important differences in tone and warmth:
- Slate: Cool gray with a slight blue tint - modern and crisp
- Gray: Pure neutral gray - balanced and versatile
- Zinc: Cool gray, slightly warmer than Slate - contemporary feel
- Neutral: True neutral with no color cast - perfectly balanced
- Stone: Warm gray with a slight brown tint - organic and natural
Choose based on your design's overall temperature and aesthetic. Cool grays (Slate, Zinc) work well with blues and modern designs, while warm grays (Stone) complement earthy tones.
How do I use the copied class name?
The class name format (e.g., bg-blue-500) is ready to use directly in your HTML with Tailwind CSS. Simply add it to your element's class attribute:
<div class="bg-blue-500 text-white p-4">
Hello World
</div>Common prefixes:
bg-for background colorstext-for text colorsborder-for border colorsring-for ring colors
Can I use these colors without Tailwind CSS?
Absolutely! Copy the HEX, RGB, or HSL values to use in any CSS file, design tool, or application. The colors work independently of the Tailwind framework.
.my-button {
background-color: #3b82f6;
color: #ffffff;
border: 2px solid rgb(59, 130, 246);
}These colors are also perfect for design tools like Figma, Adobe XD, Sketch, or any application that accepts standard color formats.
Are my favorites saved?
Yes! Favorites are saved in your browser's localStorage. They will persist across sessions on the same device and browser, so you can close the tab and return later to find your favorites intact.
How do I export my color palette?
Exporting your custom color palette is simple:
- Add colors to your favorites by clicking the star icon
- Open the favorites panel
- Click the "Export CSS" button
- Paste the copied CSS custom properties into your stylesheet
:root {
--color-blue-500: #3b82f6;
--color-emerald-600: #059669;
--color-slate-700: #334155;
}You can then use these variables throughout your CSS: background-color: var(--color-blue-500);
No comments yet. Be the first to comment!