Lavender
#CADFF2
BlueColor Codes
All color formats for development
HEX
#CADFF2RGB
rgb(202, 223, 242)HSL
hsl(208, 61%, 87%)OKLCH
oklch(0.894 0.035 245.5)CMYK
cmyk(17%, 8%, 0%, 5%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#A6CAE9
2#82B5E1
3#5E9FD8
4#3B8ACF
5#2B73B3
6#235C8F
7#1A456B
8#112E47
9#091724
Tints
Lighter variations
1#CFE2F3
2#D4E6F5
3#DAE9F6
4#DFECF7
5#E4EFF9
6#EAF2FA
7#EFF5FB
8#F4F9FC
9#FAFCFE
Tones
Muted variations
1#CCDFF0
2#CEDFEE
3#D0DFEC
4#D2DFEA
5#D4DFE8
6#D6DEE6
7#D8DEE4
8#DADEE2
9#DCDEE0
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F3F8 #F3F8FC | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E2EE #E2EEF8 | Light backgroundsTable row hoverSkeleton loading |
| 200 | CADF #CADFF2 | Secondary backgroundsInput backgroundsDividers |
| 300 | A1C7 #A1C7E8 | BordersInactive statesPlaceholder text |
| 400 | 6FA9 #6FA9DC | Disabled statesSecondary iconsMuted text |
| 500 | 4691 #4691D2 | Primary brand colorCTAsActive elementsLinks |
| 600 | 2C75 #2C75B5 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 235D #235D90 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 1942 #194267 | Text on light backgroundsHeadingsStrong borders |
| 900 | 102A #102A42 | Primary textHigh emphasis contentDark headings |
| 950 | 0A1B #0A1B29 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--lavender-50: #F3F8FC;
--lavender-100: #E2EEF8;
--lavender-200: #CADFF2;
--lavender-300: #A1C7E8;
--lavender-400: #6FA9DC;
--lavender-500: #4691D2;
--lavender-600: #2C75B5;
--lavender-700: #235D90;
--lavender-800: #194267;
--lavender-900: #102A42;
--lavender-950: #0A1B29;
}