PALUNEXA
Back to the atlas

COLOR FIELD NOTES

Sage
#a5b89c

Color names, HEX, RGB, HSL or OKLCH. No account needed.

Selected color · sRGB#a5b89c
The numbers behind the color · RGB / HSL / OKLCH
HEX
#a5b89c
RGB
rgb(165, 184, 156)
HSL
hsl(100.71, 16.47%, 66.67%)
OKLCH
oklch(0.76021401 0.04443647 135.530112)

What makes this color different?

This sage is a light, low-saturation green with all three RGB channels present. It is far less intense than lime, making it a different choice for large background areas.

The name is descriptive; use the numeric color value in CSS.

Better together.

Complementary

Two colors, 180° apart. A clear contrast across the HSL color wheel.

Analogous

Neighbors at −30°, 0° and +30°. A close-knit family of hues.

Triadic

Three hues at 0°, 120° and 240°. An evenly spaced triangle on the HSL wheel.

A practical design example

Try sage on a lifestyle article panel, a garden-planning board or a quiet product card. Pair it with a dark heading and a small terracotta accent rather than asking several pale colors to carry all the hierarchy.

Design advice is context-dependent. It is separate from the numeric calculations.

What to check before using it

A calm-looking palette can still be inaccessible. Pale sage text on white and sage/white control boundaries need their own contrast checks.

Make it readable. / CSS
Contrast ratio · #a5b89c
Selected colorContrast ratioNormal text · AA
Black9.94:1Pass
White2.11:1Below target

CSS you can use

.color-surface {
  background: #a5b89c;
  color: #000000;
}

Questions and direct answers

What are the values of #a5b89c?

#a5b89c is rgb(165, 184, 156), hsl(100.71, 16.47%, 66.67%), and oklch(0.76021401 0.04443647 135.530112). These values are calculated from the same opaque sRGB color.

Which text color is more readable on #a5b89c?

Black has 9.94:1 contrast and white has 2.11:1. Of these two, Black has the higher contrast. Normal-text AA requires at least 4.5:1.

How is the complementary palette calculated?

The engine rotates HSL hue by 180° and keeps saturation and lightness. For this color the result is #a5b89c, #af9cb8. Achromatic colors stay neutral.

Does sage mean #a5b89c everywhere?

No. Sage is a descriptive family name, not a CSS keyword for this value. Share #a5b89c when the exact shade matters; other sage palettes may use quite different numbers.

Related colors

Teal#008080Terracotta#d86b4dWhite#ffffff
Explore this color in the studio

02 / COLOR COMPANIONS

Better together.

Find a different perspective on your color with a little color theory.

#a5b89c

The base color is the anchor. Locks and the base color stay unchanged.

Export palette CSS

Neighbors at −30°, 0° and +30°. A close-knit family of hues.

01COMPANION
#b3b89crgb(179, 184, 156)oklch(0.77101573 0.03904738 115.544086)
Contrast ratio: 10.25:1
02BASE
#a5b89crgb(165, 184, 156)oklch(0.76021401 0.04443647 135.530112)
Contrast ratio: 9.94:1
03COMPANION
#9cb8a1rgb(156, 184, 161)oklch(0.75500617 0.0447061 150.367054)
Contrast ratio: 9.78:1
HSL / Analogous
Color values & advanced tools

Selected color / #A5B89C

The numbers behind the color

One color, four ways to describe it.

HEX
#a5b89c
RGB
rgb(165, 184, 156)
HSL
hsl(100.71, 16.47%, 66.67%)
OKLCH
oklch(0.76021401 0.04443647 135.530112)
Hue
100.71°
Saturation
16.47%
Lightness
66.67%
Where this harmony might work

Design suggestions below are subjective. Hue angles and contrast ratios are calculated facts.

Suggested use
Editorial pages, lifestyle brands and calm interfaces.
Strength
Neighboring hues create a related visual rhythm.
Considerations
Similar hues can blur boundaries; add labels and neutral spacing.
Design example
Use the middle hue for a hero panel and its neighbors for decorative cards.
OKLCH · Perceptual adjustments

Adjust lightness and chroma of unlocked companions in OKLCH. HSL hue spacing can change. Preview the result before applying.

Current palette
Adjusted preview

Colors needing sRGB chroma reduction: 0

The base color is the anchor. Locks and the base color stay unchanged.

Compare with the original HSL harmony

These are the unedited theory colors. Compare their HEX and OKLCH values with the edited palette above.

#b3b89coklch(0.77101573 0.03904738 115.544086)#a5b89coklch(0.76021401 0.04443647 135.530112)#9cb8a1oklch(0.75500617 0.0447061 150.367054)
Palette CSS
:root {
  --palette-1: #b3b89c;
  --palette-2: #a5b89c;
  --palette-3: #9cb8a1;
}
Live design preview

03 / IN CONTEXT

Put it into perspective.

Real CSS. Your colors. A small glimpse of what comes next.

Palette role mapping

Rendered text pair #000000 / #a5b89c · 9.94:1

your-next-idea.design
FORM & FIELDIndependent ideas. Considered colors.
STUDIO FOR EVERYDAY IDEAS

Room for a fresh perspective.

Thoughtfully made things start with a little curiosity.

Discover the collection

The palette text/background pair is below normal-text AA.

#9cb8a1 / #a5b89c · 1.02:1 · Normal text · AA

Suggested text color: #000000 (9.94:1).

Displayed text contrast: 9.94:1 · Accessible text alternatives affect only the preview. Your palette stays unchanged.

The tested pair is used on colored buttons, cards, KPIs and slide bands. Other template text uses #262a23 (13.18:1) or #55594f (6.47:1) on #f6f3ec. Charts have numbered labels. This is not a complete accessibility audit.

Text contrast checker

Accessibility / WCAG AA

Make it readable.

Check the selected color against your text or background color.

Suggested text color: #000000 · 21.00:1

AA requires 4.5:1 for normal text and 3:1 for large text. This checks color contrast, not full WCAG compliance.

Aa

Color should be seen. Words should be read.

#a5b89c / #ffffff
Contrast ratio2.11:1
  • Normal text · AABelow target
  • Large text · AABelow target
  • Normal text · AAABelow target
  • Large text · AAABelow target

A little theory. A lot to explore.

PALUNEXA rotates hues on the HSL color wheel and keeps saturation and lightness unchanged. Monochromatic palettes vary lightness instead. Harmony is a starting point for design, not a guarantee of aesthetic fit.

Back to the atlas