Lavender
#C7E8F5
BlueColor Codes
All color formats for development
HEX
#C7E8F5RGB
rgb(199, 232, 245)HSL
hsl(197, 70%, 87%)OKLCH
oklch(0.911 0.039 223.6)CMYK
cmyk(19%, 5%, 0%, 4%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#A1D8EE
2#7BC9E8
3#56BAE1
4#30AADA
5#2191BD
6#1B7497
7#145771
8#0D3A4B
9#071D26
Tints
Lighter variations
1#CCEAF6
2#D2EDF7
3#D8EFF8
4#DDF1F9
5#E3F3FA
6#E8F6FB
7#EEF8FC
8#F4FAFD
9#F9FDFE
Tones
Muted variations
1#C9E7F3
2#CBE6F0
3#CEE5EE
4#D0E4EC
5#D2E3E9
6#D5E2E7
7#D7E1E5
8#D9E0E2
9#DCDFE0
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F2FA #F2FAFD | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E1F3 #E1F3FA | Light backgroundsTable row hoverSkeleton loading |
| 200 | C7E8 #C7E8F5 | Secondary backgroundsInput backgroundsDividers |
| 300 | 9BD6 #9BD6ED | BordersInactive statesPlaceholder text |
| 400 | 67C1 #67C1E4 | Disabled statesSecondary iconsMuted text |
| 500 | 3CAF #3CAFDD | Primary brand colorCTAsActive elementsLinks |
| 600 | 2292 #2292BF | Hover statesFocus ringsPrimary buttons hover |
| 700 | 1B74 #1B7498 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 1353 #13536C | Text on light backgroundsHeadingsStrong borders |
| 900 | 0C35 #0C3545 | Primary textHigh emphasis contentDark headings |
| 950 | 0821 #08212B | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--lavender-50: #F2FAFD;
--lavender-100: #E1F3FA;
--lavender-200: #C7E8F5;
--lavender-300: #9BD6ED;
--lavender-400: #67C1E4;
--lavender-500: #3CAFDD;
--lavender-600: #2292BF;
--lavender-700: #1B7498;
--lavender-800: #13536C;
--lavender-900: #0C3545;
--lavender-950: #08212B;
}