← Back to All Colors
Tailwind Sky Color Palette
Light and airy, ideal for backgrounds, links, and subtle accents.
Click any button to copy className, HEX, RGB, HSL, or OKLCH.
50
sky-50
#f0f9ff
100
sky-100
#e0f2fe
200
sky-200
#bae6fd
300
sky-300
#7dd3fc
400
sky-400
#38bdf8
500
sky-500
#0ea5e9
600
sky-600
#0284c7
700
sky-700
#0369a1
800
sky-800
#075985
900
sky-900
#0c4a6e
950
sky-950
#082f49
Quick Reference
| Shade | Class | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| sky-50 | #f0f9ff | rgb(240, 249, 255) | hsl(204, 100%, 97%) | oklch(0.977 0.013 236.62) | |
| sky-100 | #e0f2fe | rgb(224, 242, 254) | hsl(204, 94%, 94%) | oklch(0.951 0.026 236.824) | |
| sky-200 | #bae6fd | rgb(186, 230, 253) | hsl(201, 94%, 86%) | oklch(0.901 0.058 230.902) | |
| sky-300 | #7dd3fc | rgb(125, 211, 252) | hsl(199, 95%, 74%) | oklch(0.828 0.111 230.318) | |
| sky-400 | #38bdf8 | rgb(56, 189, 248) | hsl(198, 93%, 60%) | oklch(0.746 0.16 232.661) | |
| sky-500 | #0ea5e9 | rgb(14, 165, 233) | hsl(199, 89%, 48%) | oklch(0.685 0.169 237.323) | |
| sky-600 | #0284c7 | rgb(2, 132, 199) | hsl(200, 98%, 39%) | oklch(0.588 0.158 241.966) | |
| sky-700 | #0369a1 | rgb(3, 105, 161) | hsl(201, 96%, 32%) | oklch(0.5 0.134 242.749) | |
| sky-800 | #075985 | rgb(7, 89, 133) | hsl(201, 90%, 27%) | oklch(0.443 0.11 240.79) | |
| sky-900 | #0c4a6e | rgb(12, 74, 110) | hsl(202, 80%, 24%) | oklch(0.391 0.09 240.876) | |
| sky-950 | #082f49 | rgb(8, 47, 73) | hsl(204, 80%, 16%) | oklch(0.293 0.066 243.157) |
Usage Examples
Background
bg-sky-500Text
text-sky-500Sample Text
Border
border-sky-300Ring
ring-sky-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