← Back to All Colors
Tailwind Amber Color Palette
Rich golden tones, ideal for warnings, badges, and premium accents.
Click any button to copy className, HEX, RGB, HSL, or OKLCH.
50
amber-50
#fffbeb
100
amber-100
#fef3c7
200
amber-200
#fde68a
300
amber-300
#fcd34d
400
amber-400
#fbbf24
500
amber-500
#f59e0b
600
amber-600
#d97706
700
amber-700
#b45309
800
amber-800
#92400e
900
amber-900
#78350f
950
amber-950
#451a03
Quick Reference
| Shade | Class | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| amber-50 | #fffbeb | rgb(255, 251, 235) | hsl(48, 100%, 96%) | oklch(0.987 0.022 95.277) | |
| amber-100 | #fef3c7 | rgb(254, 243, 199) | hsl(48, 96%, 89%) | oklch(0.962 0.059 95.617) | |
| amber-200 | #fde68a | rgb(253, 230, 138) | hsl(48, 97%, 77%) | oklch(0.924 0.12 95.746) | |
| amber-300 | #fcd34d | rgb(252, 211, 77) | hsl(46, 97%, 65%) | oklch(0.879 0.169 91.605) | |
| amber-400 | #fbbf24 | rgb(251, 191, 36) | hsl(43, 96%, 56%) | oklch(0.828 0.189 84.429) | |
| amber-500 | #f59e0b | rgb(245, 158, 11) | hsl(38, 92%, 50%) | oklch(0.769 0.188 70.08) | |
| amber-600 | #d97706 | rgb(217, 119, 6) | hsl(32, 95%, 44%) | oklch(0.666 0.179 58.318) | |
| amber-700 | #b45309 | rgb(180, 83, 9) | hsl(26, 90%, 37%) | oklch(0.555 0.163 48.998) | |
| amber-800 | #92400e | rgb(146, 64, 14) | hsl(23, 82%, 31%) | oklch(0.473 0.137 46.201) | |
| amber-900 | #78350f | rgb(120, 53, 15) | hsl(22, 78%, 26%) | oklch(0.414 0.112 45.904) | |
| amber-950 | #451a03 | rgb(69, 26, 3) | hsl(21, 92%, 14%) | oklch(0.279 0.077 45.635) |
Usage Examples
Background
bg-amber-500Text
text-amber-500Sample Text
Border
border-amber-300Ring
ring-amber-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