← Back to All Colors
Tailwind Cyan Color Palette
Cool and tech-forward, perfect for digital interfaces and information design.
Click any button to copy className, HEX, RGB, HSL, or OKLCH.
50
cyan-50
#ecfeff
100
cyan-100
#cffafe
200
cyan-200
#a5f3fc
300
cyan-300
#67e8f9
400
cyan-400
#22d3ee
500
cyan-500
#06b6d4
600
cyan-600
#0891b2
700
cyan-700
#0e7490
800
cyan-800
#155e75
900
cyan-900
#164e63
950
cyan-950
#083344
Quick Reference
| Shade | Class | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| cyan-50 | #ecfeff | rgb(236, 254, 255) | hsl(183, 100%, 96%) | oklch(0.984 0.019 200.873) | |
| cyan-100 | #cffafe | rgb(207, 250, 254) | hsl(185, 96%, 90%) | oklch(0.956 0.045 203.388) | |
| cyan-200 | #a5f3fc | rgb(165, 243, 252) | hsl(186, 94%, 82%) | oklch(0.917 0.08 205.041) | |
| cyan-300 | #67e8f9 | rgb(103, 232, 249) | hsl(187, 92%, 69%) | oklch(0.865 0.127 207.078) | |
| cyan-400 | #22d3ee | rgb(34, 211, 238) | hsl(188, 86%, 53%) | oklch(0.789 0.154 211.53) | |
| cyan-500 | #06b6d4 | rgb(6, 182, 212) | hsl(189, 94%, 43%) | oklch(0.715 0.143 215.221) | |
| cyan-600 | #0891b2 | rgb(8, 145, 178) | hsl(192, 91%, 36%) | oklch(0.609 0.126 221.723) | |
| cyan-700 | #0e7490 | rgb(14, 116, 144) | hsl(193, 82%, 31%) | oklch(0.52 0.105 223.128) | |
| cyan-800 | #155e75 | rgb(21, 94, 117) | hsl(194, 70%, 27%) | oklch(0.45 0.085 224.283) | |
| cyan-900 | #164e63 | rgb(22, 78, 99) | hsl(196, 64%, 24%) | oklch(0.398 0.07 227.392) | |
| cyan-950 | #083344 | rgb(8, 51, 68) | hsl(197, 79%, 15%) | oklch(0.302 0.056 229.695) |
Usage Examples
Background
bg-cyan-500Text
text-cyan-500Sample Text
Border
border-cyan-300Ring
ring-cyan-500Explore Other Colors
Explore more Tailwind tools
Tailwind Grid Generator
Create grid layouts visually
Tailwind Flexbox Generator
Create flex layouts visually
Tailwind Gradient Generator
Create custom gradients
Aa
Tailwind Text Gradient
Gradient text effects
Tailwind Gradients Collection
275+ ready-to-use gradients
Tailwind Colors
Complete 240+ color palette
Tailwind Box Shadow Generator
Design multi-layer shadows
Aa
Tailwind Text Shadow
Add depth to text with shadows
Tailwind Filter Generator
Apply blur, brightness & more
Tailwind Transform Generator
Rotate, scale & translate elements
Tailwind Animation Generator
Create built-in & custom animations
Tailwind Transition Generator
Smooth hover transitions
Tailwind Config Generator
Generate your config file
Tailwind Input Generator
Design form inputs visually
Tailwind Class Sorter
Organize classes in order
Flexbox Cheatsheet
All flex utilities visualized
Overflow Cheatsheet
Control content overflow