Named color · #CFD5D7
Veiled Spotlight
Veiled Spotlight is #CFD5D7: rgb(207 213 215), hsl(195 9% 83%), oklch(0.869 0.007 219.6). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Veiled Spotlight color name →
#CFD5D7
oklch(0.869 0.007 219.6)
Color conversions
- HEX
- #cfd5d7
- RGB
- rgb(207 213 215)
- HSL
- hsl(195 9% 83%)
- HWB
- hwb(195 81% 16%)
- OKLCH
- oklch(0.869 0.007 219.6)
- OKLab
- oklab(0.869 -0.005 -0.005)
- CIE Lab
- lab(84.84 -1.83 -1.74)
- LCH
- lch(84.84 2.53 223.5)
- CMYK
- cmyk(4% 1% 0% 16%)
Tints · Shades · Tones
Tints
- D4D9DB
- D8DDDF
- DDE1E3
- E2E6E7
- E7EAEB
- ECEEEF
- F0F2F3
- F5F6F7
- FAFBFB
Shades
- B4B9BB
- 999E9F
- 7F8385
- 676A6B
- 4F5152
- 383A3B
- 232425
- 101011
- 020202
Tones
- C7CCCE
- BFC3C5
- B7BBBC
- AFB2B3
- A7AAAA
- 9FA1A2
- 979999
- 8F9091
- 888888
Color harmonies
Complementary +180°
- CFD5D7
Veiled Spotlight
- D8D2D0
≈ Balanced
Analogous -30° +30°
- CFD5D7
Veiled Spotlight
- CFD5D5
≈ Zumthor
- D0D4D8
≈ Veiled Spotlight
Triadic +120° +240°
- CFD5D7
Veiled Spotlight
- D7D2D5
≈ Etude Lilac
- D5D4CF
≈ Seashell Grey
Split-complementary +150° +210°
- CFD5D7
Veiled Spotlight
- D8D2D3
≈ Beluga Song
- D7D3CF
≈ Sleeping Inn
Tetradic +90° +180° +270°
- CFD5D7
Veiled Spotlight
- D5D3D7
≈ Etude Lilac
- D8D2D0
≈ Balanced
- D2D5D0
≈ Foggy Dew
Contrast & accessibility
Ag
FailOn white
WCAG 1.48:1 · APCA Lc 23
Ag
AAAOn black
WCAG 14.15:1 · APCA Lc 80
Best text color: #000000
WCAG 14.15:1 (AAA) · APCA Lc 80
Contrast pairs
Code snippets
CSS
:root {
--veiled-spotlight: #cfd5d7;
--veiled-spotlight-rgb: 207 213 215;
--veiled-spotlight-oklch: oklch(0.869 0.007 219.6);
}
.element {
color: var(--veiled-spotlight);
background-color: hsl(195 9% 83%);
border-color: oklch(0.869 0.007 219.6);
}Tailwind CSS v4
@theme {
--color-veiled-spotlight: #cfd5d7;
--color-veiled-spotlight-50: #f3f6f6;
--color-veiled-spotlight-100: #e5e8e9;
--color-veiled-spotlight-200: #d1d5d6;
--color-veiled-spotlight-300: #b4b8ba;
--color-veiled-spotlight-400: #9a9fa1;
--color-veiled-spotlight-500: #818789;
--color-veiled-spotlight-600: #6d7374;
--color-veiled-spotlight-700: #575c5d;
--color-veiled-spotlight-800: #404344;
--color-veiled-spotlight-900: #2c2e2f;
--color-veiled-spotlight-950: #191b1b;
}SCSS
$veiled-spotlight: #cfd5d7;
$veiled-spotlight-rgb: 207, 213, 215;
$veiled-spotlight-light: mix(#fff, $veiled-spotlight, 20%);
$veiled-spotlight-dark: mix(#000, $veiled-spotlight, 20%);
.element {
color: $veiled-spotlight;
box-shadow: 0 0 0 2px rgba($veiled-spotlight, 0.35);
}