Named color · #13BBAF
Turquoise Topaz
Turquoise Topaz is #13BBAF: rgb(19 187 175), hsl(176 82% 40%), oklch(0.714 0.123 186.6). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Teal mean? → · Turquoise Topaz color name →
#13BBAF
oklch(0.714 0.123 186.6)
Color conversions
- HEX
- #13bbaf
- RGB
- rgb(19 187 175)
- HSL
- hsl(176 82% 40%)
- HWB
- hwb(176 7% 27%)
- OKLCH
- oklch(0.714 0.123 186.6)
- OKLab
- oklab(0.714 -0.122 -0.014)
- CIE Lab
- lab(68.29 -42.15 -5.58)
- LCH
- lch(68.29 42.52 187.5)
- CMYK
- cmyk(90% 0% 6% 27%)
Tints · Shades · Tones
Tints
- 45C2B7
- 61C9BF
- 79D0C6
- 8ED7CE
- A2DED6
- B6E4DE
- C8EBE6
- DBF2EF
- EDF8F7
Shades
- 0FA298
- 0B8A81
- 07736B
- 055C56
- 034641
- 01322E
- 011F1C
- 000D0B
- 000201
Tones
- 34B5AA
- 45AFA5
- 52AAA1
- 5CA49C
- 649E97
- 6B9893
- 72928E
- 778C89
- 7C8685
Color harmonies
Complementary +180°
- 13BBAF
Turquoise Topaz
- E38196
≈ Carissima
Analogous -30° +30°
- 13BBAF
Turquoise Topaz
- 59BA83
≈ Bleached Olive
- 1DB5D4
≈ Ocean Sigh
Triadic +120° +240°
- 13BBAF
Turquoise Topaz
- B68EDF
≈ Luminous Lavender
- D69247
≈ Suede Vest
Split-complementary +150° +210°
- 13BBAF
Turquoise Topaz
- D384BF
≈ Pink Punk
- E4866B
≈ Brewed Mustard
Tetradic +90° +180° +270°
- 13BBAF
Turquoise Topaz
- 8F9BEF
≈ Periwinkle Blue
- E38196
≈ Carissima
- B9A23C
≈ Sea Squash
Contrast & accessibility
Ag
FailOn white
WCAG 2.39:1 · APCA Lc 47
Ag
AAAOn black
WCAG 8.75:1 · APCA Lc 55
Best text color: #000000
WCAG 8.75:1 (AAA) · APCA Lc 55
Contrast pairs
Code snippets
CSS
:root {
--turquoise-topaz: #13bbaf;
--turquoise-topaz-rgb: 19 187 175;
--turquoise-topaz-oklch: oklch(0.714 0.123 186.6);
}
.element {
color: var(--turquoise-topaz);
background-color: hsl(176 82% 40%);
border-color: oklch(0.714 0.123 186.6);
}Tailwind CSS v4
@theme {
--color-turquoise-topaz: #13bbaf;
--color-turquoise-topaz-50: #cefffc;
--color-turquoise-topaz-100: #b9f6f0;
--color-turquoise-topaz-200: #95e6de;
--color-turquoise-topaz-300: #63ccc4;
--color-turquoise-topaz-400: #22b5aa;
--color-turquoise-topaz-500: #009f93;
--color-turquoise-topaz-600: #00867c;
--color-turquoise-topaz-700: #006c64;
--color-turquoise-topaz-800: #005048;
--color-turquoise-topaz-900: #003732;
--color-turquoise-topaz-950: #00221e;
}SCSS
$turquoise-topaz: #13bbaf;
$turquoise-topaz-rgb: 19, 187, 175;
$turquoise-topaz-light: mix(#fff, $turquoise-topaz, 20%);
$turquoise-topaz-dark: mix(#000, $turquoise-topaz, 20%);
.element {
color: $turquoise-topaz;
box-shadow: 0 0 0 2px rgba($turquoise-topaz, 0.35);
}