← Back to All Colors
Tailwind Teal Color Palette
Balanced blue-green, great for healthcare, wellness, and calming interfaces.
Click any button to copy className, HEX, RGB, HSL, or OKLCH.
50
teal-50
#f0fdfa
100
teal-100
#ccfbf1
200
teal-200
#99f6e4
300
teal-300
#5eead4
400
teal-400
#2dd4bf
500
teal-500
#14b8a6
600
teal-600
#0d9488
700
teal-700
#0f766e
800
teal-800
#115e59
900
teal-900
#134e4a
950
teal-950
#042f2e
Quick Reference
| Shade | Class | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| teal-50 | #f0fdfa | rgb(240, 253, 250) | hsl(166, 76%, 97%) | oklch(0.984 0.014 180.72) | |
| teal-100 | #ccfbf1 | rgb(204, 251, 241) | hsl(167, 85%, 89%) | oklch(0.953 0.051 180.801) | |
| teal-200 | #99f6e4 | rgb(153, 246, 228) | hsl(168, 84%, 78%) | oklch(0.91 0.096 180.426) | |
| teal-300 | #5eead4 | rgb(94, 234, 212) | hsl(171, 77%, 64%) | oklch(0.855 0.138 181.071) | |
| teal-400 | #2dd4bf | rgb(45, 212, 191) | hsl(172, 66%, 50%) | oklch(0.777 0.152 181.912) | |
| teal-500 | #14b8a6 | rgb(20, 184, 166) | hsl(173, 80%, 40%) | oklch(0.704 0.14 182.503) | |
| teal-600 | #0d9488 | rgb(13, 148, 136) | hsl(175, 84%, 32%) | oklch(0.6 0.118 184.704) | |
| teal-700 | #0f766e | rgb(15, 118, 110) | hsl(175, 77%, 26%) | oklch(0.511 0.096 186.391) | |
| teal-800 | #115e59 | rgb(17, 94, 89) | hsl(176, 69%, 22%) | oklch(0.437 0.078 188.216) | |
| teal-900 | #134e4a | rgb(19, 78, 74) | hsl(176, 61%, 19%) | oklch(0.386 0.063 188.416) | |
| teal-950 | #042f2e | rgb(4, 47, 46) | hsl(179, 84%, 10%) | oklch(0.277 0.046 192.524) |
Usage Examples
Background
bg-teal-500Text
text-teal-500Sample Text
Border
border-teal-300Ring
ring-teal-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