Lavender
#DBDFE1
GrayColor Codes
All color formats for development
HEX
#DBDFE1RGB
rgb(219, 223, 225)HSL
hsl(200, 9%, 87%)OKLCH
oklch(0.901 0.005 228.8)CMYK
cmyk(3%, 1%, 0%, 12%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#C3C9CD
2#ABB4B8
3#929EA4
4#7A8990
5#657279
6#515B61
7#3D4549
8#282E30
9#141718
Tints
Lighter variations
1#DEE2E4
2#E2E5E7
3#E6E8EA
4#E9ECED
5#EDEFF0
6#F1F2F3
7#F4F5F6
8#F8F9F9
9#FBFCFC
Tones
Muted variations
1#DBDFE1
2#DBDFE0
3#DCDFE0
4#DCDEE0
5#DCDEDF
6#DDDEDF
7#DDDEDF
8#DDDEDE
9#DEDEDE
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F7F8 #F7F8F8 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | ECEE #ECEEEF | Light backgroundsTable row hoverSkeleton loading |
| 200 | DBDF #DBDFE1 | Secondary backgroundsInput backgroundsDividers |
| 300 | BFC6 #BFC6CA | BordersInactive statesPlaceholder text |
| 400 | 9EA8 #9EA8AE | Disabled statesSecondary iconsMuted text |
| 500 | 8290 #829097 | Primary brand colorCTAsActive elementsLinks |
| 600 | 6674 #66747A | Hover statesFocus ringsPrimary buttons hover |
| 700 | 515C #515C61 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 3A42 #3A4245 | Text on light backgroundsHeadingsStrong borders |
| 900 | 252A #252A2C | Primary textHigh emphasis contentDark headings |
| 950 | 171A #171A1C | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--lavender-50: #F7F8F8;
--lavender-100: #ECEEEF;
--lavender-200: #DBDFE1;
--lavender-300: #BFC6CA;
--lavender-400: #9EA8AE;
--lavender-500: #829097;
--lavender-600: #66747A;
--lavender-700: #515C61;
--lavender-800: #3A4245;
--lavender-900: #252A2C;
--lavender-950: #171A1C;
}