Lavender
#E0C1FA
PurpleColor Codes
All color formats for development
HEX
#E0C1FARGB
rgb(224, 193, 250)HSL
hsl(273, 85%, 87%)OKLCH
oklch(0.856 0.084 309.3)CMYK
cmyk(10%, 23%, 0%, 2%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#CC99F7
2#B870F3
3#A447F0
4#8F1EED
5#7811CD
6#600DA4
7#480A7B
8#300752
9#180329
Tints
Lighter variations
1#E4C8FB
2#E7CEFB
3#EAD4FC
4#EDDAFC
5#F0E0FD
6#F3E6FD
7#F6EDFE
8#F9F3FE
9#FCF9FF
Tones
Muted variations
1#E0C4F7
2#E0C7F4
3#E0CAF2
4#E0CDEF
5#DFD0EC
6#DFD3E9
7#DFD5E6
8#DED8E3
9#DEDBE1
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F8F1 #F8F1FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | EFDE #EFDEFC | Light backgroundsTable row hoverSkeleton loading |
| 200 | E1C2 #E1C2FA | Secondary backgroundsInput backgroundsDividers |
| 300 | C992 #C992F6 | BordersInactive statesPlaceholder text |
| 400 | AD5A #AD5AF2 | Disabled statesSecondary iconsMuted text |
| 500 | 962B #962BEE | Primary brand colorCTAsActive elementsLinks |
| 600 | 7A11 #7A11D0 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 610D #610DA5 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 450A #450A76 | Text on light backgroundsHeadingsStrong borders |
| 900 | 2C06 #2C064B | Primary textHigh emphasis contentDark headings |
| 950 | 1C04 #1C042F | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--lavender-50: #F8F1FE;
--lavender-100: #EFDEFC;
--lavender-200: #E1C2FA;
--lavender-300: #C992F6;
--lavender-400: #AD5AF2;
--lavender-500: #962BEE;
--lavender-600: #7A11D0;
--lavender-700: #610DA5;
--lavender-800: #450A76;
--lavender-900: #2C064B;
--lavender-950: #1C042F;
}