Named color · #BBDEE5
Disappearing Island
Disappearing Island is #BBDEE5: rgb(187 222 229), hsl(190 45% 82%), oklch(0.878 0.038 211.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Cyan mean? → · Disappearing Island color name →
#BBDEE5
oklch(0.878 0.038 211.1)
Color conversions
- HEX
- #bbdee5
- RGB
- rgb(187 222 229)
- HSL
- hsl(190 45% 82%)
- HWB
- hwb(190 73% 10%)
- OKLCH
- oklch(0.878 0.038 211.1)
- OKLab
- oklab(0.878 -0.033 -0.02)
- CIE Lab
- lab(86.09 -10.8 -7.49)
- LCH
- lch(86.09 13.14 214.7)
- CMYK
- cmyk(18% 3% 0% 10%)
Tints · Shades · Tones
Tints
- C2E1E8
- C9E5EA
- D0E8ED
- D6EBEF
- DDEFF2
- E4F2F5
- EBF5F7
- F1F8FA
- F8FCFC
Shades
- A2C1C7
- 8AA5AA
- 73898E
- 5C6F72
- 465558
- 323D3F
- 1F2628
- 0D1212
- 020203
Tones
- B5D4DA
- AFCBD0
- A9C1C6
- A3B7BB
- 9DAEB1
- 98A5A7
- 929B9D
- 8C9293
- 86898A
Color harmonies
Complementary +180°
- BBDEE5
Disappearing Island
- EFCEC8
≈ Kislev Pink
Analogous -30° +30°
- BBDEE5
Disappearing Island
- BDDFD8
≈ Antiguan
- C1DBEE
≈ Comet Tail
Triadic +120° +240°
- BBDEE5
Disappearing Island
- E6CEE2
≈ Sweety Pie
- E0D6BB
≈ Land of Trees
Split-complementary +150° +210°
- BBDEE5
Disappearing Island
- EDCDD5
≈ Donquixote Doflamingo
- EAD2BE
≈ Puppy Paws
Tetradic +90° +180° +270°
- BBDEE5
Disappearing Island
- DBD1EC
≈ Shimmering Sky
- EFCEC8
≈ Kislev Pink
- D3DBBF
≈ Zen Garden
Contrast & accessibility
Ag
FailOn white
WCAG 1.42:1 · APCA Lc 21
Ag
AAAOn black
WCAG 14.69:1 · APCA Lc 83
Best text color: #000000
WCAG 14.69:1 (AAA) · APCA Lc 83
Contrast pairs
Code snippets
CSS
:root {
--disappearing-island: #bbdee5;
--disappearing-island-rgb: 187 222 229;
--disappearing-island-oklch: oklch(0.878 0.038 211.1);
}
.element {
color: var(--disappearing-island);
background-color: hsl(190 45% 82%);
border-color: oklch(0.878 0.038 211.1);
}Tailwind CSS v4
@theme {
--color-disappearing-island: #bbdee5;
--color-disappearing-island-50: #eaf8fc;
--color-disappearing-island-100: #daecef;
--color-disappearing-island-200: #c3d9de;
--color-disappearing-island-300: #a2bdc3;
--color-disappearing-island-400: #85a5ab;
--color-disappearing-island-500: #698d95;
--color-disappearing-island-600: #59787e;
--color-disappearing-island-700: #476065;
--color-disappearing-island-800: #334649;
--color-disappearing-island-900: #233133;
--color-disappearing-island-950: #121d1f;
}SCSS
$disappearing-island: #bbdee5;
$disappearing-island-rgb: 187, 222, 229;
$disappearing-island-light: mix(#fff, $disappearing-island, 20%);
$disappearing-island-dark: mix(#000, $disappearing-island, 20%);
.element {
color: $disappearing-island;
box-shadow: 0 0 0 2px rgba($disappearing-island, 0.35);
}