Named color · #0CB577
Green Teal
Green Teal is #0CB577: rgb(12 181 119), hsl(158 88% 38%), oklch(0.683 0.153 159.7). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Green mean? → · Green Teal color name →
#0CB577
oklch(0.683 0.153 159.7)
Color conversions
- HEX
- #0cb577
- RGB
- rgb(12 181 119)
- HSL
- hsl(158 88% 38%)
- HWB
- hwb(158 5% 29%)
- OKLCH
- oklch(0.683 0.153 159.7)
- OKLab
- oklab(0.683 -0.144 0.053)
- CIE Lab
- lab(65.22 -51.21 20.39)
- LCH
- lch(65.22 55.12 158.3)
- CMYK
- cmyk(93% 0% 34% 29%)
Tints · Shades · Tones
Tints
- 41BD84
- 5DC491
- 75CC9F
- 8BD3AC
- 9FDBBA
- B3E2C7
- C7EAD5
- DAF1E3
- ECF8F1
Shades
- 099D67
- 068657
- 046F47
- 035938
- 02442A
- 01301C
- 001D10
- 000C05
- 000201
Tones
- 30B078
- 42AB79
- 4FA67A
- 59A07B
- 629B7C
- 69967D
- 70917E
- 768B7F
- 7B867F
Color harmonies
Complementary +180°
- 0CB577
Green Teal
- D570B7
≈ Purple Hollyhock
Analogous -30° +30°
- 0CB577
Green Teal
- 7AAB38
≈ Mamba Green
- 00B0A9
≈ Tropical Tree
Triadic +120° +240°
- 0CB577
Green Teal
- 888CF5
≈ Lavender Blue Shadow
- E6734B
≈ Bloodletter
Split-complementary +150° +210°
- 0CB577
Green Teal
- B67CDF
≈ Lavender Blossom
- E66C84
≈ Cherry Brandy
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 2.66:1 · APCA Lc 51
Ag
AAAOn black
WCAG 7.89:1 · APCA Lc 51
Best text color: #000000
WCAG 7.89:1 (AAA) · APCA Lc 51
Contrast pairs
Code snippets
CSS
:root {
--green-teal: #0cb577;
--green-teal-rgb: 12 181 119;
--green-teal-oklch: oklch(0.683 0.153 159.7);
}
.element {
color: var(--green-teal);
background-color: hsl(158 88% 38%);
border-color: oklch(0.683 0.153 159.7);
}Tailwind CSS v4
@theme {
--color-green-teal: #0cb577;
--color-green-teal-50: #cfffe8;
--color-green-teal-100: #baf9d8;
--color-green-teal-200: #96e9c0;
--color-green-teal-300: #65d09f;
--color-green-teal-400: #2eb97e;
--color-green-teal-500: #00a361;
--color-green-teal-600: #008a52;
--color-green-teal-700: #006f42;
--color-green-teal-800: #00512d;
--color-green-teal-900: #00391e;
--color-green-teal-950: #00230e;
}SCSS
$green-teal: #0cb577;
$green-teal-rgb: 12, 181, 119;
$green-teal-light: mix(#fff, $green-teal, 20%);
$green-teal-dark: mix(#000, $green-teal, 20%);
.element {
color: $green-teal;
box-shadow: 0 0 0 2px rgba($green-teal, 0.35);
}