Magenta
#C50AD6
PinkColor Codes
All color formats for development
HEX
#C50AD6RGB
rgb(197, 10, 214)HSL
hsl(295, 91%, 44%)OKLCH
oklch(0.591 0.274 323.9)CMYK
cmyk(8%, 95%, 0%, 16%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#B209C1
2#9E08AB
3#8A0796
4#760681
5#63056B
6#4F0456
7#3B0340
8#27022B
9#140115
Tints
Lighter variations
1#DE0BF2
2#E325F5
3#E740F6
4#EA5BF7
5#EE77F9
6#F192FA
7#F5ADFB
8#F8C8FC
9#FCE4FE
Tones
Muted variations
1#BD14CC
2#B41FC2
3#AC29B8
4#A333AD
5#9B3DA3
6#924799
7#8A528F
8#815C85
9#79667A
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FDF0 #FDF0FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FBDD #FBDDFD | Light backgroundsTable row hoverSkeleton loading |
| 200 | F7C0 #F7C0FC | Secondary backgroundsInput backgroundsDividers |
| 300 | F18F #F18FFA | BordersInactive statesPlaceholder text |
| 400 | E955 #E955F7 | Disabled statesSecondary iconsMuted text |
| 500 | E324 #E324F5 | Primary brand colorCTAsActive elementsLinks |
| 600 | C50A #C50AD6 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 9D08 #9D08AA | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7006 #70067A | Text on light backgroundsHeadingsStrong borders |
| 900 | 4804 #48044E | Primary textHigh emphasis contentDark headings |
| 950 | 2D02 #2D0231 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--magenta-50: #FDF0FE;
--magenta-100: #FBDDFD;
--magenta-200: #F7C0FC;
--magenta-300: #F18FFA;
--magenta-400: #E955F7;
--magenta-500: #E324F5;
--magenta-600: #C50AD6;
--magenta-700: #9D08AA;
--magenta-800: #70067A;
--magenta-900: #48044E;
--magenta-950: #2D0231;
}