Named color · #CFDFEF
Vanishing Blue
Vanishing Blue is #CFDFEF: rgb(207 223 239), hsl(210 50% 87%), oklch(0.897 0.028 248.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Vanishing Blue color name →
#CFDFEF
oklch(0.897 0.028 248.1)
Color conversions
- HEX
- #cfdfef
- RGB
- rgb(207 223 239)
- HSL
- hsl(210 50% 87%)
- HWB
- hwb(210 81% 6%)
- OKLCH
- oklch(0.897 0.028 248.1)
- OKLab
- oklab(0.897 -0.01 -0.026)
- CIE Lab
- lab(87.98 -3.17 -9.77)
- LCH
- lch(87.98 10.27 252)
- CMYK
- cmyk(13% 7% 0% 6%)
Tints · Shades · Tones
Tints
- D4E2F1
- D9E5F2
- DDE9F4
- E2ECF5
- E7EFF7
- ECF2F9
- F0F5FA
- F5F9FC
- FAFCFD
Shades
- B4C2D0
- 99A5B1
- 7F8A94
- 676F78
- 4F565C
- 383D42
- 23272A
- 101214
- 020203
Tones
- C7D5E3
- BFCBD8
- B7C2CC
- AFB8C1
- A7AEB6
- 9FA5AB
- 979BA0
- 8F9295
- 88898B
Color harmonies
Complementary +180°
- CFDFEF
Vanishing Blue
- EADACA
≈ Whisper of White
Analogous -30° +30°
- CFDFEF
Vanishing Blue
- C9E2E9
≈ Endless Sky
- D8DCF0
≈ The White Death
Triadic +120° +240°
- CFDFEF
Vanishing Blue
- EFD6D9
≈ Pale Rose
- D7E1CD
≈ Gratifying Green
Split-complementary +150° +210°
- CFDFEF
Vanishing Blue
- EED7D0
≈ Delicate Blush
- E1DDC9
≈ Travertine
Tetradic +90° +180° +270°
- CFDFEF
Vanishing Blue
- EAD6E3
≈ Light Favourite Lady
- EADACA
≈ Whisper of White
- CEE3D6
≈ Light Silverton
Contrast & accessibility
Ag
FailOn white
WCAG 1.35:1 · APCA Lc 18
Ag
AAAOn black
WCAG 15.45:1 · APCA Lc 86
Best text color: #000000
WCAG 15.45:1 (AAA) · APCA Lc 86
Contrast pairs
Code snippets
CSS
:root {
--vanishing-blue: #cfdfef;
--vanishing-blue-rgb: 207 223 239;
--vanishing-blue-oklch: oklch(0.897 0.028 248.1);
}
.element {
color: var(--vanishing-blue);
background-color: hsl(210 50% 87%);
border-color: oklch(0.897 0.028 248.1);
}Tailwind CSS v4
@theme {
--color-vanishing-blue: #cfdfef;
--color-vanishing-blue-50: #eff6fd;
--color-vanishing-blue-100: #e1e9f1;
--color-vanishing-blue-200: #ccd5e0;
--color-vanishing-blue-300: #adb9c6;
--color-vanishing-blue-400: #92a0af;
--color-vanishing-blue-500: #788898;
--color-vanishing-blue-600: #667381;
--color-vanishing-blue-700: #515c67;
--color-vanishing-blue-800: #3b444c;
--color-vanishing-blue-900: #282f35;
--color-vanishing-blue-950: #161b20;
}SCSS
$vanishing-blue: #cfdfef;
$vanishing-blue-rgb: 207, 223, 239;
$vanishing-blue-light: mix(#fff, $vanishing-blue, 20%);
$vanishing-blue-dark: mix(#000, $vanishing-blue, 20%);
.element {
color: $vanishing-blue;
box-shadow: 0 0 0 2px rgba($vanishing-blue, 0.35);
}