Lavender
#D5D6E7
BlueColor Codes
All color formats for development
HEX
#D5D6E7RGB
rgb(213, 214, 231)HSL
hsl(237, 27%, 87%)OKLCH
oklch(0.88 0.023 283.2)CMYK
cmyk(8%, 7%, 0%, 9%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#B9BAD7
2#9D9FC6
3#8083B6
4#6467A6
5#51548D
6#414371
7#313255
8#202238
9#10111C
Tints
Lighter variations
1#D9DAE9
2#DDDEEC
3#E2E2EE
4#E6E6F0
5#EAEAF3
6#EEEFF5
7#F2F3F8
8#F7F7FA
9#FBFBFD
Tones
Muted variations
1#D6D7E6
2#D7D7E5
3#D8D8E4
4#D8D9E3
5#D9DAE2
6#DADBE1
7#DBDBE1
8#DCDCE0
9#DDDDDF
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F5F5 #F5F5F9 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E8E9 #E8E9F2 | Light backgroundsTable row hoverSkeleton loading |
| 200 | D5D6 #D5D6E7 | Secondary backgroundsInput backgroundsDividers |
| 300 | B5B6 #B5B6D4 | BordersInactive statesPlaceholder text |
| 400 | 8E90 #8E90BE | Disabled statesSecondary iconsMuted text |
| 500 | 6D70 #6D70AB | Primary brand colorCTAsActive elementsLinks |
| 600 | 5255 #52558E | Hover statesFocus ringsPrimary buttons hover |
| 700 | 4144 #414471 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 2F30 #2F3051 | Text on light backgroundsHeadingsStrong borders |
| 900 | 1E1F #1E1F34 | Primary textHigh emphasis contentDark headings |
| 950 | 1313 #131320 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--lavender-50: #F5F5F9;
--lavender-100: #E8E9F2;
--lavender-200: #D5D6E7;
--lavender-300: #B5B6D4;
--lavender-400: #8E90BE;
--lavender-500: #6D70AB;
--lavender-600: #52558E;
--lavender-700: #414471;
--lavender-800: #2F3051;
--lavender-900: #1E1F34;
--lavender-950: #131320;
}