Magenta
#B21CFD
PurpleColor Codes
All color formats for development
HEX
#B21CFDRGB
rgb(178, 28, 253)HSL
hsl(280, 98%, 55%)OKLCH
oklch(0.597 0.291 309.3)CMYK
cmyk(30%, 89%, 0%, 1%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#A703FA
2#9502DE
3#8202C2
4#7002A7
5#5D018B
6#4A016F
7#380153
8#250138
9#13001C
Tints
Lighter variations
1#B933FD
2#C149FD
3#C960FD
4#D177FE
5#D88DFE
6#E0A4FE
7#E8BBFE
8#F0D2FF
9#F7E8FF
Tones
Muted variations
1#AE27F1
2#AA32E6
3#A63EDB
4#A349D0
5#9F54C4
6#9B5FB9
7#976BAE
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 | F3DC #F3DCFF | Light backgroundsTable row hoverSkeleton loading |
| 200 | E9BD #E9BDFE | Secondary backgroundsInput backgroundsDividers |
| 300 | D88B #D88BFE | BordersInactive statesPlaceholder text |
| 400 | C34E #C34EFD | Disabled statesSecondary iconsMuted text |
| 500 | B21C #B21CFD | Primary brand colorCTAsActive elementsLinks |
| 600 | 9502 #9502DE | Hover statesFocus ringsPrimary buttons hover |
| 700 | 7602 #7602B1 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 5501 #55017E | Text on light backgroundsHeadingsStrong borders |
| 900 | 3601 #360151 | Primary textHigh emphasis contentDark headings |
| 950 | 2201 #220132 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--magenta-50: #FAF0FF;
--magenta-100: #F3DCFF;
--magenta-200: #E9BDFE;
--magenta-300: #D88BFE;
--magenta-400: #C34EFD;
--magenta-500: #B21CFD;
--magenta-600: #9502DE;
--magenta-700: #7602B1;
--magenta-800: #55017E;
--magenta-900: #360151;
--magenta-950: #220132;
}