Magenta
#DB20F8
PinkColor Codes
All color formats for development
HEX
#DB20F8RGB
rgb(219, 32, 248)HSL
hsl(292, 94%, 55%)OKLCH
oklch(0.652 0.297 321.4)CMYK
cmyk(12%, 87%, 0%, 3%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#D508F5
2#BE07DA
3#A606BE
4#8E05A3
5#760488
6#5F036D
7#470352
8#2F0236
9#18011B
Tints
Lighter variations
1#DF37F9
2#E24DF9
3#E663FA
4#EA79FB
5#ED90FC
6#F1A6FC
7#F4BCFD
8#F8D2FE
9#FBE9FE
Tones
Muted variations
1#D32BED
2#CC36E3
3#C441D8
4#BC4CCD
5#B456C2
6#AC61B7
7#A46CAD
8#9C77A2
9#948197
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FDF0 #FDF0FF | BackgroundsSubtle highlightsCard backgrounds |
| 100 | F9DC #F9DCFE | Light backgroundsTable row hoverSkeleton loading |
| 200 | F5BF #F5BFFD | Secondary backgroundsInput backgroundsDividers |
| 300 | ED8D #ED8DFB | BordersInactive statesPlaceholder text |
| 400 | E352 #E352FA | Disabled statesSecondary iconsMuted text |
| 500 | DB20 #DB20F8 | Primary brand colorCTAsActive elementsLinks |
| 600 | BE07 #BE07DA | Hover statesFocus ringsPrimary buttons hover |
| 700 | 9705 #9705AD | Active/pressed statesDark mode accentsSecondary text |
| 800 | 6C04 #6C047C | Text on light backgroundsHeadingsStrong borders |
| 900 | 4502 #45024F | Primary textHigh emphasis contentDark headings |
| 950 | 2B02 #2B0231 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--magenta-50: #FDF0FF;
--magenta-100: #F9DCFE;
--magenta-200: #F5BFFD;
--magenta-300: #ED8DFB;
--magenta-400: #E352FA;
--magenta-500: #DB20F8;
--magenta-600: #BE07DA;
--magenta-700: #9705AD;
--magenta-800: #6C047C;
--magenta-900: #45024F;
--magenta-950: #2B0231;
}