Tailwind Color Palette Generator
Click "Generate New Palette" to start.
About Tailwind CSS
Tailwind CSS is a utility-first CSS framework that lets you build custom designs directly in your HTML by composing utility classes. It provides a comprehensive set of pre-built utilities for styling, including a beautiful color palette that helps maintain consistency across your projects.
This color tool helps you explore and work with Tailwind's color system. You can:
- Browse all available colors and their shades
- Get the exact color codes in various formats (HEX, RGB, HSL, HSV, OKLCH)
- Copy color values with a single click
- View color details in a clean, organized modal
Hover over any color to see its shade number, and click to view detailed color information.
Related Resources
How to Use
🎨 Tailwind Color Palette Generator
Generate Random Palettes: Click Generate New Palette to create a random 5-color palette using Tailwind CSS colors.
Lock Colors: Click the lock icon (🔒/🔓) on any color to prevent it from changing when you generate a new palette.
Save Palettes: Click Save Current Palette to store your palette locally with an optional custom name.
Copy Colors: Use the copy buttons to get your palette in different formats:
- Tailwind - Copy as Tailwind class names (e.g., green-500, blue-300)
- HEX - Copy as hexadecimal color codes
- RGB / HSL - Copy in RGB or HSL format
Share Palettes: Click Copy Link to get a shareable URL for your palette.
📊 Color Table & Modal
Browse Colors: Click any color in the table below to open a detailed modal with color information in multiple formats.
View Color Details: The modal shows the selected color in HEX, RGB, HSL, HSV, and OKLCH formats with copy buttons for each.
Build Your Palette: In the modal, you'll see your current 5-color palette at the bottom. Click the + button below any palette color to replace it with the selected table color.
💡 Pro Tip: Use this workflow to build custom palettes by browsing the table and adding specific colors to your palette collection. The table colors remain unchanged - only your palette gets updated!
🔄 Example Workflow
- Click Generate New Palette to start with random colors
- Browse the color table and click red-600 to open its modal
- In the modal, click the + below the 3rd palette color to replace it with red-600
- Close the modal and click blue-300 in the table
- Replace another palette color with blue-300
- Save your final palette with Save Current Palette
- Copy your palette in Tailwind format to use in your project!
Frequently Asked Questions
What are Tailwind CSS colors?
Tailwind CSS provides a comprehensive color palette with predefined colors and shades. Each color family (like slate, gray, blue) comes with 12 shades (50-950), making it easy to maintain consistent color schemes across your projects.
How do I use these colors in my project?
You can use Tailwind colors by applying utility classes like `bg-blue-500`, `text-gray-700`, or `border-red-300`. The number represents the shade intensity, with higher numbers being darker.
What color formats are supported?
Tailwind colors can be used in various formats including HEX, RGB, HSL, HSV, and OKLCH. You can copy any of these formats using the color picker tool above.
Can I customize these colors?
Yes! You can customize the default color palette by modifying your `tailwind.config.js` file. You can add new colors, modify existing ones, or create your own color schemes.