Lavender
#CCEBEF
CyanColor Codes
All color formats for development
HEX
#CCEBEFRGB
rgb(204, 235, 239)HSL
hsl(187, 52%, 87%)OKLCH
oklch(0.919 0.033 206.1)CMYK
cmyk(15%, 2%, 0%, 6%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#ABDEE4
2#89D0DA
3#67C3CF
4#46B6C4
5#359BA9
6#2B7C87
7#205D65
8#153E43
9#0B1F22
Tints
Lighter variations
1#D2EDF1
2#D7EFF2
3#DCF1F4
4#E1F3F5
5#E6F5F7
6#EBF7F9
7#F0F9FA
8#F5FBFC
9#FAFDFD
Tones
Muted variations
1#CEEAED
2#D0E8EC
3#D2E7EA
4#D4E6E8
5#D5E4E6
6#D7E3E5
7#D9E2E3
8#DAE0E1
9#DCDFE0
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F3FA #F3FAFB | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E4F4 #E4F4F6 | Light backgroundsTable row hoverSkeleton loading |
| 200 | CDEB #CDEBEF | Secondary backgroundsInput backgroundsDividers |
| 300 | A6DC #A6DCE3 | BordersInactive statesPlaceholder text |
| 400 | 77C9 #77C9D4 | Disabled statesSecondary iconsMuted text |
| 500 | 51BA #51BAC8 | Primary brand colorCTAsActive elementsLinks |
| 600 | 369D #369DAB | Hover statesFocus ringsPrimary buttons hover |
| 700 | 2B7D #2B7D88 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 1F59 #1F5961 | Text on light backgroundsHeadingsStrong borders |
| 900 | 1439 #14393E | Primary textHigh emphasis contentDark headings |
| 950 | 0C24 #0C2427 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--lavender-50: #F3FAFB;
--lavender-100: #E4F4F6;
--lavender-200: #CDEBEF;
--lavender-300: #A6DCE3;
--lavender-400: #77C9D4;
--lavender-500: #51BAC8;
--lavender-600: #369DAB;
--lavender-700: #2B7D88;
--lavender-800: #1F5961;
--lavender-900: #14393E;
--lavender-950: #0C2427;
}