← Back to All Colors
Tailwind Indigo Color Palette
Deep and creative, great for CTAs, dark themes, and premium designs.
Click any button to copy className, HEX, RGB, HSL, or OKLCH.
50
indigo-50
#eef2ff
100
indigo-100
#e0e7ff
200
indigo-200
#c7d2fe
300
indigo-300
#a5b4fc
400
indigo-400
#818cf8
500
indigo-500
#6366f1
600
indigo-600
#4f46e5
700
indigo-700
#4338ca
800
indigo-800
#3730a3
900
indigo-900
#312e81
950
indigo-950
#1e1b4b
Quick Reference
| Shade | Class | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| indigo-50 | #eef2ff | rgb(238, 242, 255) | hsl(226, 100%, 97%) | oklch(0.962 0.018 272.314) | |
| indigo-100 | #e0e7ff | rgb(224, 231, 255) | hsl(226, 100%, 94%) | oklch(0.93 0.034 272.788) | |
| indigo-200 | #c7d2fe | rgb(199, 210, 254) | hsl(228, 96%, 89%) | oklch(0.87 0.065 274.039) | |
| indigo-300 | #a5b4fc | rgb(165, 180, 252) | hsl(230, 94%, 82%) | oklch(0.785 0.115 274.713) | |
| indigo-400 | #818cf8 | rgb(129, 140, 248) | hsl(234, 89%, 74%) | oklch(0.673 0.182 276.935) | |
| indigo-500 | #6366f1 | rgb(99, 102, 241) | hsl(239, 84%, 67%) | oklch(0.585 0.233 277.117) | |
| indigo-600 | #4f46e5 | rgb(79, 70, 229) | hsl(243, 75%, 59%) | oklch(0.511 0.262 276.966) | |
| indigo-700 | #4338ca | rgb(67, 56, 202) | hsl(245, 58%, 51%) | oklch(0.457 0.24 277.023) | |
| indigo-800 | #3730a3 | rgb(55, 48, 163) | hsl(244, 55%, 41%) | oklch(0.398 0.195 277.366) | |
| indigo-900 | #312e81 | rgb(49, 46, 129) | hsl(242, 47%, 34%) | oklch(0.359 0.144 278.697) | |
| indigo-950 | #1e1b4b | rgb(30, 27, 75) | hsl(244, 47%, 20%) | oklch(0.257 0.09 281.288) |
Usage Examples
Background
bg-indigo-500Text
text-indigo-500Sample Text
Border
border-indigo-300Ring
ring-indigo-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