Lavender
#DDFDEF
GreenColor Codes
All color formats for development
HEX
#DDFDEFRGB
rgb(221, 253, 239)HSL
hsl(154, 89%, 93%)OKLCH
oklch(0.967 0.038 167.4)CMYK
cmyk(13%, 0%, 6%, 1%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#B0FADA
2#84F8C5
3#57F5B1
4#2AF39C
5#0DE085
6#0AB36A
7#088650
8#055A35
9#032D1B
Tints
Lighter variations
1#E1FDF1
2#E4FDF2
3#E7FEF4
4#EBFEF6
5#EEFEF7
6#F2FEF9
7#F5FEFA
8#F8FFFC
9#FCFFFD
Tones
Muted variations
1#DFFBEF
2#E0FAEF
3#E2F8EF
4#E4F7EE
5#E5F5EE
6#E7F4EE
7#E8F2EE
8#EAF0EE
9#ECEFED
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F1FE #F1FEF8 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DDFD #DDFDEF | Light backgroundsTable row hoverSkeleton loading |
| 200 | C0FB #C0FBE2 | Secondary backgroundsInput backgroundsDividers |
| 300 | 90F9 #90F9CB | BordersInactive statesPlaceholder text |
| 400 | 56F5 #56F5B0 | Disabled statesSecondary iconsMuted text |
| 500 | 26F2 #26F29A | Primary brand colorCTAsActive elementsLinks |
| 600 | 0CD4 #0CD47E | Hover statesFocus ringsPrimary buttons hover |
| 700 | 0AA9 #0AA964 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0778 #077847 | Text on light backgroundsHeadingsStrong borders |
| 900 | 044D #044D2E | Primary textHigh emphasis contentDark headings |
| 950 | 0330 #03301D | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--lavender-50: #F1FEF8;
--lavender-100: #DDFDEF;
--lavender-200: #C0FBE2;
--lavender-300: #90F9CB;
--lavender-400: #56F5B0;
--lavender-500: #26F29A;
--lavender-600: #0CD47E;
--lavender-700: #0AA964;
--lavender-800: #077847;
--lavender-900: #044D2E;
--lavender-950: #03301D;
}