Named color · #CBF4F8
Vaporised
Vaporised is #CBF4F8: rgb(203 244 248), hsl(185 76% 88%), oklch(0.94 0.043 203.7). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Cyan mean? → · Vaporised color name →
#CBF4F8
oklch(0.94 0.043 203.7)
Color conversions
- HEX
- #cbf4f8
- RGB
- rgb(203 244 248)
- HSL
- hsl(185 76% 88%)
- HWB
- hwb(185 80% 3%)
- OKLCH
- oklch(0.94 0.043 203.7)
- OKLab
- oklab(0.94 -0.039 -0.017)
- CIE Lab
- lab(93.38 -13.04 -6.56)
- LCH
- lch(93.38 14.6 206.7)
- CMYK
- cmyk(18% 2% 0% 3%)
Tints · Shades · Tones
Tints
- D0F5F9
- D6F6F9
- DBF7FA
- E0F9FB
- E5FAFC
- EBFBFC
- F0FCFD
- F5FDFE
- FAFEFE
Shades
- B0D4D8
- 96B5B8
- 7D979A
- 657A7C
- 4D5E60
- 374445
- 222B2C
- 0F1415
- 020303
Tones
- C3E8EB
- BCDCDF
- B4D0D3
- ADC4C6
- A5B8BA
- 9EADAE
- 96A1A2
- 8F9697
- 878B8B
Color harmonies
Complementary +180°
- CBF4F8
Vaporised
- FFE4E1
≈ Misty Rose
Analogous -30° +30°
- CBF4F8
Vaporised
- CFF5E9
≈ Waterslide
- D5F0FF
≈ Ice Castle
Triadic +120° +240°
- CBF4F8
Vaporised
- FAE2FC
≈ Fairy Salt
- F9E9CC
≈ Orzo Pasta
Split-complementary +150° +210°
- CBF4F8
Vaporised
- FFE2ED
≈ Pale Blossom
- FFE5D6
≈ Light Peach Rose
Tetradic +90° +180° +270°
- CBF4F8
Vaporised
- ECE7FF
≈ Cyber Lavender
- FFE4E1
≈ Misty Rose
- EAEFCF
≈ Cool Yellow
Contrast & accessibility
Ag
FailOn white
WCAG 1.17:1 · APCA Lc 9
Ag
AAAOn black
WCAG 17.83:1 · APCA Lc 96
Best text color: #000000
WCAG 17.83:1 (AAA) · APCA Lc 96
Contrast pairs
Code snippets
CSS
:root {
--vaporised: #cbf4f8;
--vaporised-rgb: 203 244 248;
--vaporised-oklch: oklch(0.94 0.043 203.7);
}
.element {
color: var(--vaporised);
background-color: hsl(185 76% 88%);
border-color: oklch(0.94 0.043 203.7);
}Tailwind CSS v4
@theme {
--color-vaporised: #cbf4f8;
--color-vaporised-50: #e8f9fb;
--color-vaporised-100: #d8ecef;
--color-vaporised-200: #c0dadd;
--color-vaporised-300: #9fbec2;
--color-vaporised-400: #81a6aa;
--color-vaporised-500: #648f93;
--color-vaporised-600: #55797c;
--color-vaporised-700: #446164;
--color-vaporised-800: #314749;
--color-vaporised-900: #213132;
--color-vaporised-950: #101d1e;
}SCSS
$vaporised: #cbf4f8;
$vaporised-rgb: 203, 244, 248;
$vaporised-light: mix(#fff, $vaporised, 20%);
$vaporised-dark: mix(#000, $vaporised, 20%);
.element {
color: $vaporised;
box-shadow: 0 0 0 2px rgba($vaporised, 0.35);
}