Lavender
#E7EDF4
BlueColor Codes
All color formats for development
HEX
#E7EDF4RGB
rgb(231, 237, 244)HSL
hsl(212, 37%, 93%)OKLCH
oklch(0.944 0.011 252.1)CMYK
cmyk(5%, 3%, 0%, 4%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#C6D4E5
2#A6BCD6
3#85A4C7
4#658CB8
5#4B74A2
6#3C5D82
7#2D4561
8#1E2E41
9#0F1720
Tints
Lighter variations
1#E9EFF5
2#EBF0F6
3#EEF2F7
4#F0F4F8
5#F3F6F9
6#F5F8FB
7#F8FAFC
8#FAFBFD
9#FDFDFE
Tones
Muted variations
1#E7EDF3
2#E8EDF2
3#E9EDF2
4#E9EDF1
5#EAEDF0
6#EBEDF0
7#EBEDEF
8#ECEDEE
9#ECEDEE
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F5F7 #F5F7FA | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E7ED #E7EDF4 | Light backgroundsTable row hoverSkeleton loading |
| 200 | D2DD #D2DDEA | Secondary backgroundsInput backgroundsDividers |
| 300 | AFC3 #AFC3DA | BordersInactive statesPlaceholder text |
| 400 | 85A4 #85A4C7 | Disabled statesSecondary iconsMuted text |
| 500 | 6289 #6289B7 | Primary brand colorCTAsActive elementsLinks |
| 600 | 476D #476D9A | Hover statesFocus ringsPrimary buttons hover |
| 700 | 3857 #38577A | Active/pressed statesDark mode accentsSecondary text |
| 800 | 283E #283E57 | Text on light backgroundsHeadingsStrong borders |
| 900 | 1A28 #1A2838 | Primary textHigh emphasis contentDark headings |
| 950 | 1019 #101923 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--lavender-50: #F5F7FA;
--lavender-100: #E7EDF4;
--lavender-200: #D2DDEA;
--lavender-300: #AFC3DA;
--lavender-400: #85A4C7;
--lavender-500: #6289B7;
--lavender-600: #476D9A;
--lavender-700: #38577A;
--lavender-800: #283E57;
--lavender-900: #1A2838;
--lavender-950: #101923;
}