Violet
#EA94F5
PinkColor Codes
All color formats for development
HEX
#EA94F5RGB
rgb(234, 148, 245)HSL
hsl(293, 83%, 77%)OKLCH
oklch(0.787 0.161 322.8)CMYK
cmyk(4%, 40%, 0%, 4%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#E370F2
2#DB4CEE
3#D428EB
4#C114D8
5#A111B4
6#810D90
7#600A6C
8#400748
9#200324
Tints
Lighter variations
1#EC9EF6
2#EEA9F7
3#F0B4F8
4#F2BFF9
5#F4C9FA
6#F6D4FB
7#F9DFFC
8#FBEAFD
9#FDF4FE
Tones
Muted variations
1#E699F0
2#E29DEB
3#DEA2E6
4#DBA7E2
5#D7ACDD
6#D3B1D8
7#D0B6D3
8#CCBBCE
9#C8BFC9
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FCF1 #FCF1FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | F9DE #F9DEFC | Light backgroundsTable row hoverSkeleton loading |
| 200 | F3C2 #F3C2F9 | Secondary backgroundsInput backgroundsDividers |
| 300 | EA94 #EA94F5 | BordersInactive statesPlaceholder text |
| 400 | DF5C #DF5CF0 | Disabled statesSecondary iconsMuted text |
| 500 | D52D #D52DEB | Primary brand colorCTAsActive elementsLinks |
| 600 | B813 #B813CD | Hover statesFocus ringsPrimary buttons hover |
| 700 | 920F #920FA3 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 680B #680B75 | Text on light backgroundsHeadingsStrong borders |
| 900 | 4307 #43074B | Primary textHigh emphasis contentDark headings |
| 950 | 2A04 #2A042F | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--violet-50: #FCF1FE;
--violet-100: #F9DEFC;
--violet-200: #F3C2F9;
--violet-300: #EA94F5;
--violet-400: #DF5CF0;
--violet-500: #D52DEB;
--violet-600: #B813CD;
--violet-700: #920FA3;
--violet-800: #680B75;
--violet-900: #43074B;
--violet-950: #2A042F;
}