← Back to All Colors
Tailwind Violet Color Palette
Playful and premium, excellent for creative brands and modern designs.
Click any button to copy className, HEX, RGB, HSL, or OKLCH.
50
violet-50
#f5f3ff
100
violet-100
#ede9fe
200
violet-200
#ddd6fe
300
violet-300
#c4b5fd
400
violet-400
#a78bfa
500
violet-500
#8b5cf6
600
violet-600
#7c3aed
700
violet-700
#6d28d9
800
violet-800
#5b21b6
900
violet-900
#4c1d95
950
violet-950
#2e1065
Quick Reference
| Shade | Class | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| violet-50 | #f5f3ff | rgb(245, 243, 255) | hsl(250, 100%, 98%) | oklch(0.969 0.016 293.756) | |
| violet-100 | #ede9fe | rgb(237, 233, 254) | hsl(251, 91%, 95%) | oklch(0.943 0.029 294.588) | |
| violet-200 | #ddd6fe | rgb(221, 214, 254) | hsl(251, 95%, 92%) | oklch(0.894 0.057 293.283) | |
| violet-300 | #c4b5fd | rgb(196, 181, 253) | hsl(253, 95%, 85%) | oklch(0.811 0.111 293.571) | |
| violet-400 | #a78bfa | rgb(167, 139, 250) | hsl(255, 92%, 76%) | oklch(0.702 0.183 293.541) | |
| violet-500 | #8b5cf6 | rgb(139, 92, 246) | hsl(258, 90%, 66%) | oklch(0.606 0.25 292.717) | |
| violet-600 | #7c3aed | rgb(124, 58, 237) | hsl(262, 83%, 58%) | oklch(0.541 0.281 293.009) | |
| violet-700 | #6d28d9 | rgb(109, 40, 217) | hsl(263, 70%, 50%) | oklch(0.491 0.27 292.581) | |
| violet-800 | #5b21b6 | rgb(91, 33, 182) | hsl(263, 69%, 42%) | oklch(0.432 0.232 292.759) | |
| violet-900 | #4c1d95 | rgb(76, 29, 149) | hsl(263, 67%, 35%) | oklch(0.38 0.189 293.745) | |
| violet-950 | #2e1065 | rgb(46, 16, 101) | hsl(261, 73%, 23%) | oklch(0.283 0.141 291.089) |
Usage Examples
Background
bg-violet-500Text
text-violet-500Sample Text
Border
border-violet-300Ring
ring-violet-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