What colors are in the Sage Studio palette?

The Sage Studio palette has 5 colors: #16191A, #2E3634, #6E8F7E, #B9CDC1, #F1F5F2.

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 Studio palette accessible?

Its darkest and lightest colors have a contrast ratio of 16.06:1. 5 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 Studio palette?

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

Text #16191A Graphite Secondary #2E3634 Gunmetal Gray Primary #6E8F7E Russian Green Accent #B9CDC1 Soft Sage Surface #F1F5F2 White Smoke

Sage Studio

Minimal Studio & portfolio 5 colors

One muted sage carries a whole minimal interface, with only greys and space around it. The accent appears once per screen, which is exactly as often as a quiet brand should raise its voice.

Open in generator All palettes

Text Graphite — #16191A

Secondary Gunmetal Gray — #2E3634

Primary Russian Green — #6E8F7E

Accent Soft Sage — #B9CDC1

Surface White Smoke — #F1F5F2

Contrast matrix

Text on Surface 16.06 AAA

Primary on Surface 3.24 AA Large

Text on Secondary 1.43 Fail

Surface on Primary 3.24 AA Large

Accent on Text 10.58 AAA

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: #16191A;
  --secondary: #2E3634;
  --primary: #6E8F7E;
  --accent: #B9CDC1;
  --surface: #F1F5F2;
}

$sage-studio-text: #16191A;
$sage-studio-secondary: #2E3634;
$sage-studio-primary: #6E8F7E;
$sage-studio-accent: #B9CDC1;
$sage-studio-surface: #F1F5F2;

// tailwind.config.js — theme.extend.colors
colors: {
  'sage-studio': {
    'text': '#16191A',
    'secondary': '#2E3634',
    'primary': '#6E8F7E',
    'accent': '#B9CDC1',
    'surface': '#F1F5F2',
  },
}

{
    "sage-studio": {
        "text": {
            "value": "#16191A",
            "type": "color"
        },
        "secondary": {
            "value": "#2E3634",
            "type": "color"
        },
        "primary": {
            "value": "#6E8F7E",
            "type": "color"
        },
        "accent": {
            "value": "#B9CDC1",
            "type": "color"
        },
        "surface": {
            "value": "#F1F5F2",
            "type": "color"
        }
    }
}

{
    "text": "#16191A",
    "secondary": "#2E3634",
    "primary": "#6E8F7E",
    "accent": "#B9CDC1",
    "surface": "#F1F5F2"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#16191A
#2E3634
#6E8F7E
#B9CDC1
#F1F5F2

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 Studio

Contrast matrix

Export tokens

How the roles work

Related palettes