Violet
#E994F4
PinkColor Codes
All color formats for development
HEX
#E994F4RGB
rgb(233, 148, 244)HSL
hsl(293, 81%, 77%)OKLCH
oklch(0.786 0.159 322.8)CMYK
cmyk(5%, 39%, 0%, 4%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#E171F0
2#DA4EEC
3#D22AE9
4#BF16D5
5#9F13B2
6#7F0F8E
7#5F0B6B
8#400747
9#200424
Tints
Lighter variations
1#EB9FF5
2#EDAAF6
3#EFB5F7
4#F2BFF8
5#F4CAF9
6#F6D5FB
7#F8DFFC
8#FBEAFD
9#FDF4FE
Tones
Muted variations
1#E59AEF
2#E19EEA
3#DEA3E6
4#DAA8E1
5#D7ADDC
6#D3B1D7
7#CFB6D3
8#CCBBCE
9#C8C0C9
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FCF1 #FCF1FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | F8DF #F8DFFC | Light backgroundsTable row hoverSkeleton loading |
| 200 | F2C3 #F2C3F9 | Secondary backgroundsInput backgroundsDividers |
| 300 | E995 #E995F4 | BordersInactive statesPlaceholder text |
| 400 | DD5D #DD5DEE | Disabled statesSecondary iconsMuted text |
| 500 | D42F #D42FE9 | Primary brand colorCTAsActive elementsLinks |
| 600 | B615 #B615CB | Hover statesFocus ringsPrimary buttons hover |
| 700 | 9111 #9111A2 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 670C #670C73 | Text on light backgroundsHeadingsStrong borders |
| 900 | 4208 #42084A | Primary textHigh emphasis contentDark headings |
| 950 | 2905 #29052E | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--violet-50: #FCF1FE;
--violet-100: #F8DFFC;
--violet-200: #F2C3F9;
--violet-300: #E995F4;
--violet-400: #DD5DEE;
--violet-500: #D42FE9;
--violet-600: #B615CB;
--violet-700: #9111A2;
--violet-800: #670C73;
--violet-900: #42084A;
--violet-950: #29052E;
}