UI Shades

A study in green

Material Green 500

#4CAF50

Family
Green
L
0.673
C
0.162
H
144°

Notes

Material Green 500 is the warm mid-green used for success states, completed badges, and primary positive actions in Material Design 2. The hex reads as friendly and natural rather than clinical. Common as a confirmation colour in Material-themed projects, paired with deep gray for type and a single saturated accent for primary actions. Body text against white passes AA only at sizes 18px and above; below that, the value should appear with dark text overlays. Like other Material 2 fixed-palette stops, it was superseded by Material 3's tonal palette generation but remains heavily referenced in legacy Android codebases and confirmation-state design tokens.

#4caf50
Material Green 500
Material Green 500
#4caf50
oklch(0.673 0.162 144.21)
rgb(76 175 80)
hsl(122.4 39.4% 49.2%)
Share
#efffee
#e1fde0
#c1f6c0
#9eeb9d
#71cd72
#4caf50
#208a2a
#027317
#005407
#003a00
#001f00

See your palette on a real UI - coming soon

Preview these shades across buttons, cards, and components in a live interface.

Plate 02

Palette built around Material Green 500

Cross-reference
Q&A

Frequently asked questions

What is Material Green 500?

Material Green 500 is the warm mid-green used for success states, completed badges, and primary positive actions in Material Design 2. The hex reads as friendly and natural rather than clinical. Its hex code is #4CAF50.

What are the tints and shades of Material Green 500?

uishades builds an 11-step OKLCH ramp for Material Green 500 (#4CAF50) - its lightest tints through its darkest shades - plus an 11-stop Tailwind scale (50–950), both keyed to the same 50–950 stops. Lightness steps stay evenly spaced and the hue stays stable, so the mid-tones don't go muddy.

What colors pair well with Material Green 500?

Its complementary color is #C66FCE. Triadic partners are #6291F9 and #E96763; analogous neighbours are #00B38F and #96A000.

What are the OKLCH and RGB values of Material Green 500?

Material Green 500 is #4CAF50 - OKLCH 0.673 0.162 144°, rgb(76 175 80), in the green family.