Violet
#E891F7
PinkColor Codes
All color formats for development
HEX
#E891F7RGB
rgb(232, 145, 247)HSL
hsl(291, 86%, 77%)OKLCH
oklch(0.781 0.167 321.5)CMYK
cmyk(6%, 41%, 0%, 3%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#E06DF4
2#D849F1
3#D024EF
4#BD10DB
5#9D0EB7
6#7E0B92
7#5E086E
8#3F0549
9#1F0325
Tints
Lighter variations
1#EA9DF8
2#ECA8F8
3#EFB3F9
4#F1BEFA
5#F3C8FB
6#F6D3FC
7#F8DEFD
8#FAE9FD
9#FDF4FE
Tones
Muted variations
1#E497F2
2#E19CED
3#DDA1E8
4#DAA6E3
5#D6ABDE
6#D2B0D9
7#CFB5D3
8#CBBACE
9#C8BFC9
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FCF1 #FCF1FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | F8DE #F8DEFD | Light backgroundsTable row hoverSkeleton loading |
| 200 | F2C1 #F2C1FA | Secondary backgroundsInput backgroundsDividers |
| 300 | E892 #E892F7 | BordersInactive statesPlaceholder text |
| 400 | DB59 #DB59F3 | Disabled statesSecondary iconsMuted text |
| 500 | D12A #D12AEF | Primary brand colorCTAsActive elementsLinks |
| 600 | B410 #B410D1 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 8F0C #8F0CA6 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 6609 #660977 | Text on light backgroundsHeadingsStrong borders |
| 900 | 4106 #41064C | Primary textHigh emphasis contentDark headings |
| 950 | 2904 #29042F | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--violet-50: #FCF1FE;
--violet-100: #F8DEFD;
--violet-200: #F2C1FA;
--violet-300: #E892F7;
--violet-400: #DB59F3;
--violet-500: #D12AEF;
--violet-600: #B410D1;
--violet-700: #8F0CA6;
--violet-800: #660977;
--violet-900: #41064C;
--violet-950: #29042F;
}