Purple
#940DD3
PurpleColor Codes
All color formats for development
HEX
#940DD3RGB
rgb(148, 13, 211)HSL
hsl(281, 88%, 44%)OKLCH
oklch(0.518 0.257 309.6)CMYK
cmyk(30%, 94%, 0%, 17%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#860CBE
2#770BA9
3#680994
4#59087F
5#4A0769
6#3B0554
7#2D043F
8#1E032A
9#0F0115
Tints
Lighter variations
1#A70FEE
2#B228F1
3#BB43F3
4#C55EF5
5#CF79F6
6#D894F8
7#E2AEFA
8#ECC9FC
9#F5E4FD
Tones
Muted variations
1#9117C9
2#8D21BF
3#8A2BB5
4#8635AB
5#823FA2
6#7F4998
7#7B538E
8#775C84
9#74667A
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FAF1 #FAF1FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | F3DD #F3DDFD | Light backgroundsTable row hoverSkeleton loading |
| 200 | E9C1 #E9C1FB | Secondary backgroundsInput backgroundsDividers |
| 300 | D791 #D791F8 | BordersInactive statesPlaceholder text |
| 400 | C357 #C357F4 | Disabled statesSecondary iconsMuted text |
| 500 | B127 #B127F1 | Primary brand colorCTAsActive elementsLinks |
| 600 | 940D #940DD3 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 760B #760BA8 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 5408 #540878 | Text on light backgroundsHeadingsStrong borders |
| 900 | 3605 #36054D | Primary textHigh emphasis contentDark headings |
| 950 | 2203 #220330 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--purple-50: #FAF1FE;
--purple-100: #F3DDFD;
--purple-200: #E9C1FB;
--purple-300: #D791F8;
--purple-400: #C357F4;
--purple-500: #B127F1;
--purple-600: #940DD3;
--purple-700: #760BA8;
--purple-800: #540878;
--purple-900: #36054D;
--purple-950: #220330;
}