Uwarp

Sage green color

Sage green is #BCB88A. Copy the codes, shades, and contrast below.

Build shades

Codes

This name is not a CSS keyword. Set the hex in stylesheets.

  • HEX#BCB88A
  • RGB188, 184, 138
  • HSL55, 27%, 64%
  • CMYK0, 2, 27, 26

Shades and tints

Ten steps toward black, then ten toward white. The outlined stop is #BCB88A.

  • 13120E

  • 26251C

  • 383729

  • 4B4A37

  • 5E5C45

  • 716E53

  • 848161

  • 96936E

  • A9A67C

  • Base

  • C3BF96

  • C9C6A1

  • D0CDAD

  • D7D4B9

  • DEDCC5

  • E4E3D0

  • EBEADC

  • F2F1E8

  • F8F8F3

Palettes from this hex

Hue rotations of #BCB88A. Open the scheme generator to edit a set.

Open scheme generator

  • Complementary

    • #BCB88A
    • #8A8FBC

  • Analogous

    • #BC9F8A
    • #BCB88A
    • #A7BC8A

  • Triadic

    • #BCB88A
    • #8ABCB8
    • #B88ABC

  • Tetradic

    • #BCB88A
    • #8ABC9F
    • #8A8FBC
    • #BC8AA7

Contrast

Ratios use #BCB88A against white (#FFFFFF) and near-black (#161616). AA means 4.5:1 for body text.

Open contrast checker

  • On white

    2.03:1

    Fails AA

  • On near-black

    8.93:1

    AAA

  • White text on this color

    2.03:1

    Fails AA

  • Near-black text on this color

    8.93:1

    AAA

How to use sage green

Sage green is a grayed yellow-green, closer to dried sage leaves than to a lawn. Paint ranges and brand kits use the name for several different chips, so a search for sage green color does not point at one official code. This page uses #BCB88A as the working swatch: red and green are nearly even, and blue drops enough to leave a yellow cast. It is not a CSS keyword. Writing sage in a stylesheet does not resolve to this hex.

In interface work, #BCB88A is a surface or a large heading, not body text. On white it sits too close in lightness for small type. Put reading text on a darker step from the ramp, or use near-black type on the swatch for short labels. It sits comfortably next to warm stone, cream, and a darker botanical green such as emerald or dark green in this library. A second muted green at the same lightness collapses into one field. For print, treat the CMYK line as a screen conversion and proof it. A sage chip on paper rarely matches the first RGB conversion.

Nearby colors

Frequently Asked Questions

Quick answers about this tool—open a question to read more.

Sources

Where this swatch and the CSS keyword note come from.