Yellow Green vs Sage Green: What's the Difference?

The main difference between Yellow Green and Sage Green is brightness and saturation: both are yellow-green shades, but Sage Green is lighter and Yellow Green is more saturated. Yellow Green (#9ACD32) has an HSL of 80°, 61%, 50%, whereas Sage Green (#9CAF88) sits at 89°, 20%, 61%.

Yellow Green#9ACD32

Sage Green#9CAF88

#9ACD32Blended: #9BBE5D#9CAF88

ShareSave to Pinterest Tweet

Yellow Green vs Sage Green: Key Differences at a Glance

Aspect Yellow Green Sage Green

BrightnessMedium (L=50%) — balanced, versatileLight (L=61%) — airy, soft, approachable

SaturationModerately saturated (S=61%) — balanced in intensityMuted (S=20%) — subdued, sophisticated

Hue familyYellow-greenYellow-green

TemperatureCool-leaningCool-leaning

Hex code#9ACD32#9CAF88

RGB154, 205, 50156, 175, 136

Can you use Yellow Green and Sage Green together?

Sage Green text on Yellow Green

Yellow Green text on Sage Green

Contrast Ratio:1.25:1Insufficient Contrast

How to Tell Yellow Green and Sage Green Apart

●Look at lightness first: Sage Green is noticeably lighter.
●Check saturation: Yellow Green looks more vivid and saturated.
●Compare them on a white background to see true saturation, and on black to see true lightness.

Yellow Green or Sage Green: Which to Use and Where

Four real design scenarios, with the recommended pick based on hue, saturation, and WCAG contrast.

◆Branding & logos

PickYellow Green

Yellow Green is more saturated (61% HSL vs 20%) so it reads as bolder and more memorable at logo scale, while Sage Green can feel washed out when printed small.

▢Web UI & body text backgrounds

PickSage Green

Sage Green hits a 2.36:1 WCAG contrast against white — safer for text-heavy interfaces — where Yellow Green only reaches 1.88:1 and risks failing AA at small body sizes.

⬡Fashion & apparel

PickSage Green

Sage Green is a cool-leaning tone that flatters spring/summer collections and warmer skin undertones, while Yellow Green leans cooler and is better suited to autumn/winter layering.

▣Interior design & walls

PickSage Green

Sage Green is the more muted of the two (20% saturation) and sits more calmly on large wall surfaces, while Yellow Green's higher chroma can overwhelm a room when used beyond accent pieces.

When to Use Yellow Green vs Sage Green in Design

Use Yellow Green for:

●Fresh, natural, organic brands

●Spring and growth themes

●Juice and produce packaging

●Eco-conscious products

●Wellness and lifestyle

Use Sage Green for:

●Fresh, natural, organic brands

●Spring and growth themes

●Juice and produce packaging

●Eco-conscious products

●Wellness and lifestyle

Yellow Green and Sage Green Hex Codes, RGB & HSL

Yellow Green#9ACD32

Yellow Green (#9ACD32) is a medium, moderately saturated yellow-green with a cool-leaning undertone — it feels balanced, versatile and balanced in intensity.

HEX

RGB

HSL

HSV

CMYK

PANTONE

Shades

Tints

Sage Green#9CAF88

Sage Green (#9CAF88) is a light, muted yellow-green with a cool-leaning undertone — it feels airy, soft, approachable and subdued, sophisticated.

HEX

RGB

HSL

HSV

CMYK

PANTONE

Shades

Tints

Yellow Green and Sage Green WCAG Contrast Ratios

Text legibility depends on the contrast ratio between foreground and background. WCAG 2.1 AA requires at least 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1. Use these numbers to choose accessible combinations for your design.

Sample text preview

Yellow Green text on white

1.88:1Fail

Sample text preview

Yellow Green text on black

11.15:1AAA

Sample text preview

Sage Green text on white

2.36:1Fail

Sample text preview

Sage Green text on black

8.9:1AAA

Sample text preview

Yellow Green text on Sage Green

1.25:1Fail

Sample text preview

Sage Green text on Yellow Green

1.25:1Fail

Explore Yellow Green and Sage Green individually

Each color has a dedicated page with shades, tints, CSS name, pairings, and color psychology.

Sage Green color page#9CAF88 · shades, tints, pairings

More Yellow Green and Sage Green Comparisons

Yellow Green vs Sage Green FAQ

What is the difference between yellow green and sage green?+

The main difference between Yellow Green and Sage Green is brightness and saturation: both are yellow-green shades, but Sage Green is lighter and Yellow Green is more saturated. Yellow Green (#9ACD32) has an HSL of 80°, 61%, 50%, whereas Sage Green (#9CAF88) sits at 89°, 20%, 61%.

Is yellow green darker than sage green?+

Yes. Yellow Green is darker, with a lightness of 50% in HSL compared to Sage Green at 61% — a 11-point gap.

Are yellow green and sage green the same color?+

No. Yellow Green is #9ACD32 and Sage Green is #9CAF88. They differ by 9° in hue, 11% in lightness, and 41% in saturation.

Which is more saturated, yellow green or sage green?+

Yellow Green is more saturated. In HSL, Yellow Green has 61% saturation and Sage Green has 20% — Yellow Green is the more vivid of the two, while Sage Green reads as more muted.

Is yellow green warm or cool?+

Yellow Green (#9ACD32) is a cool-leaning yellow-green. Its hue sits at 80° on the color wheel, which places it in the cool-leaning range.

Is sage green warm or cool?+

Sage Green (#9CAF88) is a cool-leaning yellow-green. Its hue sits at 89° on the color wheel, which places it in the cool-leaning range.

Can you use yellow green and sage green together?+

Yes. Both yellow green and sage green are yellow-green shades, so they pair naturally in a monochromatic palette. Use yellow green as the dominant color and sage green as the accent or highlight.

What color family does yellow green belong to?+

Yellow Green belongs to the yellow-green family. Its HSL is 80°, 61%, 50% — a cool-leaning tone within the broader yellow-green group.

What is the hex code for yellow green?+

The hex code for Yellow Green is #9ACD32. In RGB, that's rgb(154, 205, 50), and in HSL it's hsl(80, 61%, 50%).

What is the hex code for sage green?+

The hex code for Sage Green is #9CAF88. In RGB, that's rgb(156, 175, 136), and in HSL it's hsl(89, 20%, 61%).