Lavender
#E4E5F7
BlueColor Codes
All color formats for development
HEX
#E4E5F7RGB
rgb(228, 229, 247)HSL
hsl(237, 54%, 93%)OKLCH
oklch(0.926 0.024 283.4)CMYK
cmyk(8%, 7%, 0%, 3%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#BFC1EC
2#9A9EE1
3#767BD6
4#5158CB
5#373DB7
6#2C3192
7#21256E
8#161849
9#0B0C25
Tints
Lighter variations
1#E6E7F8
2#E9EAF8
3#ECECF9
4#EFEFFA
5#F1F2FB
6#F4F4FC
7#F7F7FD
8#FAFAFD
9#FCFCFE
Tones
Muted variations
1#E4E5F6
2#E5E6F5
3#E6E7F4
4#E7E8F3
5#E8E9F2
6#E9EAF1
7#EAEBF0
8#EBEBEF
9#ECECEE
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F3F4 #F3F4FB | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E4E4 #E4E4F7 | Light backgroundsTable row hoverSkeleton loading |
| 200 | CCCE #CCCEF0 | Secondary backgroundsInput backgroundsDividers |
| 300 | A5A8 #A5A8E4 | BordersInactive statesPlaceholder text |
| 400 | 767A #767AD6 | Disabled statesSecondary iconsMuted text |
| 500 | 4E54 #4E54CA | Primary brand colorCTAsActive elementsLinks |
| 600 | 343A #343AAD | Hover statesFocus ringsPrimary buttons hover |
| 700 | 292E #292E89 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 1D21 #1D2162 | Text on light backgroundsHeadingsStrong borders |
| 900 | 1315 #13153F | Primary textHigh emphasis contentDark headings |
| 950 | 0C0D #0C0D27 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--lavender-50: #F3F4FB;
--lavender-100: #E4E4F7;
--lavender-200: #CCCEF0;
--lavender-300: #A5A8E4;
--lavender-400: #767AD6;
--lavender-500: #4E54CA;
--lavender-600: #343AAD;
--lavender-700: #292E89;
--lavender-800: #1D2162;
--lavender-900: #13153F;
--lavender-950: #0C0D27;
}