What colors are in the Wellness Sage palette?

The Wellness Sage palette has 5 colors: #26332A, #4E6A54, #8FA98A, #D6E0C8, #F6F8F1.

Where can I use this palette?

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

Is the Wellness Sage palette accessible?

Its darkest and lightest colors have a contrast ratio of 12.34:1. 4 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 Wellness Sage palette?

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

Text #26332A Gunmetal Gray Accent #4E6A54 Ebony Primary #8FA98A Sage Secondary #D6E0C8 Bone Surface #F6F8F1 Off White

Wellness Sage

Calm Wellness & wellbeing apps 5 colors

Sage and oat lower the pulse of an anxious moment. There is no hard black — the darkest tone is a soft forest, so nothing on the screen feels sharp.

Open in generator All palettes

Text Gunmetal Gray — #26332A

Accent Ebony — #4E6A54

Primary Sage — #8FA98A

Secondary Bone — #D6E0C8

Surface Off White — #F6F8F1

Contrast matrix

Text on Surface 12.34 AAA

Primary on Surface 2.39 Fail

Text on Secondary 9.66 AAA

Surface on Primary 2.39 Fail

Accent on Text 2.21 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: #26332A;
  --accent: #4E6A54;
  --primary: #8FA98A;
  --secondary: #D6E0C8;
  --surface: #F6F8F1;
}

$wellness-sage-text: #26332A;
$wellness-sage-accent: #4E6A54;
$wellness-sage-primary: #8FA98A;
$wellness-sage-secondary: #D6E0C8;
$wellness-sage-surface: #F6F8F1;

// tailwind.config.js — theme.extend.colors
colors: {
  'wellness-sage': {
    'text': '#26332A',
    'accent': '#4E6A54',
    'primary': '#8FA98A',
    'secondary': '#D6E0C8',
    'surface': '#F6F8F1',
  },
}

{
    "wellness-sage": {
        "text": {
            "value": "#26332A",
            "type": "color"
        },
        "accent": {
            "value": "#4E6A54",
            "type": "color"
        },
        "primary": {
            "value": "#8FA98A",
            "type": "color"
        },
        "secondary": {
            "value": "#D6E0C8",
            "type": "color"
        },
        "surface": {
            "value": "#F6F8F1",
            "type": "color"
        }
    }
}

{
    "text": "#26332A",
    "accent": "#4E6A54",
    "primary": "#8FA98A",
    "secondary": "#D6E0C8",
    "surface": "#F6F8F1"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#26332A
#4E6A54
#8FA98A
#D6E0C8
#F6F8F1

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.

Wellness Sage

Contrast matrix

Export tokens

How the roles work

Related palettes