← Back to All Colors
Tailwind Blue Color Palette
Professional and trustworthy, the most popular color for UI design and branding.
Click any button to copy className, HEX, RGB, HSL, or OKLCH.
50
blue-50
#eff6ff
100
blue-100
#dbeafe
200
blue-200
#bfdbfe
300
blue-300
#93c5fd
400
blue-400
#60a5fa
500
blue-500
#3b82f6
600
blue-600
#2563eb
700
blue-700
#1d4ed8
800
blue-800
#1e40af
900
blue-900
#1e3a8a
950
blue-950
#172554
Quick Reference
| Shade | Class | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| blue-50 | #eff6ff | rgb(239, 246, 255) | hsl(214, 100%, 97%) | oklch(0.97 0.014 254.604) | |
| blue-100 | #dbeafe | rgb(219, 234, 254) | hsl(214, 95%, 93%) | oklch(0.932 0.032 255.585) | |
| blue-200 | #bfdbfe | rgb(191, 219, 254) | hsl(213, 97%, 87%) | oklch(0.882 0.059 254.128) | |
| blue-300 | #93c5fd | rgb(147, 197, 253) | hsl(212, 96%, 78%) | oklch(0.809 0.105 251.813) | |
| blue-400 | #60a5fa | rgb(96, 165, 250) | hsl(213, 94%, 68%) | oklch(0.707 0.165 254.624) | |
| blue-500 | #3b82f6 | rgb(59, 130, 246) | hsl(217, 91%, 60%) | oklch(0.623 0.214 259.815) | |
| blue-600 | #2563eb | rgb(37, 99, 235) | hsl(221, 83%, 53%) | oklch(0.546 0.245 262.881) | |
| blue-700 | #1d4ed8 | rgb(29, 78, 216) | hsl(224, 76%, 48%) | oklch(0.488 0.243 264.376) | |
| blue-800 | #1e40af | rgb(30, 64, 175) | hsl(226, 71%, 40%) | oklch(0.424 0.199 265.638) | |
| blue-900 | #1e3a8a | rgb(30, 58, 138) | hsl(224, 64%, 33%) | oklch(0.379 0.146 265.522) | |
| blue-950 | #172554 | rgb(23, 37, 84) | hsl(226, 57%, 21%) | oklch(0.282 0.091 267.935) |
Usage Examples
Background
bg-blue-500Text
text-blue-500Sample Text
Border
border-blue-300Ring
ring-blue-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