Material Green 400 #439A46

Material Design Palette

Copy-ready color values

HEX#439A46

RGBrgb(67, 154, 70)

HSLhsl(122, 39%, 43%)

HSVhsv(122, 56%, 60%)

CMYK approx.cmyk(56, 0, 55, 40)

Color value table

Format	Value	Copy
HEX	`#439A46`
RGB	`rgb(67, 154, 70)`
HSL	`hsl(122, 39%, 43%)`
HSV	`hsv(122, 56%, 60%)`
CMYK approx.	`cmyk(56, 0, 55, 40)`
CSS keyword	`material-green-400`

Contrast and classification

DarkLightness3.53:1Contrast with white5.95:1Contrast with blackGreen / TealColor family

Shade and tint preview

White 10%
#56A459

White 30%
#7BB87E

White 70%
#C7E1C8

White 90%
#ECF5ED

Black 10%
#3C8B3F

Black 30%
#2F6C31

Black 70%
#142E15

Black 90%
#070F07

Harmony palettes

Complementary

#BC65B9

#CC8ACA

Analogous

#4D9A46

#439050

Triadic

#9A4643

#46439A

Split complementary

#C881C6

#9A5398

Using Material Green 400

Material Green 400 works best when it is chosen with contrast, surrounding colors, and interface state in mind. Use the HEX value for static CSS, RGB when you need channel-level control, and HSL when adjusting lightness or saturation for hover states. The CMYK value is an approximate screen-to-print conversion, so print workflows should still rely on calibrated design software or a printer profile.

CSS, SCSS, and Tailwind examples

:root {
  --color-material-green-400: #439a46;
}

.button-primary {
  background: var(--color-material-green-400);
  color: #000000;
}

$material-green-400: #439a46;

// Tailwind arbitrary value
class="bg-[#439a46] text-white"