Named color · #C5B5CC
Lavender Fog
Lavender Fog is #C5B5CC: rgb(197 181 204), hsl(282 18% 75%), oklch(0.794 0.036 315.7). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Purple mean? → · Lavender Fog color name →
#C5B5CC
oklch(0.794 0.036 315.7)
Color conversions
- HEX
- #c5b5cc
- RGB
- rgb(197 181 204)
- HSL
- hsl(282 18% 75%)
- HWB
- hwb(282 71% 20%)
- OKLCH
- oklch(0.794 0.036 315.7)
- OKLab
- oklab(0.794 0.026 -0.025)
- CIE Lab
- lab(75.58 9.03 -9.5)
- LCH
- lch(75.58 13.11 313.5)
- CMYK
- cmyk(3% 11% 0% 20%)
Tints · Shades · Tones
Tints
- CBBCD1
- D0C3D6
- D6CBDB
- DCD2E0
- E2D9E5
- E8E1EA
- EDE8F0
- F3F0F5
- F9F7FA
Shades
- AB9DB1
- 928697
- 796F7E
- 615965
- 4B444E
- 353037
- 211D22
- 0E0C0F
- 020202
Tones
- BEB0C4
- B7AABC
- B0A5B5
- A99FAD
- A29AA5
- 9B959E
- 949096
- 8D8A8F
- 878587
Color harmonies
Complementary +180°
- C5B5CC
Lavender Fog
- B2C1AA
≈ Desolace Dew
Analogous -30° +30°
- C5B5CC
Lavender Fog
- B9B9D3
≈ Purple Heather
- CEB3C1
≈ Twilight Bloom
Triadic +120° +240°
- C5B5CC
Lavender Fog
- CAB9A2
≈ Grain Brown
- A1C3C3
≈ Ocean Kiss
Split-complementary +150° +210°
- C5B5CC
Lavender Fog
- BEBEA3
≈ Mint Frost
- A7C4B6
≈ Kind Green
Tetradic +90° +180° +270°
- C5B5CC
Lavender Fog
- D1B5A9
≈ Sashay Sand
- B2C1AA
≈ Desolace Dew
- A4C1CE
≈ Airborne
Contrast & accessibility
Ag
FailOn white
WCAG 1.93:1 · APCA Lc 37
Ag
AAAOn black
WCAG 10.85:1 · APCA Lc 65
Best text color: #000000
WCAG 10.85:1 (AAA) · APCA Lc 65
Contrast pairs
Code snippets
CSS
:root {
--lavender-fog: #c5b5cc;
--lavender-fog-rgb: 197 181 204;
--lavender-fog-oklch: oklch(0.794 0.036 315.7);
}
.element {
color: var(--lavender-fog);
background-color: hsl(282 18% 75%);
border-color: oklch(0.794 0.036 315.7);
}Tailwind CSS v4
@theme {
--color-lavender-fog: #c5b5cc;
--color-lavender-fog-50: #faf2fc;
--color-lavender-fog-100: #ede4f0;
--color-lavender-fog-200: #dbd0df;
--color-lavender-fog-300: #bfb2c4;
--color-lavender-fog-400: #a798ad;
--color-lavender-fog-500: #907f97;
--color-lavender-fog-600: #7a6c80;
--color-lavender-fog-700: #615666;
--color-lavender-fog-800: #473f4b;
--color-lavender-fog-900: #312b34;
--color-lavender-fog-950: #1d1920;
}SCSS
$lavender-fog: #c5b5cc;
$lavender-fog-rgb: 197, 181, 204;
$lavender-fog-light: mix(#fff, $lavender-fog, 20%);
$lavender-fog-dark: mix(#000, $lavender-fog, 20%);
.element {
color: $lavender-fog;
box-shadow: 0 0 0 2px rgba($lavender-fog, 0.35);
}