What colors are in the Muted Sage palette?

The Muted Sage palette has 5 colors: #84A98C, #A7C4A0, #CAD2C5, #52796F, #354F52.

Where can I use this palette?

It's a Earthy palette — well suited to organic brands, food & craft, interiors, rustic & natural themes.

Is the Muted Sage palette accessible?

Its darkest and lightest colors have a contrast ratio of 5.66:1. 2 color pairs in it meet WCAG AA for text.

How do I use this palette in CSS?

Copy the CSS custom properties (:root variables) from the Export section, or grab any single hex with one click.

Can I export the Muted Sage palette?

Yes — export to CSS, SCSS, Tailwind config or JSON, or copy all hex codes at once.

Accent #84A98C Sage Primary #A7C4A0 Laurel Green Surface #CAD2C5 Pastel Gray Secondary #52796F Myrtle Green Text #354F52 Dark Slate Gray

Muted Sage

5 colors

Open in generator All palettes

Accent Sage — #84A98C

Primary Laurel Green — #A7C4A0

Surface Pastel Gray — #CAD2C5

Secondary Myrtle Green — #52796F

Text Dark Slate Gray — #354F52

Contrast matrix

Text on Surface 5.66 AA

Primary on Surface 1.23 Fail

Text on Secondary 1.81 Fail

Surface on Primary 1.23 Fail

Accent on Text 3.36 AA Large

Ratios are WCAG 2 contrast between the roles as assigned above. AA needs 4.5:1 for body text, 3:1 for large text.

Export tokens

:root {
  --accent: #84A98C;
  --primary: #A7C4A0;
  --surface: #CAD2C5;
  --secondary: #52796F;
  --text: #354F52;
}

$muted-sage-accent: #84A98C;
$muted-sage-primary: #A7C4A0;
$muted-sage-surface: #CAD2C5;
$muted-sage-secondary: #52796F;
$muted-sage-text: #354F52;

// tailwind.config.js — theme.extend.colors
colors: {
  'muted-sage': {
    'accent': '#84A98C',
    'primary': '#A7C4A0',
    'surface': '#CAD2C5',
    'secondary': '#52796F',
    'text': '#354F52',
  },
}

{
    "muted-sage": {
        "accent": {
            "value": "#84A98C",
            "type": "color"
        },
        "primary": {
            "value": "#A7C4A0",
            "type": "color"
        },
        "surface": {
            "value": "#CAD2C5",
            "type": "color"
        },
        "secondary": {
            "value": "#52796F",
            "type": "color"
        },
        "text": {
            "value": "#354F52",
            "type": "color"
        }
    }
}

{
    "accent": "#84A98C",
    "primary": "#A7C4A0",
    "surface": "#CAD2C5",
    "secondary": "#52796F",
    "text": "#354F52"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#84A98C
#A7C4A0
#CAD2C5
#52796F
#354F52

Download for Procreate

How the roles work

SurfaceThe lightest color — page and card backgrounds.

TextThe darkest color — body text and high-contrast UI.

PrimaryThe most chromatic middle — buttons, links, the one color that pushes.

AccentThe second most chromatic — badges, highlights, states.

SecondaryEverything else — fills, borders, supporting surfaces.

Muted Sage

Contrast matrix

Export tokens

How the roles work

Related palettes