Search
500
List
Matching mid-scale swatches across families
Design Tools
Tailwind Colors Cheat Sheet — Full Scale Board
Browse Tailwind CSS color scales (including 50–950 steps) on one board. Search by name, scale, or HEX, then copy utility class names or raw HEX values for CSS projects.
DesignTailwindCSS
Favorite this tool
No favorite storage mode has been selected.
Quick actions
Copy this tool URL or open the system share sheet on a supported device.
设计配色
Tailwind Colors Cheat Sheet
🔍
当前选中：
- 显示 0 / 0
Use cases
- Compare indigo-900 and emerald-400 on one screen
- Copy bg-/text-/border- class names while building UI
- Grab HEX values for non-Tailwind CSS
How to use
- Search by color name, scale, or HEX
- Choose a class prefix and copy mode (class or HEX)
- Click a swatch to copy it, or copy the visible list
Example input and output
FAQ
Which Tailwind palette is this?
It mirrors the common official default scales used in recent Tailwind defaults, including neutral families.
Tools
Related tools
Continue with another translated tool for a nearby task.
Named CSS Colors
Named CSS Colors — Standard Color Name Lookup
Browse W3C/CSS named colors and their values. Filter by keyword or family, then copy the color name or HEX for native CSS work.
CSS Color Cheat sheet
CSS to Tailwind
CSS to Tailwind — Declaration Mapper
Paste CSS declarations and map them to Tailwind utility classes where possible. Common layout, spacing, and color rules become standard classes; unmatched values fall back to arbitrary-value syntax.
CSS Tailwind Convert