← Back to All Colors
Tailwind Purple Color Palette
Royal and luxurious, ideal for premium products and creative applications.
Click any button to copy className, HEX, RGB, HSL, or OKLCH.
50
purple-50
#faf5ff
100
purple-100
#f3e8ff
200
purple-200
#e9d5ff
300
purple-300
#d8b4fe
400
purple-400
#c084fc
500
purple-500
#a855f7
600
purple-600
#9333ea
700
purple-700
#7e22ce
800
purple-800
#6b21a8
900
purple-900
#581c87
950
purple-950
#3b0764
Quick Reference
| Shade | Class | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| purple-50 | #faf5ff | rgb(250, 245, 255) | hsl(270, 100%, 98%) | oklch(0.977 0.014 308.299) | |
| purple-100 | #f3e8ff | rgb(243, 232, 255) | hsl(269, 100%, 95%) | oklch(0.946 0.033 307.174) | |
| purple-200 | #e9d5ff | rgb(233, 213, 255) | hsl(269, 100%, 92%) | oklch(0.902 0.063 306.703) | |
| purple-300 | #d8b4fe | rgb(216, 180, 254) | hsl(269, 97%, 85%) | oklch(0.827 0.119 306.383) | |
| purple-400 | #c084fc | rgb(192, 132, 252) | hsl(270, 95%, 75%) | oklch(0.714 0.203 305.504) | |
| purple-500 | #a855f7 | rgb(168, 85, 247) | hsl(271, 91%, 65%) | oklch(0.627 0.265 303.9) | |
| purple-600 | #9333ea | rgb(147, 51, 234) | hsl(271, 81%, 56%) | oklch(0.558 0.288 302.321) | |
| purple-700 | #7e22ce | rgb(126, 34, 206) | hsl(272, 72%, 47%) | oklch(0.496 0.265 301.924) | |
| purple-800 | #6b21a8 | rgb(107, 33, 168) | hsl(273, 67%, 39%) | oklch(0.438 0.218 303.724) | |
| purple-900 | #581c87 | rgb(88, 28, 135) | hsl(274, 66%, 32%) | oklch(0.381 0.176 304.987) | |
| purple-950 | #3b0764 | rgb(59, 7, 100) | hsl(274, 87%, 21%) | oklch(0.291 0.149 302.717) |
Usage Examples
Background
bg-purple-500Text
text-purple-500Sample Text
Border
border-purple-300Ring
ring-purple-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