Lavender
#DCDCE0
GrayColor Codes
All color formats for development
HEX
#DCDCE0RGB
rgb(220, 220, 224)HSL
hsl(240, 6%, 87%)OKLCH
oklch(0.896 0.005 286.3)CMYK
cmyk(2%, 2%, 0%, 12%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#C4C4CB
2#ADADB6
3#9595A1
4#7E7E8C
5#686876
6#53535E
7#3F3F47
8#2A2A2F
9#151518
Tints
Lighter variations
1#DFDFE3
2#E3E3E6
3#E6E6E9
4#EAEAEC
5#EDEDEF
6#F1F1F3
7#F4F4F6
8#F8F8F9
9#FBFBFC
Tones
Muted variations
1#DCDCE0
2#DCDCDF
3#DCDCDF
4#DDDDDF
5#DDDDDF
6#DDDDDF
7#DDDDDE
8#DDDDDE
9#DEDEDE
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F7F7 #F7F7F8 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | ECEC #ECECEE | Light backgroundsTable row hoverSkeleton loading |
| 200 | DCDC #DCDCE0 | Secondary backgroundsInput backgroundsDividers |
| 300 | C1C1 #C1C1C8 | BordersInactive statesPlaceholder text |
| 400 | A0A0 #A0A0AB | Disabled statesSecondary iconsMuted text |
| 500 | 8585 #858593 | Primary brand colorCTAsActive elementsLinks |
| 600 | 6969 #696977 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 5454 #54545F | Active/pressed statesDark mode accentsSecondary text |
| 800 | 3C3C #3C3C44 | Text on light backgroundsHeadingsStrong borders |
| 900 | 2626 #26262B | Primary textHigh emphasis contentDark headings |
| 950 | 1818 #18181B | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--lavender-50: #F7F7F8;
--lavender-100: #ECECEE;
--lavender-200: #DCDCE0;
--lavender-300: #C1C1C8;
--lavender-400: #A0A0AB;
--lavender-500: #858593;
--lavender-600: #696977;
--lavender-700: #54545F;
--lavender-800: #3C3C44;
--lavender-900: #26262B;
--lavender-950: #18181B;
}