Blue vs Cyan: Primary vs Technical Blue
Compare Tailwind's blue and cyan for standard UI and technical interface use cases.
Blue
#3b82f6
True primary blue
Cyan
#06b6d4
Green-shifted, aquatic blue
Side-by-Side Comparison
| Aspect | Blue | Cyan |
|---|---|---|
| Undertone | Pure blue, deeper | Lighter, aqua tint |
| Mood | Professional, stable, authoritative | Technical, modern, dynamic |
| Pairs well with | Slate, indigo, gray | Teal, sky, slate |
| Use case | Main CTAs, nav links, form focus | Info alerts, code highlights, charts |
| Best For | Primary actions, links, buttons | Info panels, secondary accents, data |
Our Recommendation
Blue for primary UI actions. Cyan for informational and secondary interface elements.
Tailwind Classes
Blue
Background: bg-blue-500
Text: text-blue-500
Border: border-blue-500
Cyan
Background: bg-cyan-500
Text: text-cyan-500
Border: border-cyan-500
#blues#blue#cyan#comparison