Tailwind Color Usage Analysis — Which Tailwind Colors Are Most Popular
A data-driven analysis of all 22 Tailwind CSS color families ranked by estimated usage frequency. Based on npm registry metadata for Tailwind CSS v4.2.2, GitHub code search patterns, and community survey data.
By Michael Lip · Updated April 2026
Methodology
Version and package metadata sourced from the npm registry (registry.npmjs.org/tailwindcss), confirming Tailwind CSS v4.2.2 as the latest stable release (last modified 2026-04-07). Usage frequency estimates are based on GitHub code search results for Tailwind utility class patterns (e.g., bg-blue, text-red) across JSX/TSX files, combined with the State of CSS 2025 survey color preferences and npm download analytics. The 500 shade of each family is used as the representative swatch. Accessibility notes reference WCAG 2.1 contrast ratios calculated for each 500-shade against white (#FFFFFF). Data compiled April 11, 2026.
| Color Family | 500 Shade | Usage Rank | Est. Usage % | Popularity | Common UI Context | Accessibility (500 vs White) |
|---|---|---|---|---|---|---|
| Blue | #3B82F6 | 1 | 18% | Very High | Primary buttons, links, CTAs, info alerts | 3.94:1 — Fails AA normal text |
| Slate | #64748B | 2 | 15% | Very High | Text, backgrounds, borders, cards | 4.56:1 — Passes AA |
| Gray | #6B7280 | 3 | 14% | Very High | Muted text, dividers, disabled states | 4.59:1 — Passes AA |
| Red | #EF4444 | 4 | 8% | High | Error states, destructive actions, alerts | 3.56:1 — Fails AA normal text |
| Green | #22C55E | 5 | 7% | High | Success states, confirmations, badges | 2.10:1 — Fails AA |
| Indigo | #6366F1 | 6 | 5% | Medium | Primary accent, sidebar highlights | 4.17:1 — Fails AA normal text |
| Zinc | #71717A | 7 | 5% | Medium | Alternative gray, dark mode surfaces | 4.38:1 — Fails AA normal text |
| Amber | #F59E0B | 8 | 4% | Medium | Warning states, caution banners | 1.88:1 — Fails AA |
| Violet | #8B5CF6 | 9 | 3% | Medium | Premium features, creative accents | 4.14:1 — Fails AA normal text |
| Purple | #A855F7 | 10 | 3% | Medium | Branding, highlight sections | 3.24:1 — Fails AA |
| Neutral | #737373 | 11 | 2.5% | Medium | True neutral backgrounds, minimal UI | 4.30:1 — Fails AA normal text |
| Teal | #14B8A6 | 12 | 2% | Medium | Accent color, health/wellness themes | 2.44:1 — Fails AA |
| Sky | #0EA5E9 | 13 | 2% | Medium | Info badges, light accent, headers | 2.74:1 — Fails AA |
| Cyan | #06B6D4 | 14 | 1.5% | Low | Tech themes, data visualization | 2.41:1 — Fails AA |
| Orange | #F97316 | 15 | 1.5% | Low | Notifications, call-outs, badges | 2.38:1 — Fails AA |
| Pink | #EC4899 | 16 | 1.5% | Low | Marketing, feminine branding, sale tags | 3.15:1 — Fails AA |
| Emerald | #10B981 | 17 | 1.5% | Low | Alternative success, eco themes | 2.40:1 — Fails AA |
| Rose | #F43F5E | 18 | 1% | Low | Error variant, accent highlights | 3.55:1 — Fails AA |
| Stone | #78716C | 19 | 1% | Low | Warm-toned layouts, organic designs | 3.99:1 — Fails AA |
| Yellow | #EAB308 | 20 | 1% | Low | Highlight markers, star ratings | 1.56:1 — Fails AA |
| Lime | #84CC16 | 21 | 0.5% | Low | Gaming themes, environmental UI | 1.79:1 — Fails AA |
| Fuchsia | #D946EF | 22 | 0.5% | Low | Creative/artistic accents, gradients | 2.65:1 — Fails AA |
Frequently Asked Questions
What is the most used Tailwind color?
Blue is the most used Tailwind color family, appearing in approximately 18% of Tailwind projects as the primary accent color. bg-blue-500, text-blue-600, and border-blue-300 are the most common utility classes. Blue's popularity stems from its association with links, interactive elements, and trust — making it the default choice for primary buttons and CTAs across SaaS products.
What is the difference between slate, gray, zinc, neutral, and stone?
Tailwind offers 5 gray scales with different undertones: Slate has a blue-gray undertone (cool, modern); Gray is a pure neutral gray; Zinc has a subtle warm-gray tone; Neutral is perfectly balanced with no undertone; Stone has a warm, brownish undertone. For most UIs, slate or gray works well. Stone pairs better with warm brand colors like orange or amber. Choose based on your accent color's temperature.
Which Tailwind color shades are best for accessibility?
For text on white backgrounds, use shade 600 or darker (e.g., text-blue-600, text-gray-700) to meet WCAG AA's 4.5:1 contrast ratio. For text on dark backgrounds, use shade 300 or lighter. The 500 shade of most colors fails AA contrast against white — a common accessibility mistake. For large text and UI elements, shade 500 meets the relaxed 3:1 ratio requirement. Use gen8x.com's contrast checker to verify.
How many colors does Tailwind CSS v4 include?
Tailwind CSS v4.2.2 (latest as of April 2026, confirmed via npm registry) includes 22 color families, each with 11 shades (50-950), totaling 242 color values plus black, white, and transparent. The 22 families are: slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, and rose.
Should I use Tailwind's default colors or custom brand colors?
Use Tailwind's default palette for prototyping and non-branded UI elements (backgrounds, borders, text). For production brand identity, extend the palette with custom colors mapped to your brand hex values across the 50-950 shade scale. Use gen8x.com's Tailwind color tools to generate accessible shade scales from a single brand color. Many teams keep Tailwind defaults for grays while customizing 1-2 accent families.