Sign Up Sign Up
Code Green

Code Green

4-color palette · Neutral · Dark · Monochromatic harmony

Back to Library

Code Green

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

Modify
Vibrant 4 colors Neutral Dark Monochromatic
Likes 3
Colors 4

CSS variables

:root {
  --c-vibrant-1: #031700;
  --c-vibrant-2: #0A4E00;
  --c-vibrant-3: #15A600;
  --c-vibrant-4: #BEFFB4;
}

About this palette

This 4-color vibrant palette runs from Glow in the Dark (#BEFFB4) as its lightest tone to Oil Slick (#031700) as its darkest. It blends Oil Slick, Malachite Green, Peter Pan and Glow in the Dark into a single set you can drop straight into a UI. Of its 6 color pairings, 3 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #031700 on #BEFFB4 at 16.12:1.

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

Color breakdown

Oil Slick #031700
RGB
rgb(3, 23, 0)
HSL
hsl(112, 100%, 5%)
Luminance
0.006
Malachite Green #0A4E00
RGB
rgb(10, 78, 0)
HSL
hsl(112, 100%, 15%)
Luminance
0.055
Peter Pan #15A600
RGB
rgb(21, 166, 0)
HSL
hsl(112, 100%, 33%)
Luminance
0.274
Glow in the Dark #BEFFB4
RGB
rgb(190, 255, 180)
HSL
hsl(112, 100%, 85%)
Luminance
0.858

Contrast & accessibility

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

Aa #031700 on #BEFFB4 16.12:1 AAA
Aa #0A4E00 on #BEFFB4 8.63:1 AAA
Aa #031700 on #15A600 5.76:1 AA
Aa #0A4E00 on #15A600 3.08:1 AA Large
Aa #15A600 on #BEFFB4 2.80:1 Fail
Aa #031700 on #0A4E00 1.87: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