Lavender
#DDE7FD
BlueColor Codes
All color formats for development
HEX
#DDE7FDRGB
rgb(221, 231, 253)HSL
hsl(221, 89%, 93%)OKLCH
oklch(0.927 0.032 266.2)CMYK
cmyk(13%, 9%, 0%, 1%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#B0C8FA
2#84A8F8
3#5789F5
4#2A6AF3
5#0D50E0
6#0A40B3
7#083086
8#05205A
9#03102D
Tints
Lighter variations
1#E1EAFD
2#E4ECFD
3#E7EEFE
4#EBF1FE
5#EEF3FE
6#F2F6FE
7#F5F8FE
8#F8FAFF
9#FCFDFF
Tones
Muted variations
1#DFE8FB
2#E0E8FA
3#E2E9F8
4#E4EAF7
5#E5EAF5
6#E7EBF4
7#E8EBF2
8#EAECF0
9#ECEDEF
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F1F5 #F1F5FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DDE7 #DDE7FD | Light backgroundsTable row hoverSkeleton loading |
| 200 | C0D3 #C0D3FB | Secondary backgroundsInput backgroundsDividers |
| 300 | 90B1 #90B1F9 | BordersInactive statesPlaceholder text |
| 400 | 5689 #5689F5 | Disabled statesSecondary iconsMuted text |
| 500 | 2667 #2667F2 | Primary brand colorCTAsActive elementsLinks |
| 600 | 0C4C #0C4CD4 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 0A3C #0A3CA9 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 072B #072B78 | Text on light backgroundsHeadingsStrong borders |
| 900 | 041B #041B4D | Primary textHigh emphasis contentDark headings |
| 950 | 0311 #031130 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--lavender-50: #F1F5FE;
--lavender-100: #DDE7FD;
--lavender-200: #C0D3FB;
--lavender-300: #90B1F9;
--lavender-400: #5689F5;
--lavender-500: #2667F2;
--lavender-600: #0C4CD4;
--lavender-700: #0A3CA9;
--lavender-800: #072B78;
--lavender-900: #041B4D;
--lavender-950: #031130;
}