Magenta
#E81EFA
PinkColor Codes
All color formats for development
HEX
#E81EFARGB
rgb(232, 30, 250)HSL
hsl(295, 96%, 55%)OKLCH
oklch(0.671 0.303 324.2)CMYK
cmyk(7%, 88%, 0%, 2%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#E305F7
2#CA04DC
3#B104C0
4#9703A5
5#7E0389
6#65026E
7#4C0252
8#320137
9#19011B
Tints
Lighter variations
1#EA35FB
2#ED4BFB
3#EF62FC
4#F178FC
5#F48FFD
6#F6A5FD
7#F8BCFE
8#FAD2FE
9#FDE9FF
Tones
Muted variations
1#DF29EF
2#D634E4
3#CD3FD9
4#C34ACE
5#BA55C3
6#B160B8
7#A86BAD
8#9F76A2
9#958197
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FDF0 #FDF0FF | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FBDC #FBDCFE | Light backgroundsTable row hoverSkeleton loading |
| 200 | F8BE #F8BEFE | Secondary backgroundsInput backgroundsDividers |
| 300 | F38C #F38CFD | BordersInactive statesPlaceholder text |
| 400 | ED50 #ED50FB | Disabled statesSecondary iconsMuted text |
| 500 | E81E #E81EFA | Primary brand colorCTAsActive elementsLinks |
| 600 | CA04 #CA04DC | Hover statesFocus ringsPrimary buttons hover |
| 700 | A104 #A104AF | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7303 #73037D | Text on light backgroundsHeadingsStrong borders |
| 900 | 4902 #490250 | Primary textHigh emphasis contentDark headings |
| 950 | 2E01 #2E0132 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--magenta-50: #FDF0FF;
--magenta-100: #FBDCFE;
--magenta-200: #F8BEFE;
--magenta-300: #F38CFD;
--magenta-400: #ED50FB;
--magenta-500: #E81EFA;
--magenta-600: #CA04DC;
--magenta-700: #A104AF;
--magenta-800: #73037D;
--magenta-900: #490250;
--magenta-950: #2E0132;
}