TechCompare LogoTechCompare
Showing centimeters. Press to switch to inches.Showing inches. Press to switch to centimeters.

#4CAF50: Material Design Green 500 codes and contrast

By TechCompare · Updated · How we check

#4CAF50 is rgb(76, 175, 80), Green 500 in Google's Material Design palette. WCAG 2 wants black text on it, at 7.56:1. White text scores 2.78:1 and fails even for large text.

#4CAF50

Color Codes

  • HEX#4CAF50
  • RGBrgb(76, 175, 80)
  • HSLhsl(122, 39%, 49%)
  • OKLCHoklch(67.31% 0.1624 144.21)

Text on #4CAF50

White Text

Aa

The quick brown fox jumps over the lazy dog.

2.78:1APCA Lc -58.5

  • AA Normal (4.5:1)Fail
  • AA Large (3:1)Fail
  • AAA Normal (7:1)Fail
  • AAA Large (4.5:1)Fail
Check White Text in Contrast Checker

Black Text

Aa

The quick brown fox jumps over the lazy dog.

7.56:1APCA Lc 50.8

  • AA Normal (4.5:1)Pass
  • AA Large (3:1)Pass
  • AAA Normal (7:1)Pass
  • AAA Large (4.5:1)Pass
Check Black Text in Contrast Checker

WCAG 2 ratios are the same whichever color is the text, so they also hold for #4CAF50 text on a white or black page. APCA is a newer method that isn't part of any WCAG standard, and a minus sign means light text on dark.

#4CAF50 in the Color Picker. Tweak it with HSL or OKLCH sliders, or compare it with a second color.
Edit in the full tool

#4CAF50 mixes 76 red, 175 green and 80 blue into a medium, slightly soft green. It's Green 500 in the Material Design color palette, the main shade of its green swatch, and Flutter's Colors.green is this exact value. The cards above give its codes and test white and black text on it. Below are 4 lighter and 4 darker shades, and the named colors that come closest.

Shades

Same hue and chroma in OKLCH, with even steps of lightness. Open any shade in the Color Picker.

  1. #CFFFCE
  2. #95F896
  3. #7DDF7E
  4. #65C767
  5. Base#4CAF50
  6. #2B9233
  7. #007510
  8. #005900
  9. #003C00

Nearest Named Colors

  • CSS Name

    mediumseagreen

    #3CB371

    CloseΔE OK 0.036

  • Tailwind 4

    green-600

    oklch(62.7% 0.194 149.214)

    Outside sRGB, so the closest hex is #00A63E

    Not CloseΔE OK 0.058

  • Tailwind 3

    lime-600

    #65A30D

    CloseΔE OK 0.046

About #4CAF50

Material Design gives each hue a swatch of shades from 50 to 900, and the 500 step is the swatch's main color. For green, the swatch runs from Green 50, #E8F5E9, to Green 900, #1B5E20, with #4CAF50 in the middle. Flutter ships the same values, so Colors.green.shade700 is #388E3C and shade800 is #2E7D32.

Green buttons with white labels are a common sight, but on #4CAF50 that pairing fails WCAG 2. White text scores 2.78:1, under even the 3:1 for large text. Black text scores 7.56:1 and passes AAA. APCA, a newer method that isn't part of any WCAG standard, leans the other way and rates white text a little ahead, at Lc -58.5 against Lc 50.8 for black.

To keep white labels, darken the green. The first darker step, #2B9233, gets white text to 3.99:1, enough only for large text. The second, #007510, reaches 5.91:1 and passes AA. Inside Material's own swatch, Green 700 still falls short at 4.12:1, and Green 800 passes at 5.13:1.

Verdict

Use #4CAF50 for success states, badges, icons and chart series, with black text when text sits on it. Don't put white text on it: at 2.78:1 it fails WCAG 2 at every size. For a green button with a white label, step down to Green 800, #2E7D32, or the second darker shade below.

Don't let green carry meaning on its own. Red and green are the pair people with the most common kinds of color blindness mix up, so give a success state an icon or a word as well.

More Color scenarios

Hex to RGB
A hex color code is three RGB numbers written in base 16.
View details
RGB vs CMYK
Screens add light and print adds ink. See one color in both, and why a plain CMYK formula can't promise a print match.
View details
HSL color model
Hue, saturation and lightness, with three live sliders and a table of common colors in hex, RGB and HSL.
View details

Related guides

#00FF00
Pure green, the color CSS calls lime.
View guide
#FF0000
Pure red, and the red text that still passes AA.
View guide
Large text contrast
Where a ratio between 3:1 and 4.5:1 still passes WCAG.
View guide
Hex to RGB
How the six digits of a hex code turn into red, green and blue.
View guide

Frequently asked questions

What color is #4CAF50?
A medium green: rgb(76, 175, 80), hsl(122, 39%, 49%) or oklch(67.31% 0.1624 144.21). It's Green 500 in the Material Design palette. CSS has no name for it. The nearest is mediumseagreen (#3CB371), 0.036 away in OKLab, close but easy to tell apart.
Can I use white text on #4CAF50?
Not if you need to pass WCAG 2. White text scores 2.78:1, which fails AA even for large text. Black text scores 7.56:1 and passes AAA. For white text, darken it to #007510 or to Material's Green 800, #2E7D32.
Is #4CAF50 a Tailwind color?
No. The nearest in Tailwind 3 is lime-600 (#65A30D), and in Tailwind 4 it's green-600 (oklch(62.7% 0.194 149.214)). Neither is a match, so add #4CAF50 as a custom color if you need it.

Related tools

Contrast Checker

Check color contrast ratios for WCAG AA/AAA accessibility compliance.

Use tool

JSON Formatter

Validate, format, and minify JSON. Browse it as a tree, run JSONPath queries, compare two documents, or validate against a JSON Schema.

Use tool

Aspect Ratio Visualizer

Visually compare width differences between 16:9, 21:9, and 32:9 monitors.

Use tool