Nearest named color · #4DAB86
#4DAB86
Nearest named color: Herbal
#4DAB86 (rgb(77 171 134), hsl(156 38% 49%), oklch(0.674 0.106 164.9)) is closest to the named color Herbal. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#4DAB86
oklch(0.674 0.106 164.9)
Color conversions
- HEX
- #4dab86
- RGB
- rgb(77 171 134)
- HSL
- hsl(156 38% 49%)
- HWB
- hwb(156 30% 33%)
- OKLCH
- oklch(0.674 0.106 164.9)
- OKLab
- oklab(0.674 -0.102 0.028)
- CIE Lab
- lab(63.58 -35.98 10.3)
- LCH
- lch(63.58 37.42 164)
- CMYK
- cmyk(55% 0% 22% 33%)
Tints · Shades · Tones
Tints
- 62B392
- 75BC9D
- 87C4A9
- 99CDB5
- AAD5C1
- BBDDCD
- CCE6D9
- DDEEE6
- EEF7F2
Shades
- 429474
- 377E62
- 2C6851
- 225440
- 184030
- 0F2D21
- 071B13
- 020B06
- 000101
Tones
- 55A785
- 5CA385
- 629E84
- 689A84
- 6D9683
- 719283
- 768D82
- 798981
- 7D8481
Color harmonies
Complementary +180°
- 4DAB86
Herbal
- C57BA5
≈ Strawberry Freeze
Analogous -30° +30°
- 4DAB86
Herbal
- 7AA561
≈ Dull Green
- 29AAAA
≈ Blue Island
Triadic +120° +240°
- 4DAB86
Herbal
- 908DD5
≈ Adora
- CC815E
≈ Apricot Brown
Split-complementary +150° +210°
- 4DAB86
Herbal
- AF82C3
≈ Wisteria
- CF7A81
≈ Dirty Pink
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 2.80:1 · APCA Lc 54
Ag
AAAOn black
WCAG 7.48:1 · APCA Lc 48
Best text color: #000000
WCAG 7.48:1 (AAA) · APCA Lc 48
Contrast pairs
Code snippets
CSS
:root {
--herbal: #4dab86;
--herbal-rgb: 77 171 134;
--herbal-oklch: oklch(0.674 0.106 164.9);
}
.element {
color: var(--herbal);
background-color: hsl(156 38% 49%);
border-color: oklch(0.674 0.106 164.9);
}Tailwind CSS v4
@theme {
--color-herbal: #4dab86;
--color-herbal-50: #d9ffef;
--color-herbal-100: #c7f4e0;
--color-herbal-200: #a9e3cb;
--color-herbal-300: #80c9ac;
--color-herbal-400: #5bb28f;
--color-herbal-500: #2b9c74;
--color-herbal-600: #278463;
--color-herbal-700: #206a4f;
--color-herbal-800: #174e38;
--color-herbal-900: #0f3626;
--color-herbal-950: #022114;
}SCSS
$herbal: #4dab86;
$herbal-rgb: 77, 171, 134;
$herbal-light: mix(#fff, $herbal, 20%);
$herbal-dark: mix(#000, $herbal, 20%);
.element {
color: $herbal;
box-shadow: 0 0 0 2px rgba($herbal, 0.35);
}