Named color · #87E0CF
Sea Foam
Sea Foam is #87E0CF: rgb(135 224 207), hsl(169 59% 70%), oklch(0.846 0.09 180.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Teal mean? → · Sea Foam color name →
#87E0CF
oklch(0.846 0.09 180.4)
Color conversions
- HEX
- #87e0cf
- RGB
- rgb(135 224 207)
- HSL
- hsl(169 59% 70%)
- HWB
- hwb(169 53% 12%)
- OKLCH
- oklch(0.846 0.09 180.4)
- OKLab
- oklab(0.846 -0.09 -0.001)
- CIE Lab
- lab(83.24 -30.93 -0.52)
- LCH
- lch(83.24 30.93 181)
- CMYK
- cmyk(40% 0% 8% 12%)
Tints · Shades · Tones
Tints
- 95E3D4
- A2E6D8
- AEEADD
- BAEDE2
- C6F0E7
- D2F3EC
- DDF6F0
- E9F9F5
- F4FCFA
Shades
- 75C3B4
- 63A699
- 518A7F
- 417067
- 31564F
- 213E38
- 132723
- 061210
- 010202
Tones
- 88D6C7
- 88CCBF
- 88C2B7
- 88B9AF
- 87AFA7
- 86A69F
- 859C97
- 84938F
- 828988
Color harmonies
Complementary +180°
- 87E0CF
Sea Foam
- FEB4C9
≈ Baby Pink
Analogous -30° +30°
- 87E0CF
Sea Foam
- A2DEAE
≈ Dead 99
- 82DDED
≈ Photon Barrier
Triadic +120° +240°
- 87E0CF
Sea Foam
- D5BFFF
≈ Lavender Fragrance
- F8BF91
≈ Persimmon Fade
Split-complementary +150° +210°
- 87E0CF
Sea Foam
- EFB8E8
≈ Lovecloud
- FFB8AB
≈ Ripe Melon
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 1.54:1 · APCA Lc 25
Ag
AAAOn black
WCAG 13.59:1 · APCA Lc 78
Best text color: #000000
WCAG 13.59:1 (AAA) · APCA Lc 78
Contrast pairs
Code snippets
CSS
:root {
--sea-foam: #87e0cf;
--sea-foam-rgb: 135 224 207;
--sea-foam-oklch: oklch(0.846 0.09 180.4);
}
.element {
color: var(--sea-foam);
background-color: hsl(169 59% 70%);
border-color: oklch(0.846 0.09 180.4);
}Tailwind CSS v4
@theme {
--color-sea-foam: #87e0cf;
--color-sea-foam-50: #dafef7;
--color-sea-foam-100: #c8f2ea;
--color-sea-foam-200: #aae1d7;
--color-sea-foam-300: #82c7bb;
--color-sea-foam-400: #5cb0a1;
--color-sea-foam-500: #2e9989;
--color-sea-foam-600: #2a8274;
--color-sea-foam-700: #21685d;
--color-sea-foam-800: #174c43;
--color-sea-foam-900: #0f352e;
--color-sea-foam-950: #02201b;
}SCSS
$sea-foam: #87e0cf;
$sea-foam-rgb: 135, 224, 207;
$sea-foam-light: mix(#fff, $sea-foam, 20%);
$sea-foam-dark: mix(#000, $sea-foam, 20%);
.element {
color: $sea-foam;
box-shadow: 0 0 0 2px rgba($sea-foam, 0.35);
}