Home /Compare /Ivory vs Sage

Ivory vs Sage: What's the Difference?

The main difference between Ivory and Sage is hue — Ivory is a cool-leaning off-white, while Sage is a cool-leaning yellow-green. Ivory and Sage are often confused but have distinct differences in hue, saturation, and tone. Ivory (#FFFFF0) and Sage (#9CAF88) each suit different design contexts — understanding their differences helps you choose the right color for your project.

Ivory#FFFFF0
Sage#9CAF88
#FFFFF0Blended: #CED7BC#9CAF88
ShareSave to PinterestTweet

Ivory vs Sage: Key Differences at a Glance

Aspect Ivory Sage
BrightnessVery light (L=97%) — pale, delicate, gentleLight (L=61%) — airy, soft, approachable
SaturationVivid (S=100%) — bright, energetic, eye-catchingMuted (S=20%) — subdued, sophisticated
Hue familyOff-whiteYellow-green
TemperatureCool-leaningCool-leaning
Hex code#FFFFF0#9CAF88
RGB255, 255, 240156, 175, 136

Can you use Ivory and Sage together?

Sage text on Ivory
Ivory text on Sage
Contrast Ratio:2.34:1Insufficient Contrast

How to Tell Ivory and Sage Apart

  • ●Look at lightness first: Ivory is noticeably lighter.
  • ●Check saturation: Ivory looks more vivid and saturated.
  • ●Watch the undertone: the hue shifts 29° between them, which changes the perceived temperature.
  • ●Compare them on a white background to see true saturation, and on black to see true lightness.

Ivory or Sage: Which to Use and Where

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

◆Branding & logos
PickIvory

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

▢Web UI & body text backgrounds
PickSage

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

⬡Fashion & apparel
PickIvory

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

▣Interior design & walls
PickSage

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

When to Use Ivory vs Sage in Design

Use Ivory for:
●Backgrounds and page surfaces
●Minimalist editorial design
●Luxury clean aesthetics
●Soft wedding invitations
●Wellness and spa brands
Use Sage for:
●Fresh, natural, organic brands
●Spring and growth themes
●Juice and produce packaging
●Eco-conscious products
●Wellness and lifestyle

Ivory and Sage Hex Codes, RGB & HSL

Ivory#FFFFF0

Ivory (#FFFFF0) is a very light, vivid off-white with a cool-leaning undertone — it feels pale, delicate, gentle and bright, energetic, eye-catching.

HEX
RGB
HSL
HSV
CMYK
PANTONE
Shades
Tints
Sage#9CAF88

Sage (#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

Ivory and Sage 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
Ivory text on white
1.01:1Fail
Sample text preview
Ivory text on black
20.81:1AAA
Sample text preview
Sage text on white
2.36:1Fail
Sample text preview
Sage text on black
8.9:1AAA
Sample text preview
Ivory text on Sage
2.34:1Fail
Sample text preview
Sage text on Ivory
2.34:1Fail

Explore Ivory and Sage individually

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

Ivory color page#FFFFF0 · shades, tints, pairings

More Ivory and Sage Comparisons

EcruvsIvorySagevsMintIvoryvsSnowSagevsFernIvoryvsEcruMossvsSageIvoryvsNavyFernvsSageIvoryvsTealSagevsNavySagevsMossIvoryvsCream

Ivory vs Sage FAQ

What is the difference between ivory and sage?+
The main difference between Ivory and Sage is hue — Ivory is a cool-leaning off-white, while Sage is a cool-leaning yellow-green. Ivory and Sage are often confused but have distinct differences in hue, saturation, and tone. Ivory (#FFFFF0) and Sage (#9CAF88) each suit different design contexts — understanding their differences helps you choose the right color for your project.
Is ivory darker than sage?+
No. Sage is the darker of the two at 61% lightness, while Ivory sits higher at 97%.
Are ivory and sage the same color?+
No. Ivory is #FFFFF0 and Sage is #9CAF88. They differ by 29° in hue, 36% in lightness, and 80% in saturation.
Which is more saturated, ivory or sage?+
Ivory is more saturated. In HSL, Ivory has 100% saturation and Sage has 20% — Ivory is the more vivid of the two, while Sage reads as more muted.
Is ivory warm or cool?+
Ivory (#FFFFF0) is a cool-leaning off-white. Its hue sits at 60° on the color wheel, which places it in the cool-leaning range.
Is sage warm or cool?+
Sage (#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 ivory and sage together?+
Yes. Ivory (off-white) and Sage (yellow-green) can work as a complementary or analogous pair. Use one as the dominant tone and the other as a 10–20% accent to keep the palette balanced.
What color family does ivory belong to?+
Ivory belongs to the off-white family. Its HSL is 60°, 100%, 97% — a cool-leaning tone within the broader off-white group.
What is the hex code for ivory?+
The hex code for Ivory is #FFFFF0. In RGB, that's rgb(255, 255, 240), and in HSL it's hsl(60, 100%, 97%).
What is the hex code for sage?+
The hex code for Sage is #9CAF88. In RGB, that's rgb(156, 175, 136), and in HSL it's hsl(89, 20%, 61%).