← Back to All Colors
Tailwind Fuchsia Color Palette
Bold and modern, great for fashion, entertainment, and eye-catching designs.
Click any button to copy className, HEX, RGB, HSL, or OKLCH.
50
fuchsia-50
#fdf4ff
100
fuchsia-100
#fae8ff
200
fuchsia-200
#f5d0fe
300
fuchsia-300
#f0abfc
400
fuchsia-400
#e879f9
500
fuchsia-500
#d946ef
600
fuchsia-600
#c026d3
700
fuchsia-700
#a21caf
800
fuchsia-800
#86198f
900
fuchsia-900
#701a75
950
fuchsia-950
#4a044e
Quick Reference
| Shade | Class | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| fuchsia-50 | #fdf4ff | rgb(253, 244, 255) | hsl(289, 100%, 98%) | oklch(0.977 0.017 320.058) | |
| fuchsia-100 | #fae8ff | rgb(250, 232, 255) | hsl(287, 100%, 95%) | oklch(0.952 0.037 318.852) | |
| fuchsia-200 | #f5d0fe | rgb(245, 208, 254) | hsl(288, 96%, 91%) | oklch(0.903 0.076 319.62) | |
| fuchsia-300 | #f0abfc | rgb(240, 171, 252) | hsl(291, 93%, 83%) | oklch(0.833 0.145 321.434) | |
| fuchsia-400 | #e879f9 | rgb(232, 121, 249) | hsl(292, 91%, 73%) | oklch(0.74 0.238 322.16) | |
| fuchsia-500 | #d946ef | rgb(217, 70, 239) | hsl(292, 84%, 61%) | oklch(0.667 0.295 322.15) | |
| fuchsia-600 | #c026d3 | rgb(192, 38, 211) | hsl(293, 69%, 49%) | oklch(0.591 0.293 322.896) | |
| fuchsia-700 | #a21caf | rgb(162, 28, 175) | hsl(295, 72%, 40%) | oklch(0.518 0.253 323.949) | |
| fuchsia-800 | #86198f | rgb(134, 25, 143) | hsl(295, 70%, 33%) | oklch(0.452 0.211 324.591) | |
| fuchsia-900 | #701a75 | rgb(112, 26, 117) | hsl(296, 64%, 28%) | oklch(0.401 0.17 325.612) | |
| fuchsia-950 | #4a044e | rgb(74, 4, 78) | hsl(297, 90%, 16%) | oklch(0.293 0.136 325.661) |
Usage Examples
Background
bg-fuchsia-500Text
text-fuchsia-500Sample Text
Border
border-fuchsia-300Ring
ring-fuchsia-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