Named color · #0AAFA4
Cozumel
Cozumel is #0AAFA4: rgb(10 175 164), hsl(176 89% 36%), oklch(0.679 0.117 186.9). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Teal mean? → · Cozumel color name →
#0AAFA4
oklch(0.679 0.117 186.9)
Color conversions
- HEX
- #0aafa4
- RGB
- rgb(10 175 164)
- HSL
- hsl(176 89% 36%)
- HWB
- hwb(176 4% 31%)
- OKLCH
- oklch(0.679 0.117 186.9)
- OKLab
- oklab(0.679 -0.117 -0.014)
- CIE Lab
- lab(64.2 -40.38 -5.53)
- LCH
- lch(64.2 40.76 187.8)
- CMYK
- cmyk(94% 0% 6% 31%)
Tints · Shades · Tones
Tints
- 40B7AD
- 5DBFB6
- 75C7BF
- 8ACFC8
- 9FD7D1
- B3DFDA
- C6E7E3
- D9EFEC
- ECF7F6
Shades
- 07988E
- 058179
- 036B64
- 025650
- 01413D
- 012E2B
- 001C1A
- 000B0A
- 000101
Tones
- 2FAAA0
- 41A69D
- 4EA199
- 589D95
- 619892
- 69938E
- 708F8B
- 768A87
- 7B8584
Color harmonies
Complementary +180°
- 0AAFA4
Cozumel
- D5788C
≈ Minuette
Analogous -30° +30°
- 0AAFA4
Cozumel
- 51AE7A
≈ Divot
- 18A9C7
≈ Pacific Blue
Triadic +120° +240°
- 0AAFA4
Cozumel
- AB84D1
≈ Middy’s Purple
- C88940
≈ Golden Leaf
Split-complementary +150° +210°
- 0AAFA4
Cozumel
- C67BB3
≈ Peruvian Lily
- D67D63
≈ Silithus Brown
Tetradic +90° +180° +270°
- 0AAFA4
Cozumel
- 8691E0
≈ Perrywinkle
- D5788C
≈ Minuette
- AD9837
≈ Mana
Contrast & accessibility
Ag
FailOn white
WCAG 2.73:1 · APCA Lc 52
Ag
AAAOn black
WCAG 7.68:1 · APCA Lc 50
Best text color: #000000
WCAG 7.68:1 (AAA) · APCA Lc 50
Contrast pairs
Code snippets
CSS
:root {
--cozumel: #0aafa4;
--cozumel-rgb: 10 175 164;
--cozumel-oklch: oklch(0.679 0.117 186.9);
}
.element {
color: var(--cozumel);
background-color: hsl(176 89% 36%);
border-color: oklch(0.679 0.117 186.9);
}Tailwind CSS v4
@theme {
--color-cozumel: #0aafa4;
--color-cozumel-50: #d0fffc;
--color-cozumel-100: #bbf5f0;
--color-cozumel-200: #98e5de;
--color-cozumel-300: #68cbc3;
--color-cozumel-400: #2fb5aa;
--color-cozumel-500: #009e93;
--color-cozumel-600: #00867c;
--color-cozumel-700: #006b63;
--color-cozumel-800: #004f48;
--color-cozumel-900: #003732;
--color-cozumel-950: #00221e;
}SCSS
$cozumel: #0aafa4;
$cozumel-rgb: 10, 175, 164;
$cozumel-light: mix(#fff, $cozumel, 20%);
$cozumel-dark: mix(#000, $cozumel, 20%);
.element {
color: $cozumel;
box-shadow: 0 0 0 2px rgba($cozumel, 0.35);
}