Magenta
#CA04DC
PinkColor Codes
All color formats for development
HEX
#CA04DCRGB
rgb(202, 4, 220)HSL
hsl(295, 96%, 44%)OKLCH
oklch(0.601 0.281 323.8)CMYK
cmyk(8%, 98%, 0%, 14%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#B604C6
2#A204B0
3#8D039A
4#790384
5#65026E
6#510258
7#3D0142
8#28012C
9#140016
Tints
Lighter variations
1#E405F8
2#E81FFA
3#EB3BFB
4#EE57FC
5#F173FC
6#F48FFD
7#F6ABFD
8#F9C7FE
9#FCE3FE
Tones
Muted variations
1#C10FD1
2#B81AC6
3#AF25BC
4#A630B1
5#9D3AA6
6#94459B
7#8B5091
8#825B86
9#79657B
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;
}