Sage Garden

Sage greens with warm gold for garden ceremonies.

≈ Eggshell
≈ Moss Green
≈ Tan

Color codes

HEXRGBHSLCMYK
hsl(43, 26%, 95%)cmyk(0%, 1%, 3%, 4%)
hsl(75, 22%, 86%)cmyk(2%, 0%, 7%, 11%)
hsl(82, 19%, 69%)cmyk(6%, 0%, 16%, 25%)
hsl(86, 14%, 48%)cmyk(11%, 0%, 24%, 45%)
hsl(35, 40%, 64%)cmyk(0%, 16%, 37%, 22%)

CSS

:root {
  --sage-garden-1: #F5F3EE;
  --sage-garden-2: #DFE3D3;
  --sage-garden-3: #B5C0A2;
  --sage-garden-4: #7D8C6A;
  --sage-garden-5: #C8A97E;
}

How these colors work together

The colors are analogous — neighbors on the color wheel — which gives a calm, cohesive feel. Overall it reads warm. Lightness spans 46 points, which sets how much contrast you can create.

0 of 10 color pairs reach the 4.5:1 contrast needed for normal text. The most readable pair is ⁦#F5F3EE⁩ on ⁦#7D8C6A⁩ (3.25:1).

Sage Garden — readable text using the best pair.

Suggested applications

  • Invitations, decor and event branding.
  • Interface themes: use the lightest color for backgrounds and the darkest for text.
  • Brand kits, social graphics and presentations.

#sage#garden#gold

Check accessibility Simulate color blindness CSS variables

Frequently asked questions

How do I use the Sage Garden palette?
The Sage Garden palette has 5 colors. Use one dominant color for large areas, a supporting color for secondary elements and the most saturated color sparingly as an accent.
Which colors in this palette are best for text?
Use ⁦#F5F3EE⁩ on ⁦#7D8C6A⁩: it has a contrast ratio of 3.25:1.
Can I download this palette?
Yes. Export it as PNG, SVG, CSS variables, JSON or plain text with the buttons above the color table.

More palettes