Lavender
#C6DDF5
BlueColor Codes
All color formats for development
HEX
#C6DDF5RGB
rgb(198, 221, 245)HSL
hsl(211, 70%, 87%)OKLCH
oklch(0.888 0.041 249.4)CMYK
cmyk(19%, 10%, 0%, 4%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#A1C6EE
2#7BB0E8
3#5699E1
4#3082DA
5#216CBD
6#1B5797
7#144171
8#0D2B4B
9#071626
Tints
Lighter variations
1#CCE0F6
2#D2E4F7
3#D8E7F8
4#DDEBF9
5#E3EEFA
6#E8F1FB
7#EEF5FC
8#F4F8FD
9#F9FCFE
Tones
Muted variations
1#C9DDF3
2#CBDDF0
3#CEDDEE
4#D0DDEC
5#D2DDE9
6#D5DEE7
7#D7DEE5
8#D9DEE2
9#DCDEE0
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F2F7 #F2F7FD | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E1ED #E1EDFA | Light backgroundsTable row hoverSkeleton loading |
| 200 | C7DD #C7DDF5 | Secondary backgroundsInput backgroundsDividers |
| 300 | 9BC3 #9BC3ED | BordersInactive statesPlaceholder text |
| 400 | 67A4 #67A4E4 | Disabled statesSecondary iconsMuted text |
| 500 | 3C8A #3C8ADD | Primary brand colorCTAsActive elementsLinks |
| 600 | 226E #226EBF | Hover statesFocus ringsPrimary buttons hover |
| 700 | 1B57 #1B5798 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 133E #133E6C | Text on light backgroundsHeadingsStrong borders |
| 900 | 0C28 #0C2845 | Primary textHigh emphasis contentDark headings |
| 950 | 0819 #08192B | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--lavender-50: #F2F7FD;
--lavender-100: #E1EDFA;
--lavender-200: #C7DDF5;
--lavender-300: #9BC3ED;
--lavender-400: #67A4E4;
--lavender-500: #3C8ADD;
--lavender-600: #226EBF;
--lavender-700: #1B5798;
--lavender-800: #133E6C;
--lavender-900: #0C2845;
--lavender-950: #08192B;
}