Sage Green Color Palette

Updated April 17, 2026

A calming sage green color palette — pale sage, olive, soft beige, and cream. Hex codes for wellness, organic, and natural brand designs.

The Sage Green Palette

• Cream #F5F1E6 rgb(245, 241, 230) hsl(44, 43%, 93%)
• Soft Beige #DAD7CD rgb(218, 215, 205) hsl(46, 15%, 83%)
• Sage #A3B18A rgb(163, 177, 138) hsl(82, 20%, 62%)
• Deep Sage #588157 rgb(88, 129, 87) hsl(119, 19%, 42%)
• Forest Sage #3A5A40 rgb(58, 90, 64) hsl(131, 22%, 29%)
• Ivy #344E41 rgb(52, 78, 65) hsl(150, 20%, 25%)

Hex Codes at a Glance

#F5F1E6, #DAD7CD, #A3B18A, #588157, #3A5A40, #344E41

How to Use This Palette

• In CSS: Paste each hex into your :root custom properties or directly into background-color / color declarations.
• In Figma or Sketch: Copy the hex into any fill or stroke color field. Save each color to your local style library for reuse across frames.
• In Tailwind CSS: Add each hex to your tailwind.config.js file inside theme.extend.colors, then use classes like bg-palette-500.
• In Procreate or Photoshop: Create a new swatch set and paste each hex value. PhotoTones Pro exports ready-to-import .swatches and .ase files.

Build Your Own Palette

This sage green palette is one of many themed palettes in the PhotoTones gallery. To build a palette from your own photo, use the free PhotoTones color palette from image generator — it extracts up to 12 hex codes per image in under a second, entirely in your browser. No signup required.