Grass Is Greener

#3f9b0b

Medium, cool-leaning green for calm, readable surfaces

Save
Share

About Grass Is Greener

On my screen, Grass Is Greener lands like a bright lawn-green marker stroke, lighter and cleaner than 's Dream, but with none of that slick damp-leaf feel. It also doesn't tip as cool as Hanging Gardens of Babylon, and it avoids the sharper, more "lit" performance vibe of . This one reads noticeably more balanced in undertone, so it feels fresh without becoming either mossy or neon.

I use it for dashboards and finance apps styling when I want green confidence that still feels like it belongs to the UI, not like a warning light. Think manufacturing control panels, inventory status chips, ops targets, and product release trackers where you need positive states to be quick to parse on light concrete, paper-white, and pale gray cards. The saturation stays controlled enough for table-heavy layouts, and it holds legibility in small legends without drifting toward yellow-green.

Quirk: it can look a touch more "sunny" next to very icy neutrals, so I'll anchor it with charcoal text or a cooler green-neutral for panels that must feel strict.

Gradient preview

See how this color looks in an animated mesh gradient.

Conversions

Click any value to copy.

Need this programmatically? Color API

Code snippets

Copy this color into your project.

Contrast checker

WCAG 2.1 contrast ratios. AA requires 4.5:1 for normal text, 3:1 for large. AAA requires 7:1 / 4.5:1.

On White #ffffff

Aa
3.56:1FailAA Large

On Gray 100 #f5f5f5

Aa
3.26:1FailAA Large

On Gray 900 #18181b

Aa
4.98:1AAAAA Large

On Black #000000

Aa
5.90:1AAAAA Large

Variations

Shades

Darker variations, created by mixing toward black.

Tints

Lighter variations, created by mixing toward white.

Tones

Muted variations, created by reducing saturation.

Hues

Hue rotations around the color wheel.

Temperatures

Warm and cool shifts of this color.

Color harmonies

Complementary
Analogous
Triadic
Split Complementary
Tetradic

Suggested palettes

Palettes built around this color.

4 colors
3 colors
4 colors
4 colors

Community palettes

Published palettes that include this color.

Create a gradient with Grass Is Greener

Open the generator with this color pre-loaded.

Start creating