Lavender
#C6EFF6
CyanColor Codes
All color formats for development
HEX
#C6EFF6RGB
rgb(198, 239, 246)HSL
hsl(189, 73%, 87%)OKLCH
oklch(0.925 0.043 209.1)CMYK
cmyk(20%, 3%, 0%, 4%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#9FE4F0
2#79D9EA
3#53CEE4
4#2CC3DE
5#1EA8C0
6#18869A
7#126573
8#0C434D
9#062226
Tints
Lighter variations
1#CBF0F7
2#D1F2F8
3#D7F4F9
4#DDF5FA
5#E2F7FB
6#E8F9FB
7#EEFAFC
8#F4FCFD
9#F9FDFE
Tones
Muted variations
1#C8EDF4
2#CAEBF1
3#CDEAEF
4#CFE8EC
5#D2E6EA
6#D4E5E8
7#D7E3E5
8#D9E1E3
9#DBE0E0
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F2FB #F2FBFD | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E0F6 #E0F6FA | Light backgroundsTable row hoverSkeleton loading |
| 200 | C6EF #C6EFF6 | Secondary backgroundsInput backgroundsDividers |
| 300 | 9AE2 #9AE2EF | BordersInactive statesPlaceholder text |
| 400 | 65D3 #65D3E7 | Disabled statesSecondary iconsMuted text |
| 500 | 38C7 #38C7E0 | Primary brand colorCTAsActive elementsLinks |
| 600 | 1EAA #1EAAC2 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 1887 #18879A | Active/pressed statesDark mode accentsSecondary text |
| 800 | 1160 #11606E | Text on light backgroundsHeadingsStrong borders |
| 900 | 0B3E #0B3E47 | Primary textHigh emphasis contentDark headings |
| 950 | 0727 #07272C | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--lavender-50: #F2FBFD;
--lavender-100: #E0F6FA;
--lavender-200: #C6EFF6;
--lavender-300: #9AE2EF;
--lavender-400: #65D3E7;
--lavender-500: #38C7E0;
--lavender-600: #1EAAC2;
--lavender-700: #18879A;
--lavender-800: #11606E;
--lavender-900: #0B3E47;
--lavender-950: #07272C;
}