Magenta
#CC2DEB
PinkColor Codes
All color formats for development
HEX
#CC2DEBRGB
rgb(204, 45, 235)HSL
hsl(290, 83%, 55%)OKLCH
oklch(0.628 0.274 320.2)CMYK
cmyk(13%, 81%, 0%, 8%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#C415E7
2#AE13CD
3#9811B4
4#830E9A
5#6D0C80
6#570A67
7#41074D
8#2C0533
9#16021A
Tints
Lighter variations
1#D142ED
2#D657EF
3#DB6CF1
4#E081F3
5#E596F5
6#EAABF7
7#F0C0F9
8#F5D5FB
9#FAEAFD
Tones
Muted variations
1#C537E2
2#BF40D8
3#B94ACF
4#B253C5
5#AC5DBC
6#A666B2
7#9F70A9
8#99799F
9#938396
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FCF1 #FCF1FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | F7DE #F7DEFC | Light backgroundsTable row hoverSkeleton loading |
| 200 | F0C2 #F0C2F9 | Secondary backgroundsInput backgroundsDividers |
| 300 | E594 #E594F5 | BordersInactive statesPlaceholder text |
| 400 | D75C #D75CF0 | Disabled statesSecondary iconsMuted text |
| 500 | CC2D #CC2DEB | Primary brand colorCTAsActive elementsLinks |
| 600 | AE13 #AE13CD | Hover statesFocus ringsPrimary buttons hover |
| 700 | 8B0F #8B0FA3 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 630B #630B75 | Text on light backgroundsHeadingsStrong borders |
| 900 | 3F07 #3F074B | Primary textHigh emphasis contentDark headings |
| 950 | 2804 #28042F | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--magenta-50: #FCF1FE;
--magenta-100: #F7DEFC;
--magenta-200: #F0C2F9;
--magenta-300: #E594F5;
--magenta-400: #D75CF0;
--magenta-500: #CC2DEB;
--magenta-600: #AE13CD;
--magenta-700: #8B0FA3;
--magenta-800: #630B75;
--magenta-900: #3F074B;
--magenta-950: #28042F;
}