Magenta
#DC04CE
PinkColor Codes
All color formats for development
HEX
#DC04CERGB
rgb(220, 4, 206)HSL
hsl(304, 96%, 44%)OKLCH
oklch(0.62 0.279 331.9)CMYK
cmyk(0%, 98%, 6%, 14%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#C604B9
2#B004A4
3#9A0390
4#84037B
5#6E0267
6#580252
7#42013E
8#2C0129
9#160015
Tints
Lighter variations
1#F805E8
2#FA1FEC
3#FB3BEE
4#FC57F1
5#FC73F3
6#FD8FF5
7#FDABF8
8#FEC7FA
9#FEE3FD
Tones
Muted variations
1#D10FC4
2#C61ABB
3#BC25B2
4#B130A8
5#A63A9F
6#9B4596
7#91508C
8#865B83
9#7B657A
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FFF0 #FFF0FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FEDC #FEDCFC | Light backgroundsTable row hoverSkeleton loading |
| 200 | FEBE #FEBEF9 | Secondary backgroundsInput backgroundsDividers |
| 300 | FD8C #FD8CF5 | BordersInactive statesPlaceholder text |
| 400 | FB50 #FB50F0 | Disabled statesSecondary iconsMuted text |
| 500 | FA1E #FA1EEC | Primary brand colorCTAsActive elementsLinks |
| 600 | DC04 #DC04CE | Hover statesFocus ringsPrimary buttons hover |
| 700 | AF04 #AF04A4 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7D03 #7D0375 | Text on light backgroundsHeadingsStrong borders |
| 900 | 5002 #50024B | Primary textHigh emphasis contentDark headings |
| 950 | 3201 #32012F | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--magenta-50: #FFF0FE;
--magenta-100: #FEDCFC;
--magenta-200: #FEBEF9;
--magenta-300: #FD8CF5;
--magenta-400: #FB50F0;
--magenta-500: #FA1EEC;
--magenta-600: #DC04CE;
--magenta-700: #AF04A4;
--magenta-800: #7D0375;
--magenta-900: #50024B;
--magenta-950: #32012F;
}