Violet
#EE4FFC
PinkColor Codes
All color formats for development
HEX
#EE4FFCRGB
rgb(238, 79, 252)HSL
hsl(295, 97%, 65%)OKLCH
oklch(0.71 0.268 324.4)CMYK
cmyk(6%, 69%, 0%, 1%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#EB2FFC
2#E80EFB
3#D203E5
4#B403C4
5#9602A3
6#780283
7#5A0162
8#3C0141
9#1E0021
Tints
Lighter variations
1#F061FD
2#F172FD
3#F384FD
4#F596FD
5#F6A7FE
6#F8B9FE
7#FACAFE
8#FCDCFE
9#FDEDFF
Tones
Muted variations
1#E758F4
2#DF60EB
3#D869E2
4#D172DA
5#CA7AD1
6#C383C8
7#BB8CC0
8#B494B7
9#AD9DAE
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FEF0 #FEF0FF | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FCDC #FCDCFE | Light backgroundsTable row hoverSkeleton loading |
| 200 | F9BE #F9BEFE | Secondary backgroundsInput backgroundsDividers |
| 300 | F48B #F48BFD | BordersInactive statesPlaceholder text |
| 400 | EE4F #EE4FFC | Disabled statesSecondary iconsMuted text |
| 500 | E91D #E91DFC | Primary brand colorCTAsActive elementsLinks |
| 600 | CB03 #CB03DD | Hover statesFocus ringsPrimary buttons hover |
| 700 | A103 #A103B0 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7302 #73027E | Text on light backgroundsHeadingsStrong borders |
| 900 | 4A01 #4A0150 | Primary textHigh emphasis contentDark headings |
| 950 | 2E01 #2E0132 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--violet-50: #FEF0FF;
--violet-100: #FCDCFE;
--violet-200: #F9BEFE;
--violet-300: #F48BFD;
--violet-400: #EE4FFC;
--violet-500: #E91DFC;
--violet-600: #CB03DD;
--violet-700: #A103B0;
--violet-800: #73027E;
--violet-900: #4A0150;
--violet-950: #2E0132;
}