Named color · #B2DCEF
Soap Bubble
Soap Bubble is #B2DCEF: rgb(178 220 239), hsl(199 66% 82%), oklch(0.871 0.051 227.2). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Cyan mean? → · Soap Bubble color name →
#B2DCEF
oklch(0.871 0.051 227.2)
Color conversions
- HEX
- #b2dcef
- RGB
- rgb(178 220 239)
- HSL
- hsl(199 66% 82%)
- HWB
- hwb(199 70% 6%)
- OKLCH
- oklch(0.871 0.051 227.2)
- OKLab
- oklab(0.871 -0.035 -0.038)
- CIE Lab
- lab(85.22 -11.05 -14.09)
- LCH
- lch(85.22 17.9 231.9)
- CMYK
- cmyk(26% 8% 0% 6%)
Tints · Shades · Tones
Tints
- BAE0F1
- C2E3F2
- C9E7F4
- D1EAF6
- D9EEF7
- E0F1F9
- E8F5FA
- F0F8FC
- F7FCFD
Shades
- 9ABFD0
- 83A3B1
- 6D8894
- 576E78
- 43545C
- 2F3C42
- 1D262A
- 0C1114
- 010203
Tones
- ADD2E3
- A8C9D8
- A3C0CD
- 9EB6C1
- 99ADB6
- 94A4AB
- 8F9BA0
- 8A9295
- 85898B
Color harmonies
Complementary +180°
- B2DCEF
Soap Bubble
- F2CBB8
≈ Watusi
Analogous -30° +30°
- B2DCEF
Soap Bubble
- AEDFE0
≈ Blue Light
- C0D6F7
≈ Mr. Glass
Triadic +120° +240°
- B2DCEF
Soap Bubble
- EFC8DB
≈ Persian Delight
- D8D7B1
≈ Morning Moor
Split-complementary +150° +210°
- B2DCEF
Soap Bubble
- F5C8C8
≈ Blushing Senorita
- E8D1B0
≈ Powdered Gold
Tetradic +90° +180° +270°
- B2DCEF
Soap Bubble
- E3CBEB
≈ Syrian Violet
- F2CBB8
≈ Watusi
- C5DDBC
≈ Galway
Contrast & accessibility
Ag
FailOn white
WCAG 1.46:1 · APCA Lc 22
Ag
AAAOn black
WCAG 14.37:1 · APCA Lc 81
Best text color: #000000
WCAG 14.37:1 (AAA) · APCA Lc 81
Contrast pairs
Code snippets
CSS
:root {
--soap-bubble: #b2dcef;
--soap-bubble-rgb: 178 220 239;
--soap-bubble-oklch: oklch(0.871 0.051 227.2);
}
.element {
color: var(--soap-bubble);
background-color: hsl(199 66% 82%);
border-color: oklch(0.871 0.051 227.2);
}Tailwind CSS v4
@theme {
--color-soap-bubble: #b2dcef;
--color-soap-bubble-50: #e7f8ff;
--color-soap-bubble-100: #d7ecf6;
--color-soap-bubble-200: #bfd9e6;
--color-soap-bubble-300: #9dbdcd;
--color-soap-bubble-400: #7fa5b6;
--color-soap-bubble-500: #618da1;
--color-soap-bubble-600: #537888;
--color-soap-bubble-700: #42606d;
--color-soap-bubble-800: #2f4650;
--color-soap-bubble-900: #203138;
--color-soap-bubble-950: #0f1d22;
}SCSS
$soap-bubble: #b2dcef;
$soap-bubble-rgb: 178, 220, 239;
$soap-bubble-light: mix(#fff, $soap-bubble, 20%);
$soap-bubble-dark: mix(#000, $soap-bubble, 20%);
.element {
color: $soap-bubble;
box-shadow: 0 0 0 2px rgba($soap-bubble, 0.35);
}