Purple
#9804DC
PurpleColor Codes
All color formats for development
HEX
#9804DCRGB
rgb(152, 4, 220)HSL
hsl(281, 96%, 44%)OKLCH
oklch(0.529 0.267 308.9)CMYK
cmyk(31%, 98%, 0%, 14%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#8904C6
2#7904B0
3#6A039A
4#5B0384
5#4C026E
6#3D0258
7#2E0142
8#1E012C
9#0F0016
Tints
Lighter variations
1#AB05F8
2#B51FFA
3#BE3BFB
4#C757FC
5#D173FC
6#DA8FFD
7#E3ABFD
8#ECC7FE
9#F6E3FE
Tones
Muted variations
1#940FD1
2#901AC6
3#8C25BC
4#8830B1
5#843AA6
6#80459B
7#7C5091
8#785B86
9#74657B
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 | EABE #EABEFE | Secondary backgroundsInput backgroundsDividers |
| 300 | D98C #D98CFD | BordersInactive statesPlaceholder text |
| 400 | C550 #C550FB | Disabled statesSecondary iconsMuted text |
| 500 | B51E #B51EFA | Primary brand colorCTAsActive elementsLinks |
| 600 | 9804 #9804DC | Hover statesFocus ringsPrimary buttons hover |
| 700 | 7904 #7904AF | Active/pressed statesDark mode accentsSecondary text |
| 800 | 5603 #56037D | Text on light backgroundsHeadingsStrong borders |
| 900 | 3702 #370250 | Primary textHigh emphasis contentDark headings |
| 950 | 2201 #220132 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--purple-50: #FAF0FF;
--purple-100: #F3DCFE;
--purple-200: #EABEFE;
--purple-300: #D98CFD;
--purple-400: #C550FB;
--purple-500: #B51EFA;
--purple-600: #9804DC;
--purple-700: #7904AF;
--purple-800: #56037D;
--purple-900: #370250;
--purple-950: #220132;
}