Sign Up Sign Up
Four Green

Four Green

4-color palette · Neutral · Dark · Analogous harmony

Back to Library

Four Green

4-color palette · Neutral temperature · Dark tone · Analogous harmony

Modify
Muted 4 colors Neutral Dark Analogous greens grass 4green fourgreen
Likes 27
Colors 4

CSS variables

:root {
  --c-muted-1: #588F3D;
  --c-muted-2: #36633D;
  --c-muted-3: #293D36;
  --c-muted-4: #AABF40;
}

About this palette

This 4-color muted palette runs from Hopscotch (#AABF40) as its lightest tone to Scarab (#293D36) as its darkest. It blends Indica, Genever Green, Scarab and Hopscotch into a single set you can drop straight into a UI. Of its 6 color pairings, 1 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #293D36 on #AABF40 at 5.64:1.

A versatile palette suitable for marketing pages, product hero blocks, illustrations, and accent UI states.

Color breakdown

Indica #588F3D
RGB
rgb(88, 143, 61)
HSL
hsl(100, 40%, 40%)
Luminance
0.221
Genever Green #36633D
RGB
rgb(54, 99, 61)
HSL
hsl(129, 29%, 30%)
Luminance
0.100
Scarab #293D36
RGB
rgb(41, 61, 54)
HSL
hsl(159, 20%, 20%)
Luminance
0.041
Hopscotch #AABF40
RGB
rgb(170, 191, 64)
HSL
hsl(70, 50%, 50%)
Luminance
0.462

Contrast & accessibility

1 of 6 color pairings meet the WCAG AA contrast threshold (4.5:1) for body text.

Aa #293D36 on #AABF40 5.64:1 AA
Aa #36633D on #AABF40 3.40:1 AA Large
Aa #588F3D on #293D36 2.98:1 Fail
Aa #588F3D on #AABF40 1.89:1 Fail
Aa #588F3D on #36633D 1.80:1 Fail
Aa #36633D on #293D36 1.66:1 Fail

Similar palettes

#000000 #3E065F #700B97 #8E05C2
4 colors
#000000 #150050 #3F0071 #FB2576
4 colors
#000000 #3E432E #616F39 #A7D129
4 colors
#4B5D67 #322F3D #59405C #87556F
4 colors
#18230F #27391C #255F38 #1F7D53
4 colors
#FF5200 #6F0000 #00263B #00A1AB
4 colors
#000000 #0F6292 #16FF00 #FFED00
4 colors
#251D3A #2A2550 #E04D01 #FF7700
4 colors