Color guide · Green colors

Sage Color

Our sage anchor is #9CAF88: a restrained gray-green selected for this library. Use it as a soft surface or a secondary color, with darker text and clear boundaries. It has no standardized CSS keyword.

A muted gray-green for gentle surfaces#9CAF88Custom library anchor · use the HEX code

Sage color codes

HEX#9CAF88
RGBrgb(156, 175, 136)
HSLhsl(89.2, 19.6%, 61%)
Library anchor#9CAF88

RGB values use the 0–255 scale. HSL values are rounded to one decimal place for display. CSS Color: named colors ↗

The name & the reference

What makes sage interesting?

Garden sage is Salvia officinalis, documented by Kew. The plant reference helps explain the name, while the chosen digital anchor stays separate from any particular leaf or cultivar. For a practical palette, notice how a muted green changes beside warm cream, cool gray or a saturated forest green.

Read the reference: Kew: Salvia officinalis ↗

Things with sage tones

These illustrated references explore a color family. Objects vary; none is a claim of an exact #9CAF88 match.

Illustrated placeholder · image coming later

Herb-leaf inspiration

The reference explores a muted leaf family, not a botanical measurement.

Illustrated placeholder · image coming later

Soft upholstery

A desaturated fabric color can support a room without becoming its focal point.

Illustrated placeholder · image coming later

Muted ceramics

Sage-colored pottery can be paired with ivory and a darker green detail.

Ideas for using sage

01

Interfaces

Use sage as a card surface with dark text and a visible border where needed.

02

Games

Try it for a distant meadow while keeping foreground foliage darker and more defined.

03

Interiors

Pair a sage wall reference with warm wood and light textiles. Check physical samples rather than matching the screen alone.

Watch out: Pale sage text or borders on ivory can disappear. Use it as a surface before relying on it as small text.

Tints, shades & companion hues

These tints and shades are simple sRGB channel mixes with white or black. They are useful starting points, not perceptually equal steps or guaranteed accessible pairs. Select a swatch to copy its hex code.

Hue companions

Calculated in HSL with the same saturation and lightness. Complementary and analogous colors suggest hue relationships; they do not promise contrast.

Palettes featuring sage

Garden Notes

Muted foliage with a bright mint detail

Explore palette →

See the palette at work

Palette preview studio

Compare two colors →

Try a website, a game scene, a poster or a room. Pick a role, then select a swatch to repaint it. These are schematic design previews, not rendered materials or a game engine.

Text is automatically chosen as black or white for opaque preview surfaces. This does not certify your exported palette for every use.

Color & craftStories · Studio
A thoughtful starting point

Make something worth exploring.

A clear reading surface, one useful accent and room for the details.

Explore the collection →
Design notesNew ideasSmall details

Try it in context

Live design & contrast preview

Change the surface and text independently. The text result uses opaque sRGB colors; it does not evaluate your entire page.

8.90:1 · AAA normal text

AA normal text needs 4.5:1; AA large text needs 3:1. Large text means at least 18 pt, or 14 pt bold. Ratios are assessed before rounding. This is a text check, not a complete accessibility audit. W3C: understanding text contrast ↗

A little color goes a long way

Your next good idea

Try a readable heading, a short paragraph and a clear action on this surface.

Example action →Static design sample · use the controls to change it

Compare sage with another color →

Questions about sage

Is sage a CSS named color?

No. This guide uses #9CAF88 as an explicit library anchor.

Will this look the same in print?

No exact print match is promised. Paper, ink, color profiles and lighting affect the result. Use a physical proof when a precise material match matters.

Can I use these codes in a website or game?

Yes. Copy the exact code, give it a clear role in your palette and test text contrast. Add labels or shapes when color communicates important information.

Keep exploring

Explore green colors →

#228B22
Green colors

Forest Green

A medium green inspired by dense foliage

Explore color →
#FFFFF0
Light & dark neutrals

Ivory

A near-white with a small warm shift

Explore color →
#808000
Green colors

Olive

A restrained yellow-green with earthy weight

Explore color →

A color name is a starting point

Digital codes describe sRGB colors. Natural objects, paint, ink and screens can look different under different lighting or calibration. Visual references illustrate color families rather than exact measured matches. Placeholder illustrations are clearly labeled. Design ideas are suggestions, not universal claims about emotion or culture.

Pick colors from an image · Convert a color · Check a complete text pair · Suggest a color guide