Named color · #7FB6A4
Key Largo
Key Largo is #7FB6A4: rgb(127 182 164), hsl(160 27% 61%), oklch(0.733 0.063 172.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Teal mean? → · Key Largo color name →
#7FB6A4
oklch(0.733 0.063 172.1)
Color conversions
- HEX
- #7fb6a4
- RGB
- rgb(127 182 164)
- HSL
- hsl(160 27% 61%)
- HWB
- hwb(160 50% 29%)
- OKLCH
- oklch(0.733 0.063 172.1)
- OKLab
- oklab(0.733 -0.063 0.009)
- CIE Lab
- lab(69.83 -21.7 3.13)
- LCH
- lch(69.83 21.92 171.8)
- CMYK
- cmyk(30% 0% 10% 29%)
Tints · Shades · Tones
Tints
- 8CBDAD
- 99C4B6
- A6CCBF
- B2D3C8
- BFDAD1
- CCE2DA
- D9E9E3
- E5F0EC
- F2F8F6
Shades
- 6E9E8E
- 5D8679
- 4C6F64
- 3C5950
- 2D443D
- 1F302B
- 111D1A
- 060C0A
- 010201
Tones
- 80B1A0
- 80AB9D
- 81A699
- 81A095
- 819B92
- 81958E
- 81908B
- 818B87
- 808584
Color harmonies
Complementary +180°
- 7FB6A4
Key Largo
- C999AD
≈ Rosebay
Analogous -30° +30°
- 7FB6A4
Key Largo
- 92B38E
≈ Mountain Fern
- 78B5BA
≈ Aqua Blue
Triadic +120° +240°
- 7FB6A4
Key Largo
- A9A2CE
≈ Puturple
- CA9E84
≈ Desert Carnation
Split-complementary +150° +210°
- 7FB6A4
Key Largo
- BC9CC1
≈ Lupine
- CE9997
≈ Silk Stone
Tetradic +90° +180° +270°
- 7FB6A4
Key Largo
- 93A9D1
≈ Serenity
- C999AD
≈ Rosebay
- BDA57B
≈ Sonora Hills
Contrast & accessibility
Ag
FailOn white
WCAG 2.30:1 · APCA Lc 45
Ag
AAAOn black
WCAG 9.12:1 · APCA Lc 57
Best text color: #000000
WCAG 9.12:1 (AAA) · APCA Lc 57
Contrast pairs
Code snippets
CSS
:root {
--key-largo: #7fb6a4;
--key-largo-rgb: 127 182 164;
--key-largo-oklch: oklch(0.733 0.063 172.1);
}
.element {
color: var(--key-largo);
background-color: hsl(160 27% 61%);
border-color: oklch(0.733 0.063 172.1);
}Tailwind CSS v4
@theme {
--color-key-largo: #7fb6a4;
--color-key-largo-50: #e4fbf4;
--color-key-largo-100: #d3efe6;
--color-key-largo-200: #b9ded2;
--color-key-largo-300: #96c2b5;
--color-key-largo-400: #77ab9a;
--color-key-largo-500: #589481;
--color-key-largo-600: #4b7d6e;
--color-key-largo-700: #3c6458;
--color-key-largo-800: #2b4a3f;
--color-key-largo-900: #1d332b;
--color-key-largo-950: #0d1f19;
}SCSS
$key-largo: #7fb6a4;
$key-largo-rgb: 127, 182, 164;
$key-largo-light: mix(#fff, $key-largo, 20%);
$key-largo-dark: mix(#000, $key-largo, 20%);
.element {
color: $key-largo;
box-shadow: 0 0 0 2px rgba($key-largo, 0.35);
}