Magenta
#DA2FE9
PinkColor Codes
All color formats for development
HEX
#DA2FE9RGB
rgb(218, 47, 233)HSL
hsl(295, 81%, 55%)OKLCH
oklch(0.648 0.276 324.4)CMYK
cmyk(6%, 80%, 0%, 9%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#D318E4
2#BC15CB
3#A413B2
4#8D1098
5#750D7F
6#5E0B66
7#46084C
8#2F0533
9#170319
Tints
Lighter variations
1#DD44EB
2#E159EE
3#E56EF0
4#E982F2
5#EC97F4
6#F0ACF6
7#F4C1F8
8#F8D5FB
9#FBEAFD
Tones
Muted variations
1#D239E0
2#CA42D7
3#C24BCD
4#BB54C4
5#B35EBB
6#AB67B1
7#A370A8
8#9C7A9F
9#948396
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FDF1 #FDF1FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | F9DF #F9DFFC | Light backgroundsTable row hoverSkeleton loading |
| 200 | F4C3 #F4C3F9 | Secondary backgroundsInput backgroundsDividers |
| 300 | EC95 #EC95F4 | BordersInactive statesPlaceholder text |
| 400 | E25D #E25DEE | Disabled statesSecondary iconsMuted text |
| 500 | DA2F #DA2FE9 | Primary brand colorCTAsActive elementsLinks |
| 600 | BC15 #BC15CB | Hover statesFocus ringsPrimary buttons hover |
| 700 | 9511 #9511A2 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 6B0C #6B0C73 | Text on light backgroundsHeadingsStrong borders |
| 900 | 4408 #44084A | Primary textHigh emphasis contentDark headings |
| 950 | 2B05 #2B052E | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--magenta-50: #FDF1FE;
--magenta-100: #F9DFFC;
--magenta-200: #F4C3F9;
--magenta-300: #EC95F4;
--magenta-400: #E25DEE;
--magenta-500: #DA2FE9;
--magenta-600: #BC15CB;
--magenta-700: #9511A2;
--magenta-800: #6B0C73;
--magenta-900: #44084A;
--magenta-950: #2B052E;
}