Lavender
#E0E3FB
BlueColor Codes
All color formats for development
HEX
#E0E3FBRGB
rgb(224, 227, 251)HSL
hsl(233, 77%, 93%)OKLCH
oklch(0.921 0.033 280.1)CMYK
cmyk(11%, 10%, 0%, 2%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#B5BDF5
2#8B97F0
3#6171EB
4#384CE5
5#1B31D2
6#1627A8
7#101D7E
8#0B1354
9#050A2A
Tints
Lighter variations
1#E3E5FB
2#E6E8FC
3#E9EBFC
4#ECEEFD
5#EFF1FD
6#F2F4FD
7#F6F6FE
8#F9F9FE
9#FCFCFF
Tones
Muted variations
1#E1E4FA
2#E2E5F8
3#E4E6F7
4#E5E7F5
5#E6E8F4
6#E8E9F3
7#E9EAF1
8#EAEBF0
9#ECECEF
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F1F3 #F1F3FD | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DFE3 #DFE3FB | Light backgroundsTable row hoverSkeleton loading |
| 200 | C4CA #C4CAF7 | Secondary backgroundsInput backgroundsDividers |
| 300 | 97A2 #97A2F2 | BordersInactive statesPlaceholder text |
| 400 | 6171 #6171EA | Disabled statesSecondary iconsMuted text |
| 500 | 3449 #3449E5 | Primary brand colorCTAsActive elementsLinks |
| 600 | 1A2E #1A2EC7 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 1525 #15259E | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0F1A #0F1A71 | Text on light backgroundsHeadingsStrong borders |
| 900 | 0911 #091148 | Primary textHigh emphasis contentDark headings |
| 950 | 060A #060A2D | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--lavender-50: #F1F3FD;
--lavender-100: #DFE3FB;
--lavender-200: #C4CAF7;
--lavender-300: #97A2F2;
--lavender-400: #6171EA;
--lavender-500: #3449E5;
--lavender-600: #1A2EC7;
--lavender-700: #15259E;
--lavender-800: #0F1A71;
--lavender-900: #091148;
--lavender-950: #060A2D;
}