Tailwind Color Classes to CSS Hex Values
Convert Tailwind text-blue-500, bg-red-600, border-gray-300 color classes to CSS hex color values. See the full color palette mapping.
Colors
Detailed Explanation
Tailwind Color Palette in CSS
Tailwind's default color palette includes 22 color families, each with 11 shades (50 through 950). Every color class maps to a specific hex value in CSS.
Text Colors
/* text-blue-500 */
color: #3b82f6;
/* text-red-600 */
color: #dc2626;
/* text-gray-900 */
color: #111827;
/* text-white */
color: #ffffff;
/* text-black */
color: #000000;
Background Colors
/* bg-blue-500 */
background-color: #3b82f6;
/* bg-gray-100 */
background-color: #f3f4f6;
/* bg-green-600 */
background-color: #16a34a;
/* bg-transparent */
background-color: transparent;
Border Colors
/* border-gray-300 */
border-color: #d1d5db;
/* border-blue-500 */
border-color: #3b82f6;
/* border-transparent */
border-color: transparent;
Color Scale Pattern
Each color family follows a consistent shade scale:
| Shade | Meaning | Example (Blue) |
|---|---|---|
| 50 | Lightest tint | #eff6ff |
| 100 | Very light | #dbeafe |
| 200 | Light | #bfdbfe |
| 300 | Light-medium | #93c5fd |
| 400 | Medium-light | #60a5fa |
| 500 | Base | #3b82f6 |
| 600 | Medium-dark | #2563eb |
| 700 | Dark | #1d4ed8 |
| 800 | Very dark | #1e40af |
| 900 | Darkest | #1e3a8a |
| 950 | Near-black | #172554 |
Lower numbers are lighter; higher numbers are darker. The 500 shade is typically considered the "base" color.
Use Case
Designers extracting hex values from a Tailwind-based design to create a style guide or design tokens file, or developers building a color palette for a non-Tailwind project that should match an existing Tailwind design.