Named color · #BCE3DF
Bleached Aqua
Bleached Aqua is #BCE3DF: rgb(188 227 223), hsl(174 41% 81%), oklch(0.887 0.041 188.8). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Teal mean? → · Bleached Aqua color name →
#BCE3DF
oklch(0.887 0.041 188.8)
Color conversions
- HEX
- #bce3df
- RGB
- rgb(188 227 223)
- HSL
- hsl(174 41% 81%)
- HWB
- hwb(174 74% 11%)
- OKLCH
- oklch(0.887 0.041 188.8)
- OKLab
- oklab(0.887 -0.041 -0.006)
- CIE Lab
- lab(87.35 -13.77 -2.5)
- LCH
- lch(87.35 14 190.3)
- CMYK
- cmyk(17% 0% 2% 11%)
Tints · Shades · Tones
Tints
- C3E6E2
- CAE9E5
- D0EBE9
- D7EEEC
- DEF1EF
- E4F4F2
- EBF7F5
- F2F9F9
- F8FCFC
Shades
- A3C5C2
- 8BA8A5
- 738C8A
- 5D716F
- 475756
- 323F3D
- 1F2727
- 0D1212
- 020302
Tones
- B6D9D5
- B0CECB
- AAC4C2
- A4BAB8
- 9EB0AE
- 98A6A5
- 929D9B
- 8C9392
- 868989
Color harmonies
Complementary +180°
- BCE3DF
Bleached Aqua
- F3CFD4
≈ Pink Cupcake
Analogous -30° +30°
- BCE3DF
Bleached Aqua
- C4E3D0
≈ Icy Mint
- BDE1EC
≈ Diminished Blue
Triadic +120° +240°
- BCE3DF
Bleached Aqua
- E2D3EF
≈ Japan Blush
- ECD5BD
≈ Speckled Eggs
Split-complementary +150° +210°
- BCE3DF
Bleached Aqua
- EDD0E3
≈ Lacquer Mauve
- F3D1C6
≈ Comical Coral
Tetradic +90° +180° +270°
- BCE3DF
Bleached Aqua
- D3D8F5
≈ Flax Bloom
- F3CFD4
≈ Pink Cupcake
- E0DBBC
≈ Coconut Cream
Contrast & accessibility
Ag
FailOn white
WCAG 1.38:1 · APCA Lc 19
Ag
AAAOn black
WCAG 15.19:1 · APCA Lc 85
Best text color: #000000
WCAG 15.19:1 (AAA) · APCA Lc 85
Contrast pairs
Code snippets
CSS
:root {
--bleached-aqua: #bce3df;
--bleached-aqua-rgb: 188 227 223;
--bleached-aqua-oklch: oklch(0.887 0.041 188.8);
}
.element {
color: var(--bleached-aqua);
background-color: hsl(174 41% 81%);
border-color: oklch(0.887 0.041 188.8);
}Tailwind CSS v4
@theme {
--color-bleached-aqua: #bce3df;
--color-bleached-aqua-50: #e9f9f8;
--color-bleached-aqua-100: #d9edeb;
--color-bleached-aqua-200: #c1dad8;
--color-bleached-aqua-300: #a0bfbc;
--color-bleached-aqua-400: #83a7a3;
--color-bleached-aqua-500: #678f8b;
--color-bleached-aqua-600: #577976;
--color-bleached-aqua-700: #46615e;
--color-bleached-aqua-800: #324745;
--color-bleached-aqua-900: #22312f;
--color-bleached-aqua-950: #111d1c;
}SCSS
$bleached-aqua: #bce3df;
$bleached-aqua-rgb: 188, 227, 223;
$bleached-aqua-light: mix(#fff, $bleached-aqua, 20%);
$bleached-aqua-dark: mix(#000, $bleached-aqua, 20%);
.element {
color: $bleached-aqua;
box-shadow: 0 0 0 2px rgba($bleached-aqua, 0.35);
}