Named color · #5E774A
Jolly Green
Jolly Green is #5E774A: rgb(94 119 74), hsl(93 23% 38%), oklch(0.537 0.073 132.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Green mean? → · Jolly Green color name →
#5E774A
oklch(0.537 0.073 132.1)
Color conversions
- HEX
- #5e774a
- RGB
- rgb(94 119 74)
- HSL
- hsl(93 23% 38%)
- HWB
- hwb(93 29% 53%)
- OKLCH
- oklch(0.537 0.073 132.1)
- OKLab
- oklab(0.537 -0.049 0.054)
- CIE Lab
- lab(47.14 -16.02 21.68)
- LCH
- lch(47.14 26.96 126.5)
- CMYK
- cmyk(21% 0% 38% 53%)
Tints · Shades · Tones
Tints
- 6D845B
- 7C916C
- 8C9E7E
- 9BAC8F
- ABB9A1
- BCC7B4
- CCD5C6
- DDE3D9
- EEF1EC
Shades
- 51673F
- 445735
- 37472A
- 2B3820
- 1F2A17
- 141C0E
- 0A1006
- 030502
- 000100
Tones
- 617850
- 657955
- 687A5B
- 6C7B60
- 6F7C66
- 727D6B
- 767E70
- 797E76
- 7D7F7B
Color harmonies
Complementary +180°
- 5E774A
Jolly Green
- 7C628D
≈ Plum Power
Analogous -30° +30°
- 5E774A
Jolly Green
- 76703B
≈ Garden Weed
- 447B61
≈ Leaping Lizard
Triadic +120° +240°
- 5E774A
Jolly Green
- 4E7197
≈ Riverside
- 935C62
≈ Ruby Crystal
Split-complementary +150° +210°
- 5E774A
Jolly Green
- 676997
≈ Wild Wisteria
- 8B5D7A
≈ Argyle Purple
Tetradic +90° +180° +270°
- 5E774A
Jolly Green
- 37778C
≈ Adventure
- 7C628D
≈ Plum Power
- 92604C
≈ Weathered Leather
Contrast & accessibility
Ag
AAOn white
WCAG 4.98:1 · APCA Lc 74
Ag
FailOn black
WCAG 4.21:1 · APCA Lc 27
Best text color: #FFFFFF
WCAG 4.98:1 (AA) · APCA Lc 74
Contrast pairs
Code snippets
CSS
:root {
--jolly-green: #5e774a;
--jolly-green-rgb: 94 119 74;
--jolly-green-oklch: oklch(0.537 0.073 132.1);
}
.element {
color: var(--jolly-green);
background-color: hsl(93 23% 38%);
border-color: oklch(0.537 0.073 132.1);
}Tailwind CSS v4
@theme {
--color-jolly-green: #5e774a;
--color-jolly-green-50: #edfae5;
--color-jolly-green-100: #deeed5;
--color-jolly-green-200: #c8dcbc;
--color-jolly-green-300: #a8c09a;
--color-jolly-green-400: #8ea87b;
--color-jolly-green-500: #74915d;
--color-jolly-green-600: #627a50;
--color-jolly-green-700: #4f623f;
--color-jolly-green-800: #3a482c;
--color-jolly-green-900: #28321e;
--color-jolly-green-950: #161d0e;
}SCSS
$jolly-green: #5e774a;
$jolly-green-rgb: 94, 119, 74;
$jolly-green-light: mix(#fff, $jolly-green, 20%);
$jolly-green-dark: mix(#000, $jolly-green, 20%);
.element {
color: $jolly-green;
box-shadow: 0 0 0 2px rgba($jolly-green, 0.35);
}