Yellow Green Hex Code: #9ACD32 — Shades, RGB & Palette Pairings
Copy the canonical yellow green hex code #9ACD32 plus chartreuse, lime, and lawn green neighbors—pairings for sports, agriculture, and energetic UI.
Yellow Green = #9ACD32
CSS yellowgreen — copy hex, RGB rgb(154, 205, 50), or HSL for tokens, charts, and accent buttons.
Yellow Green Shades — Hex Code Table
Ten stops from light tint through chartreuse, lawn green, and the canonical #9ACD32 row to dark olive. Brighter rows suit badges; #9ACD32 balances energy and readability on white.
| Swatch | Shade | Hex |
|---|---|---|
| Light yellow-green | #E8F5C8 | |
| Chartreuse | #7FFF00 | |
| Green yellow | #ADFF2F | |
| Lawn green | #7CFC00 | |
| Yellow green | #9ACD32 | |
| Lime green | #32CD32 | |
| Kelly green | #4CBB17 | |
| Yellow-green dark | #6A8E2E | |
| Olive drab | #6B8E23 | |
| Dark olive | #556B2F |
Yellow Green Palette Pairings
Four combinations with hex codes—navy structure, charcoal dashboards, creative purple, and agriculture orange accents.
Yellow green + Navy + White
Sports and outdoor retail: navy structure (#000080), yellow-green CTAs (#9ACD32) for energy, white product cards. Navy carries trust; yellow-green signals action without pure red urgency.
Yellow green + Charcoal + Off-white
Dashboards and data viz: charcoal chrome (#374151), off-white surfaces (#FAFAF9), yellow-green for positive trends and success chips—validate small numerals on charcoal with the contrast checker.
Yellow green + Purple + Cream
Creative campaigns and festival branding: purple heroes (#7C3AED), cream body (#FFF8F0), yellow-green accents for tickets and badges—high energy without clashing warm and cool at equal weight.
Yellow green + Orange + Dark gray
Agriculture and sustainability UI: orange harvest highlights (#F97316), dark gray navigation (#1F2937), yellow-green progress bars and map markers for growth metrics.
The yellow green hex code #9ACD32 is the same value browsers expose as CSS yellowgreen—a balanced mix between yellow and green that reads energetic without neon glare. It sits between chartreuse (#7FFF00) and lime green (#32CD32): bright enough for CTAs and chart highlights, muted enough to pair with navy and charcoal in professional dashboards.
Designers often confuse adjacent names. Green yellow (#ADFF2F) and lawn green (#7CFC00) skew yellower; lime green (#32CD32) skews purer green. Document which hex you mean in design tokens—especially when engineering maps “success green” to #32CD32 while marketing uses #9ACD32 on slide decks.
Yellow Green in UI & Web Design
Sports and outdoor brands. Yellow-green CTAs on navy heroes (#000080) signal go/action without alarm red. White product cards keep catalogs readable; use chartreuse (#7FFF00) only for small badges where saturation helps visibility.
Agriculture and climate dashboards. Map growth metrics with #9ACD32 series colors; pair with orange (#F97316) for harvest seasons and charcoal (#374151) for chrome. Run yellow-green on white through the contrast checker—large buttons often pass; small caption text may need dark olive (#556B2F).
Health and fitness apps. Lime green (#32CD32) suits completion states; yellow-green (#9ACD32) works for progress rings that should feel upbeat but not clinical. Generate harmonized ramps from #9ACD32 in the palette generator so hover and disabled steps stay on-hue.
Avoid full-screen yellow-green backgrounds—they fatigue readers and fail accessibility for gray placeholder text. Use light tints (#E8F5C8) for section washes and reserve saturated rows for the 10% accent budget in your layout system.
Yellow Green in Branding
Energy drinks, youth sports, eco-startups, and festival brands reach for yellow-green because it reads as growth and motion. Pair with deep navy or charcoal so the brand does not feel like pure neon. Purple secondary accents add creative edge for music and entertainment identities.
Print and packaging may shift yellow-green toward Pantone 382 C or similar; note screen vs ink delta when cartons must match app icons. Lock #9ACD32 as your digital canonical and map chartreuse and lime to explicit roles—never “whichever green looks fine.”
FAQ
- What is the yellow green hex code?
- The standard yellow green hex code is #9ACD32—CSS named color yellowgreen—approximately RGB(154, 205, 50) and HSL(80, 61%, 50%). Chartreuse (#7FFF00) and lime green (#32CD32) are brighter neighbors on the same hue family.
- What colors go with yellow-green?
- Navy (#000080), charcoal (#374151), white, purple (#7C3AED), and orange (#F97316) pair well with yellow-green. Use yellow-green sparingly as an accent—CTAs, charts, badges—not as large body-text fields.
- What is the difference between chartreuse and yellow green?
- Chartreuse (#7FFF00) is neon-bright and high saturation. Yellow green (#9ACD32) is slightly muted and better for UI that must sit next to white backgrounds. Name tokens explicitly so hover states do not jump between them.
- Is yellow-green good for website backgrounds?
- Rarely for full-page backgrounds—too much saturation fatigues readers. Use light yellow-green tints (#E8F5C8) for subtle sections and reserve #9ACD32 for buttons, tags, and chart series. Always test text contrast.
Compare with forest green hex codes for deeper botanical UI, olive green hex reference for muted yellow-greens, or sage green hex code for calm wellness palettes.
Build your palette
Use our free tools to create and test your color palette.