Sage Studio

A calm organic palette: sage greens over warm off-white, with a terracotta accent for warmth. Ideal for wellness and lifestyle brands.

organiccalmnaturalcalmfriendlynatural

Designing Calm with Sage Studio

Sage Studio is aimed at wellness, therapy, and lifestyle brands where the interface should feel quiet. The sage green primary sits low in saturation, so it can cover buttons and links without shouting. The background is a barely-green off-white, and the terracotta accent provides the warm point of interest the palette would otherwise lack.

The pairing of sage and terracotta is the entire personality of this system, so use them together rather than replacing one with a neutral. A typical hero uses the off-white canvas, a sage primary button, and a terracotta highlight on the supporting photography or iconography. Body text stays in the near-black green tone, which has enough warmth that it does not clash with the natural feel.

Palette colors

Every color role with HEX, RGB, HSL, and OKLCH values. Click any value to copy.

Background

rgb(242, 244, 239)

hsl(84, 19%, 95%)

oklch(96.4% 0.007 124.4)

Text

rgb(28, 38, 32)

hsl(144, 15%, 13%)

oklch(25.7% 0.018 158.5)

Primary

rgb(63, 107, 78)

hsl(140, 26%, 33%)

oklch(48.7% 0.068 154.2)

Secondary

rgb(156, 171, 142)

hsl(91, 15%, 61%)

oklch(72.1% 0.044 129.8)

Accent

rgb(201, 123, 79)

hsl(22, 53%, 55%)

oklch(65.7% 0.114 49.3)

Surface

rgb(255, 255, 255)

hsl(0, 0%, 100%)

oklch(100.0% 0.000 89.9)

Border

rgb(213, 219, 204)

hsl(84, 17%, 83%)

oklch(88.3% 0.021 124.7)

Muted

rgb(115, 124, 112)

hsl(105, 5%, 46%)

oklch(57.5% 0.021 137.8)

WCAG contrast checks

Three semantic pairs evaluated against WCAG 2.2 AA (4.5:1 for normal text).

Text on background

Ratio 14.07:1

AA pass

Primary on background

Ratio 5.54:1

AA pass

Accent on background

Ratio 2.95:1

Below AA

Export tokens

Six formats covering most design system workflows. Each copies cleanly to your clipboard.

tokens.css

:root {
  --color-background: #F2F4EF;
  --color-foreground: #1C2620;
  --color-primary: #3F6B4E;
  --color-secondary: #9CAB8E;
  --color-accent: #C97B4F;
  --color-surface: #FFFFFF;
  --color-border: #D5DBCC;
  --color-muted: #737C70;
}

Related Palettes

Forest Ink

A dark forest palette: deep green canvas, cream text, amber accent for highlights. For nature, sustainability, and outdoor editorial brands.

Rose Quartz

A soft rose palette: blush background, deep rose primary, lavender accent. For lifestyle, beauty, and personal-brand sites.

Ocean Deep

A deep ocean palette: midnight-navy canvas, sky-blue primary, amber accent. For premium tech and finance brands.

Warm Sand

A warm neutral palette: sand background, brown primary, forest-green accent. For artisanal and craft brands.