Violet
#FE8BEB
PinkColor Codes
All color formats for development
HEX
#FE8BEBRGB
rgb(254, 139, 235)HSL
hsl(310, 98%, 77%)OKLCH
oklch(0.792 0.18 333.6)CMYK
cmyk(0%, 45%, 7%, 0%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#FD64E4
2#FD3DDD
3#FD16D6
4#E902C3
5#C202A2
6#9C0282
7#750161
8#4E0141
9#270020
Tints
Lighter variations
1#FE96ED
2#FEA2EF
3#FEAEF1
4#FEB9F3
5#FEC5F5
6#FFD1F7
7#FFDCF9
8#FFE8FB
9#FFF3FD
Tones
Muted variations
1#F891E7
2#F296E3
3#ED9CDF
4#E7A2DB
5#E1A8D8
6#DBADD4
7#D6B3D0
8#D0B9CC
9#CABFC8
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FFF0 #FFF0FC | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FFDC #FFDCF9 | Light backgroundsTable row hoverSkeleton loading |
| 200 | FEBD #FEBDF4 | Secondary backgroundsInput backgroundsDividers |
| 300 | FE8B #FE8BEB | BordersInactive statesPlaceholder text |
| 400 | FD4E #FD4EE0 | Disabled statesSecondary iconsMuted text |
| 500 | FD1C #FD1CD7 | Primary brand colorCTAsActive elementsLinks |
| 600 | DE02 #DE02BA | Hover statesFocus ringsPrimary buttons hover |
| 700 | B102 #B10294 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7E01 #7E0169 | Text on light backgroundsHeadingsStrong borders |
| 900 | 5101 #510143 | Primary textHigh emphasis contentDark headings |
| 950 | 3201 #32012A | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--violet-50: #FFF0FC;
--violet-100: #FFDCF9;
--violet-200: #FEBDF4;
--violet-300: #FE8BEB;
--violet-400: #FD4EE0;
--violet-500: #FD1CD7;
--violet-600: #DE02BA;
--violet-700: #B10294;
--violet-800: #7E0169;
--violet-900: #510143;
--violet-950: #32012A;
}