Pastel Green
#77dd77
Soft, balanced pastel green for friendly layouts
About Pastel Green
Pastel Green always reads like dyed greenhouse glass to me. Same "green" signal you want, but it's softened and airy, not dense or processed-looking like Grotesque Green, and it doesn't glow with that high-energy shine like Fluorescence or Electric Lettuce.
I use it when the UI needs a calm success or confirmation that still feels clearly botanical. It's great for onboarding checkmarks in consumer apps, wellness and habit screens where you don't want the intensity to feel pushy, and sustainability reporting cards that sit beside charts and data tables. Because it's light with a gentle undertone, it stays friendly in product thumbnails and category tiles without drifting toward mint candy or neon tape.
One quirk: Pastel Green can look a touch washed out next to very saturated status colors, so it helps to pair it with a deeper green for states and a neutral gray for body text. I like it as the softer step in a two-tone workflow, not the loudest one.
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
On Gray 100 #f5f5f5
On Gray 900 #18181b
On Black #000000
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
Suggested palettes
Palettes built around this color.
Community palettes
Published palettes that include this color.