Home /Compare /Periwinkle vs Sage

Periwinkle vs Sage: What's the Difference?

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

Periwinkle#CCCCFF
Sage#9CAF88
#CCCCFFBlended: #B4BEC4#9CAF88
ShareSave to PinterestTweet

Periwinkle vs Sage: Key Differences at a Glance

Aspect Periwinkle Sage
BrightnessVery light (L=90%) — pale, delicate, gentleLight (L=61%) — airy, soft, approachable
SaturationVivid (S=100%) — bright, energetic, eye-catchingMuted (S=20%) — subdued, sophisticated
Hue familyPurpleYellow-green
TemperatureCoolCool-leaning
Hex code#CCCCFF#9CAF88
RGB204, 204, 255156, 175, 136

Can you use Periwinkle and Sage together?

Sage text on Periwinkle
Periwinkle text on Sage
Contrast Ratio:1.53:1Insufficient Contrast

How to Tell Periwinkle and Sage Apart

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

Periwinkle or Sage: Which to Use and Where

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

◆Branding & logos
PickPeriwinkle

Periwinkle 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 Periwinkle only reaches 1.54:1 and risks failing AA at small body sizes.

⬡Fashion & apparel
PickPeriwinkle

Periwinkle 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 Periwinkle's higher chroma can overwhelm a room when used beyond accent pieces.

When to Use Periwinkle vs Sage in Design

Use Periwinkle for:
●Luxury and premium brands
●Creative and imaginative themes
●Beauty and wellness
●Spiritual and mystical design
●Night and evening moods
Use Sage for:
●Fresh, natural, organic brands
●Spring and growth themes
●Juice and produce packaging
●Eco-conscious products
●Wellness and lifestyle

Periwinkle and Sage Hex Codes, RGB & HSL

Periwinkle#CCCCFF

Periwinkle (#CCCCFF) is a very light, vivid purple with a cool 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

Periwinkle 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
Periwinkle text on white
1.54:1Fail
Sample text preview
Periwinkle text on black
13.65:1AAA
Sample text preview
Sage text on white
2.36:1Fail
Sample text preview
Sage text on black
8.9:1AAA
Sample text preview
Periwinkle text on Sage
1.53:1Fail
Sample text preview
Sage text on Periwinkle
1.53:1Fail

Explore Periwinkle and Sage individually

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

Periwinkle color page#CCCCFF · shades, tints, pairings

More Periwinkle and Sage Comparisons

SagevsMintPeriwinklevsLilacSagevsFernPeriwinklevsBlushMossvsSageAzurevsPeriwinkleFernvsSageLilacvsPeriwinkleSagevsNavyMauvevsPeriwinkleSagevsMossIndigovsPeriwinkle

Periwinkle vs Sage FAQ

What is the difference between periwinkle and sage?+
The main difference between Periwinkle and Sage is hue — Periwinkle is a cool purple, while Sage is a cool-leaning yellow-green. Periwinkle and Sage are often confused but have distinct differences in hue, saturation, and tone. Periwinkle (#CCCCFF) and Sage (#9CAF88) each suit different design contexts — understanding their differences helps you choose the right color for your project.
Is periwinkle darker than sage?+
No. Sage is the darker of the two at 61% lightness, while Periwinkle sits higher at 90%.
Are periwinkle and sage the same color?+
No. Periwinkle is #CCCCFF and Sage is #9CAF88. They differ by 151° in hue, 29% in lightness, and 80% in saturation.
Which is more saturated, periwinkle or sage?+
Periwinkle is more saturated. In HSL, Periwinkle has 100% saturation and Sage has 20% — Periwinkle is the more vivid of the two, while Sage reads as more muted.
Is periwinkle warm or cool?+
Periwinkle (#CCCCFF) is a cool purple. Its hue sits at 240° on the color wheel, which places it in the cool 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 periwinkle and sage together?+
Yes. Periwinkle (purple) 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 periwinkle belong to?+
Periwinkle belongs to the purple family. Its HSL is 240°, 100%, 90% — a cool tone within the broader purple group.
What is the hex code for periwinkle?+
The hex code for Periwinkle is #CCCCFF. In RGB, that's rgb(204, 204, 255), and in HSL it's hsl(240, 100%, 90%).
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%).