Named color · #BCE6DE
Soothing Sea
Soothing Sea is #BCE6DE: rgb(188 230 222), hsl(169 46% 82%), oklch(0.893 0.045 182.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Teal mean? → · Soothing Sea color name →
#BCE6DE
oklch(0.893 0.045 182.4)
Color conversions
- HEX
- #bce6de
- RGB
- rgb(188 230 222)
- HSL
- hsl(169 46% 82%)
- HWB
- hwb(169 74% 10%)
- OKLCH
- oklch(0.893 0.045 182.4)
- OKLab
- oklab(0.893 -0.045 -0.002)
- CIE Lab
- lab(88.13 -15.32 -0.85)
- LCH
- lch(88.13 15.35 183.2)
- CMYK
- cmyk(18% 0% 3% 10%)
Tints · Shades · Tones
Tints
- C3E9E1
- CAEBE5
- D0EEE8
- D7F0EB
- DEF3EE
- E5F5F2
- EBF8F5
- F2FAF8
- F8FDFC
Shades
- A3C8C1
- 8BABA5
- 738E89
- 5D736F
- 475955
- 32403D
- 1F2826
- 0D1312
- 020302
Tones
- B6DBD4
- B0D1CA
- AAC6C1
- A4BCB7
- 9EB2AE
- 98A8A4
- 929E9B
- 8C9492
- 868A89
Color harmonies
Complementary +180°
- BCE6DE
Soothing Sea
- F7D0D9
≈ April Blush
Analogous -30° +30°
- BCE6DE
Soothing Sea
- C6E5CE
≈ Delta Mint
- BBE4ED
≈ Early Forget-Me-Not
Triadic +120° +240°
- BCE6DE
Soothing Sea
- E1D5F5
≈ Japan Blush
- F2D6BE
≈ Pulled Taffy
Split-complementary +150° +210°
- BCE6DE
Soothing Sea
- EFD1E9
≈ Poodle Pink
- F8D2C9
≈ Pink Cloud
Tetradic +90° +180° +270°
- BCE6DE
Soothing Sea
- D1DBFA
≈ Icy Plains
- F7D0D9
≈ April Blush
- E6DCBB
≈ Amish Bread
Contrast & accessibility
Ag
FailOn white
WCAG 1.35:1 · APCA Lc 17
Ag
AAAOn black
WCAG 15.51:1 · APCA Lc 86
Best text color: #000000
WCAG 15.51:1 (AAA) · APCA Lc 86
Contrast pairs
Code snippets
CSS
:root {
--soothing-sea: #bce6de;
--soothing-sea-rgb: 188 230 222;
--soothing-sea-oklch: oklch(0.893 0.045 182.4);
}
.element {
color: var(--soothing-sea);
background-color: hsl(169 46% 82%);
border-color: oklch(0.893 0.045 182.4);
}Tailwind CSS v4
@theme {
--color-soothing-sea: #bce6de;
--color-soothing-sea-50: #e8faf7;
--color-soothing-sea-100: #d8ede9;
--color-soothing-sea-200: #c0dbd6;
--color-soothing-sea-300: #9fbfba;
--color-soothing-sea-400: #81a8a0;
--color-soothing-sea-500: #649089;
--color-soothing-sea-600: #557a74;
--color-soothing-sea-700: #44625c;
--color-soothing-sea-800: #314843;
--color-soothing-sea-900: #21322e;
--color-soothing-sea-950: #101e1b;
}SCSS
$soothing-sea: #bce6de;
$soothing-sea-rgb: 188, 230, 222;
$soothing-sea-light: mix(#fff, $soothing-sea, 20%);
$soothing-sea-dark: mix(#000, $soothing-sea, 20%);
.element {
color: $soothing-sea;
box-shadow: 0 0 0 2px rgba($soothing-sea, 0.35);
}