Magenta
#B020F8
PurpleColor Codes
All color formats for development
HEX
#B020F8RGB
rgb(176, 32, 248)HSL
hsl(280, 94%, 55%)OKLCH
oklch(0.593 0.284 309.6)CMYK
cmyk(29%, 87%, 0%, 3%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#A608F5
2#9307DA
3#8106BE
4#6F05A3
5#5C0488
6#4A036D
7#370352
8#250236
9#12011B
Tints
Lighter variations
1#B837F9
2#C04DF9
3#C863FA
4#D079FB
5#D890FC
6#DFA6FC
7#E7BCFD
8#EFD2FE
9#F7E9FE
Tones
Muted variations
1#AD2BED
2#A936E3
3#A541D8
4#A24CCD
5#9E56C2
6#9B61B7
7#976CAD
8#9377A2
9#908197
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FAF0 #FAF0FF | BackgroundsSubtle highlightsCard backgrounds |
| 100 | F3DC #F3DCFE | Light backgroundsTable row hoverSkeleton loading |
| 200 | E8BF #E8BFFD | Secondary backgroundsInput backgroundsDividers |
| 300 | D78D #D78DFB | BordersInactive statesPlaceholder text |
| 400 | C252 #C252FA | Disabled statesSecondary iconsMuted text |
| 500 | B020 #B020F8 | Primary brand colorCTAsActive elementsLinks |
| 600 | 9307 #9307DA | Hover statesFocus ringsPrimary buttons hover |
| 700 | 7505 #7505AD | Active/pressed statesDark mode accentsSecondary text |
| 800 | 5404 #54047C | Text on light backgroundsHeadingsStrong borders |
| 900 | 3602 #36024F | Primary textHigh emphasis contentDark headings |
| 950 | 2102 #210231 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--magenta-50: #FAF0FF;
--magenta-100: #F3DCFE;
--magenta-200: #E8BFFD;
--magenta-300: #D78DFB;
--magenta-400: #C252FA;
--magenta-500: #B020F8;
--magenta-600: #9307DA;
--magenta-700: #7505AD;
--magenta-800: #54047C;
--magenta-900: #36024F;
--magenta-950: #210231;
}