#BBB791

What color is Sage?

Sage is a muted gray-green with soft yellow undertones, hex #BBB791, close to the color of dried sage leaves. The gray in the tone keeps it from reading as a true green, giving it a dusty, weathered quality.

What is the meaning of the color Sage?

Named after the culinary herb, sage as a color name was first recorded in English in the late 19th century, tied to the plant’s distinctive silvery-green foliage. It gained broader cultural traction in the early 20th century as muted, natural tones became popular in Arts and Crafts interior design, which favored earth-connected palettes over the bright synthetic dyes of the Victorian era. The color spread further through mid-century home furnishings, where it appeared on upholstery, ceramics, and painted cabinetry. Farrow and Ball, the British paint company, helped anchor sage as a deliberate design choice with their paint range, which includes tones in this family used across heritage restoration projects.

RGB
187, 183, 145
HSL
54°, 24%, 65%
CMYK
0, 2, 22, 27
HSV
54°, 22%, 73%
Sage color

What colors go with Sage?

Colors that pair well with Sage include:
Cream: soft, warm harmony
Terracotta: earthy, grounding contrast
Navy: crisp, cool depth
Dusty Rose: gentle, muted pairing
Charcoal: strong, anchoring balance

Similar Colors

Conversions & Codes

Format Value CSS
HEX #BBB791 color: #BBB791;
RGB 187, 183, 145 color: rgb(187, 183, 145);
RGB Percentage 73%, 72%, 57% color: rgb(73%, 72%, 57%);
CMYK 0%, 2%, 22%, 27% Not supported in CSS
HSL 54°, 24%, 65% color: hsl(54, 24%, 65%);
HSV 54°, 22%, 73% Not supported in CSS
CIE-LAB 52, 1, 13 color: lab(52% 1 13);
Decimal 12302225 Not supported in CSS

Color Variations

Shades

#BBB790
#AFA97C
#A29C67
#908A58
#7B774C
#67633F
#524F32
#3E3B26

Tints

#EBE9DE
#E4E2D3
#DDDBC8
#D6D4BD
#D0CDB2
#C9C5A6
#C2BE9B
#BBB790

Tones

#BBB790
#B9B592
#B7B395
#B5B297
#B3B099
#B0AE9B
#AEAD9D
#ACAB9F

Hues

#BBB790
#9FBB90
#90BBA1
#90B5BB
#9095BB
#AC90BB
#BB90AA
#BB9790

Color Harmonies

Analogous

#BBA190
Click to copy
#BBB791
Click to copy
100%
#AABB90
Click to copy
97%

Complementary

#BBB791
Click to copy
100%
#9095BB
Click to copy

Split Complementary

#BBB791
Click to copy
100%
#90AABB
Click to copy
#A190BB
Click to copy

Triadic

#BBB791
Click to copy
100%
#90BBB7
Click to copy
96%
#B790BB
Click to copy

Tetradic

#BBB791
Click to copy
100%
#90BBA1
Click to copy
95%
#9095BB
Click to copy
#BB90AA
Click to copy

Square

#BBB791
Click to copy
100%
#90BBA1
Click to copy
95%
#9095BB
Click to copy
#BB90AA
Click to copy

CSS & Dev Snippets

CSS
.sage {
  color: #BBB791;
}
SCSS
$sage: #BBB791;
RGB
rgb(187, 183, 145)

Accessibility & Contrast

White background

2.04:1
2.04
contrast ratio on a white background
Element
AA
AAA
Small text
Large text
UI element

Black background

10.30:1
10.30
contrast ratio on a black background
Element
AA
AAA
Small text
Large text
UI element

Popular Tags