Named color · #4F9E96
Tourmaline Turquoise
Tourmaline Turquoise is #4F9E96: rgb(79 158 150), hsl(174 33% 46%), oklch(0.647 0.079 186.8). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Teal mean? → · Tourmaline Turquoise color name →
#4F9E96
oklch(0.647 0.079 186.8)
Color conversions
- HEX
- #4f9e96
- RGB
- rgb(79 158 150)
- HSL
- hsl(174 33% 46%)
- HWB
- hwb(174 31% 38%)
- OKLCH
- oklch(0.647 0.079 186.8)
- OKLab
- oklab(0.647 -0.078 -0.009)
- CIE Lab
- lab(59.98 -26.95 -3.7)
- LCH
- lch(59.98 27.21 187.8)
- CMYK
- cmyk(50% 0% 5% 38%)
Tints · Shades · Tones
Tints
- 63A8A0
- 75B1AA
- 87BBB4
- 98C4BF
- A9CEC9
- BAD8D4
- CCE1DE
- DDEBE9
- EEF5F4
Shades
- 448982
- 38746E
- 2E605B
- 234D49
- 193A37
- 102926
- 071816
- 020908
- 000101
Tones
- 569B94
- 5D9892
- 62958F
- 68928D
- 6C8F8B
- 718C89
- 758987
- 798684
- 7D8382
Color harmonies
Complementary +180°
- 4F9E96
Tourmaline Turquoise
- B87A86
≈ Foxglove
Analogous -30° +30°
- 4F9E96
Tourmaline Turquoise
- 649D7B
≈ Dying Moss
- 509AAD
≈ Starflower Blue
Triadic +120° +240°
- 4F9E96
Tourmaline Turquoise
- 9B82B4
≈ Bougainvillaea
- AF8559
≈ Autumn
Split-complementary +150° +210°
- 4F9E96
Tourmaline Turquoise
- AE7CA0
≈ Usu Pink
- B97D6C
≈ Faneuil Brick
Tetradic +90° +180° +270°
- 4F9E96
Tourmaline Turquoise
- 828ABE
≈ Pleated Mauve
- B87A86
≈ Foxglove
- 9C8F55
≈ Dijonnaise
Contrast & accessibility
Ag
FailOn white
WCAG 3.15:1 · APCA Lc 58
Ag
AAOn black
WCAG 6.66:1 · APCA Lc 43
Best text color: #000000
WCAG 6.66:1 (AA) · APCA Lc 43
Contrast pairs
Code snippets
CSS
:root {
--tourmaline-turquoise: #4f9e96;
--tourmaline-turquoise-rgb: 79 158 150;
--tourmaline-turquoise-oklch: oklch(0.647 0.079 186.8);
}
.element {
color: var(--tourmaline-turquoise);
background-color: hsl(174 33% 46%);
border-color: oklch(0.647 0.079 186.8);
}Tailwind CSS v4
@theme {
--color-tourmaline-turquoise: #4f9e96;
--color-tourmaline-turquoise-50: #ddfdfa;
--color-tourmaline-turquoise-100: #cbf1ed;
--color-tourmaline-turquoise-200: #aee0db;
--color-tourmaline-turquoise-300: #88c5bf;
--color-tourmaline-turquoise-400: #64aea6;
--color-tourmaline-turquoise-500: #3c978f;
--color-tourmaline-turquoise-600: #348079;
--color-tourmaline-turquoise-700: #2a6661;
--color-tourmaline-turquoise-800: #1d4b46;
--color-tourmaline-turquoise-900: #133430;
--color-tourmaline-turquoise-950: #04201d;
}SCSS
$tourmaline-turquoise: #4f9e96;
$tourmaline-turquoise-rgb: 79, 158, 150;
$tourmaline-turquoise-light: mix(#fff, $tourmaline-turquoise, 20%);
$tourmaline-turquoise-dark: mix(#000, $tourmaline-turquoise, 20%);
.element {
color: $tourmaline-turquoise;
box-shadow: 0 0 0 2px rgba($tourmaline-turquoise, 0.35);
}