← Back to All Colors
Tailwind Yellow Color Palette
Bright and optimistic, perfect for alerts, highlights, and attention-grabbing elements.
Click any button to copy className, HEX, RGB, HSL, or OKLCH.
50
yellow-50
#fefce8
100
yellow-100
#fef9c3
200
yellow-200
#fef08a
300
yellow-300
#fde047
400
yellow-400
#facc15
500
yellow-500
#eab308
600
yellow-600
#ca8a04
700
yellow-700
#a16207
800
yellow-800
#854d0e
900
yellow-900
#713f12
950
yellow-950
#422006
Quick Reference
| Shade | Class | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| yellow-50 | #fefce8 | rgb(254, 252, 232) | hsl(55, 92%, 95%) | oklch(0.987 0.026 102.212) | |
| yellow-100 | #fef9c3 | rgb(254, 249, 195) | hsl(55, 97%, 88%) | oklch(0.973 0.071 103.193) | |
| yellow-200 | #fef08a | rgb(254, 240, 138) | hsl(53, 98%, 77%) | oklch(0.945 0.129 101.54) | |
| yellow-300 | #fde047 | rgb(253, 224, 71) | hsl(50, 98%, 64%) | oklch(0.905 0.182 98.111) | |
| yellow-400 | #facc15 | rgb(250, 204, 21) | hsl(48, 96%, 53%) | oklch(0.852 0.199 91.936) | |
| yellow-500 | #eab308 | rgb(234, 179, 8) | hsl(45, 93%, 47%) | oklch(0.795 0.184 86.047) | |
| yellow-600 | #ca8a04 | rgb(202, 138, 4) | hsl(41, 96%, 40%) | oklch(0.681 0.162 75.834) | |
| yellow-700 | #a16207 | rgb(161, 98, 7) | hsl(35, 92%, 33%) | oklch(0.554 0.135 66.442) | |
| yellow-800 | #854d0e | rgb(133, 77, 14) | hsl(32, 81%, 29%) | oklch(0.476 0.114 61.907) | |
| yellow-900 | #713f12 | rgb(113, 63, 18) | hsl(28, 73%, 26%) | oklch(0.421 0.095 57.708) | |
| yellow-950 | #422006 | rgb(66, 32, 6) | hsl(26, 83%, 14%) | oklch(0.286 0.066 53.813) |
Usage Examples
Background
bg-yellow-500Text
text-yellow-500Sample Text
Border
border-yellow-300Ring
ring-yellow-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