Named color · #009D94
Caribbean Turquoise
Caribbean Turquoise is #009D94: rgb(0 157 148), hsl(177 100% 31%), oklch(0.627 0.109 187.6). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Teal mean? → · Caribbean Turquoise color name →
#009D94
oklch(0.627 0.109 187.6)
Color conversions
- HEX
- #009d94
- RGB
- rgb(0 157 148)
- HSL
- hsl(177 100% 31%)
- HWB
- hwb(177 0% 38%)
- OKLCH
- oklch(0.627 0.109 187.6)
- OKLab
- oklab(0.627 -0.108 -0.015)
- CIE Lab
- lab(58 -37.41 -5.69)
- LCH
- lch(58 37.84 188.6)
- CMYK
- cmyk(100% 0% 6% 38%)
Tints · Shades · Tones
Tints
- 3AA79E
- 56B1A9
- 6FBAB3
- 85C4BE
- 9ACEC8
- AFD8D3
- C3E2DE
- D7EBE9
- EBF5F4
Shades
- 008880
- 00736D
- 005F5A
- 004C48
- 003A36
- 002826
- 001816
- 000908
- 000101
Tones
- 299A92
- 3B9890
- 49958E
- 54928C
- 5D8F8A
- 658C88
- 6D8986
- 748684
- 7A8382
Color harmonies
Complementary +180°
- 009D94
Caribbean Turquoise
- C06B7C
≈ Pink Manhattan
Analogous -30° +30°
- 009D94
Caribbean Turquoise
- 469C6E
≈ Solitary Tree
- 1398B4
≈ Pelorus
Triadic +120° +240°
- 009D94
Caribbean Turquoise
- 9A76BB
≈ Purple Pride
- B47A37
≈ Durian
Split-complementary +150° +210°
- 009D94
Caribbean Turquoise
- B26DA0
≈ Pink Parade
- C06F57
≈ Before Winter
Tetradic +90° +180° +270°
- 009D94
Caribbean Turquoise
- 7981C9
≈ Twilight Twinkle
- C06B7C
≈ Pink Manhattan
- 9A8830
≈ Parsnip Root
Contrast & accessibility
Ag
FailOn white
WCAG 3.35:1 · APCA Lc 60
Ag
AAOn black
WCAG 6.25:1 · APCA Lc 41
Best text color: #000000
WCAG 6.25:1 (AA) · APCA Lc 41
Contrast pairs
Code snippets
CSS
:root {
--caribbean-turquoise: #009d94;
--caribbean-turquoise-rgb: 0 157 148;
--caribbean-turquoise-oklch: oklch(0.627 0.109 187.6);
}
.element {
color: var(--caribbean-turquoise);
background-color: hsl(177 100% 31%);
border-color: oklch(0.627 0.109 187.6);
}Tailwind CSS v4
@theme {
--color-caribbean-turquoise: #009d94;
--color-caribbean-turquoise-50: #d3fffc;
--color-caribbean-turquoise-100: #bff4f0;
--color-caribbean-turquoise-200: #9de4de;
--color-caribbean-turquoise-300: #6fcac3;
--color-caribbean-turquoise-400: #3eb3aa;
--color-caribbean-turquoise-500: #009d93;
--color-caribbean-turquoise-600: #00847c;
--color-caribbean-turquoise-700: #006a64;
--color-caribbean-turquoise-800: #004e48;
--color-caribbean-turquoise-900: #003632;
--color-caribbean-turquoise-950: #00211e;
}SCSS
$caribbean-turquoise: #009d94;
$caribbean-turquoise-rgb: 0, 157, 148;
$caribbean-turquoise-light: mix(#fff, $caribbean-turquoise, 20%);
$caribbean-turquoise-dark: mix(#000, $caribbean-turquoise, 20%);
.element {
color: $caribbean-turquoise;
box-shadow: 0 0 0 2px rgba($caribbean-turquoise, 0.35);
}