Tailwind Color Preview
Browse the full Tailwind CSS color palette. Click to copy classes or hex codes.
Common Use Cases
- rapid visual exploration and iteration
- checking accessibility or color relationships
- building a quick draft before moving into design software
What is Tailwind Color Preview?
The Tailwind Color Preview is a visual reference for the default color palette in Tailwind CSS v3. It displays all 22 color families with their 11 shades (50-950). It's a quick way for developers and designers to find the perfect shade and copy its class name without leaving their workflow.
How to Use This Tool
- 1Scroll to browse all Tailwind color families
- 2Click on any color shade to copy its class name (e.g., bg-blue-500)
- 3Hover to see the HEX code
Example
Input
Click Blue 500
Output
Copied: bg-blue-500
Before You Rely on This Result
UtilityNest keeps this tool simple on purpose: the goal is to make the task easy to understand, fast to complete, and straightforward to double-check.
- Review the inputs once more before you copy, save, or share the result.
- Use the example and FAQ on this page to sense-check how the tool behaves.
- When the result matters, compare one more scenario or related tool before acting on it.
Frequently Asked Questions
Try these related tools
Curated Gradient Generator
Generate aesthetic curated gradients with premium style collections, editable presets, and export-ready CSS output.
Color Mixer
Mix two colors together to find the perfect blend. Adjust ratios to create intermediate shades.
Extract Colors from Image
Upload an image to extract its dominant color palette. Click to pick specific pixel colors.
Color Palette Generator
Generate beautiful color palettes for your design projects. Create harmonious color schemes instantly.