Named color · #89F5E3
Turquoise Pearl
Turquoise Pearl is #89F5E3: rgb(137 245 227), hsl(170 84% 75%), oklch(0.9 0.104 181.9). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Teal mean? → · Turquoise Pearl color name →
#89F5E3
oklch(0.9 0.104 181.9)
Color conversions
- HEX
- #89f5e3
- RGB
- rgb(137 245 227)
- HSL
- hsl(170 84% 75%)
- HWB
- hwb(170 54% 4%)
- OKLCH
- oklch(0.9 0.104 181.9)
- OKLab
- oklab(0.9 -0.104 -0.003)
- CIE Lab
- lab(89.71 -35.86 -1.56)
- LCH
- lch(89.71 35.9 182.5)
- CMYK
- cmyk(44% 0% 7% 4%)
Tints · Shades · Tones
Tints
- 97F6E6
- A5F7E9
- B1F9EB
- BEFAEE
- C9FBF1
- D4FCF4
- DFFDF7
- EAFDF9
- F5FEFC
Shades
- 76D5C5
- 64B6A8
- 53988C
- 427B71
- 315F57
- 22443F
- 142B27
- 071512
- 010303
Tones
- 8AE9D9
- 8BDDCE
- 8BD1C4
- 8BC5BA
- 8AB9B0
- 89AEA6
- 87A29D
- 859793
- 838B89
Color harmonies
Complementary +180°
- 89F5E3
Turquoise Pearl
- FFD0DB
≈ Bologna Sausage
Analogous -30° +30°
- 89F5E3
Turquoise Pearl
- AAF2BC
≈ Ultra Mint
- 99EEFF
≈ Alpine Expedition
Triadic +120° +240°
- 89F5E3
Turquoise Pearl
- E5D6FF
≈ Transparent Blue
- FFD5B2
≈ Forgotten Sunset
Split-complementary +150° +210°
- 89F5E3
Turquoise Pearl
- FFCBF6
≈ Kissed by Mist
- FFD2C9
≈ Snow Pa
Tetradic +90° +180° +270°
- 89F5E3
Turquoise Pearl
- D2DDFF
≈ Arc Light
- FFD0DB
≈ Bologna Sausage
- F7DC8C
≈ Yellow Trumpet
Contrast & accessibility
Ag
FailOn white
WCAG 1.29:1 · APCA Lc 14
Ag
AAAOn black
WCAG 16.23:1 · APCA Lc 89
Best text color: #000000
WCAG 16.23:1 (AAA) · APCA Lc 89
Contrast pairs
Code snippets
CSS
:root {
--turquoise-pearl: #89f5e3;
--turquoise-pearl-rgb: 137 245 227;
--turquoise-pearl-oklch: oklch(0.9 0.104 181.9);
}
.element {
color: var(--turquoise-pearl);
background-color: hsl(170 84% 75%);
border-color: oklch(0.9 0.104 181.9);
}Tailwind CSS v4
@theme {
--color-turquoise-pearl: #89f5e3;
--color-turquoise-pearl-50: #d5fff8;
--color-turquoise-pearl-100: #c2f4ec;
--color-turquoise-pearl-200: #a2e3d9;
--color-turquoise-pearl-300: #76c9bd;
--color-turquoise-pearl-400: #4bb2a3;
--color-turquoise-pearl-500: #009c8b;
--color-turquoise-pearl-600: #008476;
--color-turquoise-pearl-700: #046a5e;
--color-turquoise-pearl-800: #044e44;
--color-turquoise-pearl-900: #04362f;
--color-turquoise-pearl-950: #00211b;
}SCSS
$turquoise-pearl: #89f5e3;
$turquoise-pearl-rgb: 137, 245, 227;
$turquoise-pearl-light: mix(#fff, $turquoise-pearl, 20%);
$turquoise-pearl-dark: mix(#000, $turquoise-pearl, 20%);
.element {
color: $turquoise-pearl;
box-shadow: 0 0 0 2px rgba($turquoise-pearl, 0.35);
}