What colors are in the Sage & Cream palette?

The Sage & Cream palette has 5 colors: #3E4A3A, #6E7B5E, #9DAE86, #C9CDB0, #EFEDDC.

Where can I use this palette?

It's a Neutral palette — well suited to dashboards, minimal ui, corporate sites, dark-mode surfaces.

Is the Sage & Cream palette accessible?

Its darkest and lightest colors have a contrast ratio of 7.93: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 Sage & Cream palette?

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

Text #3E4A3A Outer Space Accent #6E7B5E Shadow Primary #9DAE86 Sage Secondary #C9CDB0 Soft Sage Surface #EFEDDC Eggshell

Sage & Cream

5 colors

Open in generator All palettes

Text Outer Space — #3E4A3A

Accent Shadow — #6E7B5E

Primary Sage — #9DAE86

Secondary Soft Sage — #C9CDB0

Surface Eggshell — #EFEDDC

Contrast matrix

Text on Surface 7.93 AAA

Primary on Surface 2.02 Fail

Text on Secondary 5.72 AA

Surface on Primary 2.02 Fail

Accent on Text 2.07 Fail

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 {
  --text: #3E4A3A;
  --accent: #6E7B5E;
  --primary: #9DAE86;
  --secondary: #C9CDB0;
  --surface: #EFEDDC;
}

$sage-cream-text: #3E4A3A;
$sage-cream-accent: #6E7B5E;
$sage-cream-primary: #9DAE86;
$sage-cream-secondary: #C9CDB0;
$sage-cream-surface: #EFEDDC;

// tailwind.config.js — theme.extend.colors
colors: {
  'sage-cream': {
    'text': '#3E4A3A',
    'accent': '#6E7B5E',
    'primary': '#9DAE86',
    'secondary': '#C9CDB0',
    'surface': '#EFEDDC',
  },
}

{
    "sage-cream": {
        "text": {
            "value": "#3E4A3A",
            "type": "color"
        },
        "accent": {
            "value": "#6E7B5E",
            "type": "color"
        },
        "primary": {
            "value": "#9DAE86",
            "type": "color"
        },
        "secondary": {
            "value": "#C9CDB0",
            "type": "color"
        },
        "surface": {
            "value": "#EFEDDC",
            "type": "color"
        }
    }
}

{
    "text": "#3E4A3A",
    "accent": "#6E7B5E",
    "primary": "#9DAE86",
    "secondary": "#C9CDB0",
    "surface": "#EFEDDC"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#3E4A3A
#6E7B5E
#9DAE86
#C9CDB0
#EFEDDC

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.

Sage & Cream

Contrast matrix

Export tokens

How the roles work

Related palettes