Gray vs Neutral: Default vs Pure Gray
Compare Tailwind's gray and neutral for understanding their nearly identical yet distinct roles.
Gray
#6b7280
True neutral, classic gray
Neutral
#737373
Mathematically neutral, zero bias
Side-by-Side Comparison
| Aspect | Gray | Neutral |
|---|---|---|
| Undertone | Negligible, classic gray | Absolutely none, pure |
| Mood | Familiar, dependable, classic | Precise, impartial, clinical |
| Pairs well with | Everything, very flexible | Everything, no color bias |
| Use case | Body text, borders, placeholders | Lab UIs, unbiased data displays |
| Best For | General web design, safe defaults | Scientific visualization, accessibility |
Our Recommendation
Gray as a reliable default neutral. Neutral when you need guaranteed zero color bias.
Tailwind Classes
Gray
Background: bg-gray-500
Text: text-gray-500
Border: border-gray-500
Neutral
Background: bg-neutral-500
Text: text-neutral-500
Border: border-neutral-500
#neutrals#gray#neutral#comparison