Sage

HEX: #BCB88A | Modern Palette

On White
2.03:1
FAIL
On Black
10.36:1
PASS

Color Specifications

HEX
#BCB88A
RGB
188, 184, 138
HSL
55°, 26% ,73%
CMYK
0, 2.13, 26.6, 26.27

About Sage

Sage (#BCB88A) is a color with RGB(188, 184, 138) and HSL(55.2°, 26.6%, 73.73%). In design, it fits Pastel, Warm styles and is suitable for Text, Border, Print. Its complementary color is #8A8EBC, which creates strong contrast. Its triadic palette includes #8ABCB8 and #B88ABC. The name comes from sage (Old French).

  • HEX: #BCB88A
  • RGB: 188, 184, 138
  • HSL: 55.2°, 26.6%, 73.73%
  • Style: Pastel, Warm
  • Use case: Text, Border, Print
  • Complementary color: #8A8EBC
  • Triadic colors: #8ABCB8, #B88ABC
  • The name comes from sage (Old French).

Live Components

LIGHT
DARK
System Notification Box

Color Palettes

Monochromatic Five tones of the same hue — a reliable scale for backgrounds, surfaces, and text.
Neutral + Accent Four near-neutral tones grounded by a saturated accent — clean and versatile for UI.
Analogous Five hues drifting across a 60° arc — naturally harmonious and pleasing to the eye.
3 + 1 + 1 Three analogous base colors, one complementary accent, one dark anchor — bold yet balanced.

Color Harmonies

Complementary

The color directly opposite on the color wheel — creates maximum contrast and vibrance.

Analogous

Colors adjacent on the wheel — naturally harmonious and pleasing to the eye.

Triadic

Three colors equally spaced 120° apart — bold, balanced, and visually rich.

Split-Complementary

Two colors flanking the complement — high contrast with less tension than full complementary.

Tetradic (Square)

Four colors at 90° intervals — rich variety, best when one color dominates.

Monochromatic

Shades and tints of the same hue — cohesive, elegant, and easy to work with.

Shades & Tints

A seamless scale of #BCB88A from deepest shade to lightest tint.

Color Characteristics

Mood
Style
Pastel Warm
Use case
Text Border Print

Accessibility Simulation

Deuteranopia #B9B98A
Protanopia #B8B88A
Tritanopia #C1B3B3
Achromatopsia #B6B6B6

Frequently Asked Questions

Sage (#BCB88A) is a color with RGB(188, 184, 138) and HSL(55.2°, 26.6%, 73.73%).

#BCB88A pairs strongly with #8A8EBC as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

#BCB88A is suitable for Text, Border, Print and works well with Pastel, Warm styles.

The name Sage is linked to sage from Old French, meaning wise, learned, judicious.

Name, History & Etymology

Origin Word sage
Meaning wise, learned, judicious
Language Old French
First Recorded Use Middle English

History

The word "sage" entered English from Old French, which itself derived from Vulgar Latin *sapius, a derivative of Latin sapere 'to be wise, to taste'. The connection between wisdom and taste is interesting, suggesting that discernment applies to both intellectual understanding and sensory experience. Initially, it referred primarily to a wise person. Over time, it also came to refer to the plant (Salvia officinalis) known for its medicinal properties and culinary use, likely due to its perceived 'healing' or 'wise' qualities, or perhaps its strong, distinctive 'taste'. The color 'sage' (bcb88a) is a relatively modern descriptor, emerging from the visual association with the muted, grayish-green leaves of the sage plant.

First Recorded Use

c. 1300

Cultural Associations

The concept of a 'sage' as a wise elder or spiritual guide is prevalent across many cultures and philosophical traditions (e.g., the Seven Sages of Greece, Confucian sages, Hindu rishis). The sage plant itself holds cultural significance, often associated with purification, healing, and longevity. In some traditions, burning sage is believed to cleanse spaces of negative energy. The color 'sage green' evokes feelings of nature, tranquility, and understated elegance, making it popular in interior design and fashion.

Similar Named Colors
Sand #C2B280 ΔE 4.43
Olive Green #BAB86C ΔE 6.34
Dark Khaki #BDB76B ΔE 6.38
Khaki #C3B091 ΔE 8.36

Code Snippets

/* Background */
.element {
    background-color: #BCB88A;
}

/* Text */
.element {
    color: #BCB88A;
}

/* Border */
.element {
    border: 1px solid #BCB88A;
}

/* Linear gradient to complementary */
.element {
    background: linear-gradient(
        to right,
        #BCB88A,
        #AAADCE
    );
}

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #BCB88A,
        #AAADCE
    );
}

// SCSS variable
$sage: #BCB88A;

// With RGB channels (useful for rgba() usage)
$sage-r: 188;
$sage-g: 184;
$sage-b: 138;

// Usage
.element {
    background-color: $sage;
    color: rgba($sage-r, $sage-g, $sage-b, 0.8);
}