Magenta
#B51CFD
PurpleColor Codes
All color formats for development
HEX
#B51CFDRGB
rgb(181, 28, 253)HSL
hsl(281, 98%, 55%)OKLCH
oklch(0.601 0.291 310.2)CMYK
cmyk(28%, 89%, 0%, 1%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#AC03FA
2#9902DE
3#8502C2
4#7202A7
5#5F018B
6#4C016F
7#390153
8#260138
9#13001C
Tints
Lighter variations
1#BD33FD
2#C449FD
3#CC60FD
4#D377FE
5#DA8DFE
6#E2A4FE
7#E9BBFE
8#F0D2FF
9#F8E8FF
Tones
Muted variations
1#B127F1
2#AD32E6
3#A93EDB
4#A549D0
5#A154C4
6#9D5FB9
7#996BAE
8#9476A3
9#908197
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FAF0 #FAF0FF | BackgroundsSubtle highlightsCard backgrounds |
| 100 | F4DC #F4DCFF | Light backgroundsTable row hoverSkeleton loading |
| 200 | EABD #EABDFE | Secondary backgroundsInput backgroundsDividers |
| 300 | D98B #D98BFE | BordersInactive statesPlaceholder text |
| 400 | C64E #C64EFD | Disabled statesSecondary iconsMuted text |
| 500 | B51C #B51CFD | Primary brand colorCTAsActive elementsLinks |
| 600 | 9902 #9902DE | Hover statesFocus ringsPrimary buttons hover |
| 700 | 7902 #7902B1 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 5701 #57017E | Text on light backgroundsHeadingsStrong borders |
| 900 | 3701 #370151 | Primary textHigh emphasis contentDark headings |
| 950 | 2301 #230132 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--magenta-50: #FAF0FF;
--magenta-100: #F4DCFF;
--magenta-200: #EABDFE;
--magenta-300: #D98BFE;
--magenta-400: #C64EFD;
--magenta-500: #B51CFD;
--magenta-600: #9902DE;
--magenta-700: #7902B1;
--magenta-800: #57017E;
--magenta-900: #370151;
--magenta-950: #230132;
}