Named color · #CCCCFF
Lavender Blue
Lavender Blue is #CCCCFF: rgb(204 204 255), hsl(240 100% 90%), oklch(0.862 0.07 284.8). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · Lavender Blue color name →
#CCCCFF
oklch(0.862 0.07 284.8)
Color conversions
- HEX
- #ccccff
- RGB
- rgb(204 204 255)
- HSL
- hsl(240 100% 90%)
- HWB
- hwb(240 80% 0%)
- OKLCH
- oklch(0.862 0.07 284.8)
- OKLab
- oklab(0.862 0.018 -0.068)
- CIE Lab
- lab(83.33 7.76 -25.13)
- LCH
- lch(83.33 26.3 287.2)
- CMYK
- cmyk(20% 20% 0% 0%)
Tints · Shades · Tones
Tints
- D1D1FF
- D6D6FF
- DBDBFF
- E0E0FF
- E5E6FF
- EAEBFF
- EFF0FF
- F5F5FF
- FAFAFF
Shades
- B1B1DE
- 9797BE
- 7E7E9E
- 656580
- 4E4E63
- 373748
- 22222E
- 0F0F16
- 020203
Tones
- C4C4F2
- BCBCE5
- B4B5D8
- ADADCB
- A5A5BE
- 9D9EB1
- 9696A5
- 8F8F98
- 87878C
Color harmonies
Complementary +180°
- CCCCFF
Lavender Blue
- D8D59F
≈ Garden Glade
Analogous -30° +30°
- CCCCFF
Lavender Blue
- B4D5FF
≈ Ice Cold Stare
- E3C4F2
≈ Prom Corsage
Triadic +120° +240°
- CCCCFF
Lavender Blue
- FAC4AC
≈ Coral Bisque
- A7E1C6
≈ Reef Green
Split-complementary +150° +210°
- CCCCFF
Lavender Blue
- EDCC9E
≈ Quiet Star
- BEDDAE
≈ Bowling Green
Tetradic +90° +180° +270°
- CCCCFF
Lavender Blue
- FDBFC3
≈ Delhi Dance Pink
- D8D59F
≈ Garden Glade
- 9AE1E0
≈ Aqua Fiesta
Contrast & accessibility
Ag
FailOn white
WCAG 1.53:1 · APCA Lc 25
Ag
AAAOn black
WCAG 13.64:1 · APCA Lc 78
Best text color: #000000
WCAG 13.64:1 (AAA) · APCA Lc 78
Contrast pairs
Code snippets
CSS
:root {
--lavender-blue: #ccccff;
--lavender-blue-rgb: 204 204 255;
--lavender-blue-oklch: oklch(0.862 0.07 284.8);
}
.element {
color: var(--lavender-blue);
background-color: hsl(240 100% 90%);
border-color: oklch(0.862 0.07 284.8);
}Tailwind CSS v4
@theme {
--color-lavender-blue: #ccccff;
--color-lavender-blue-50: #f3f3ff;
--color-lavender-blue-100: #e6e5ff;
--color-lavender-blue-200: #d1d0f2;
--color-lavender-blue-300: #b4b3da;
--color-lavender-blue-400: #9999c7;
--color-lavender-blue-500: #8180b3;
--color-lavender-blue-600: #6d6c98;
--color-lavender-blue-700: #57577a;
--color-lavender-blue-800: #3f3f5a;
--color-lavender-blue-900: #2b2c3f;
--color-lavender-blue-950: #181928;
}SCSS
$lavender-blue: #ccccff;
$lavender-blue-rgb: 204, 204, 255;
$lavender-blue-light: mix(#fff, $lavender-blue, 20%);
$lavender-blue-dark: mix(#000, $lavender-blue, 20%);
.element {
color: $lavender-blue;
box-shadow: 0 0 0 2px rgba($lavender-blue, 0.35);
}