Base Hex: #84A98C

Sage Green Color Wheel & UI Harmonies

Drag the handle around the wheel or use sliders below

Harmony Formula

RGB(132, 169, 140)

Hue Angle133°

Saturation18%

Lightness59%

Generated Harmonies (3 Colors)

Primary Base

#84A98C

oklch(0.699 0.058 151.2)

Split Accent 1

#9F84A9

oklch(0.651 0.062 316.8)

Split Accent 2

#A9848E

oklch(0.652 0.047 0.5)

Design System Validation

Live UI Component Preview

Apex Analytics

Team Dashboard

Harmonized Active

Total Conversion+18.4%

$84,290

Active Users+34.2%

14,820

Harmonic Health99.8%

Optimal

Interactive Button & State Styles

Verify clickability, state contrasts, and visual weight across primary and secondary controls.

Badge Tag (#A9848E)

Accessibility Audit

WCAG 2.1 Contrast Matrix

Evaluates minimum contrast ratios for regular body text (4.5:1 AA, 7:1 AAA) and large text (3:1).

Color Role	Hex	On Pure White (#FFF)	On Dark Obsidian (#0B0F19)	Recommended Usage
Primary Base	#84A98C	2.61:1(Fail)	7.33:1(AAA)	Best on Dark UI / Buttons
Split Accent 1	#9F84A9	3.31:1(AA (large text))	5.79:1(AA)	Best on Dark UI / Buttons
Split Accent 2	#A9848E	3.29:1(AA (large text))	5.82:1(AA)	Best on Dark UI / Buttons

Design Token Generator

50–950 Tailwind Shade Ramp

Click any swatch to copy its HEX value. Formatted for Tailwind CSS v4 / v3 color configurations.

Developer Export Center

Ready-to-Use Code Snippets

// tailwind.config.js / CSS @theme
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#F6F8F7',
          100: '#EAF0EC',
          200: '#CFDED2',
          300: '#B1C9B6',
          400: '#8DB094',
          500: '#84A98C',
          600: '#587E60',
          700: '#47664E',
          800: '#344B39',
          900: '#223426',
          950: '#141F16',
        },
        secondary: '#9F84A9',
        accent: '#A9848E',
      }
    }
  }
};

Color Architecture & Design Systems

How to Use Sage Green in Digital Product Design

✓Recommended UI Applications

Ideal for expansive card surfaces, serene landing page sections, and secondary pill filters. It balances brilliantly with warm terracotta, oat whites (#FBFBF9), and deep bronze charcoal.

⚠Accessibility & Contrast Guidelines

Sage green requires dark text (#1E293B or #2D3A31) to maintain WCAG AA compliance (ratio 5.8:1). Avoid white text on mid-tone sage surfaces.

Curated UI Pairings for Sage Green

Expertly tested color coordinates that harmonize with Sage Green without visual clashes.

Earthy Warmth

#E07A5F

Terracotta clay for primary CTAs and striking focal points.

Oat Neutral

#F4F6F4

Creamy muted surface replacing harsh sterile pure white.

Dark Moss Text

#2F3E34

High-contrast organic charcoal for headings and long-form body copy.

Sage Green Design System Token Specifications

Exact mathematical coordinates for design tokens, CSS variables, and modern style declarations.

HEX CODE

#84A98C

RGB VALUE

rgb(132, 169, 140)

HSL VALUE

hsl(133°, 18%, 59%)

OKLCH VALUE

oklch(0.699 0.058 151.2)

Target Industries:Mindfulness & MeditationHome DecorOrganic SkincareBoutique Hospitality

Frequently Asked Questions About Sage Green

What primary role should Sage Green take in a digital interface?

Sage Green (133° hue with reduced saturation) is the ultimate calming neutral for modern web aesthetics. By muting green with slate undertones, sage removes digital fatigue and creates an organic, artisanal feel popular across lifestyle brands, wellness apps, and sustainable commerce. In software applications, it functions best as an intentional accent, call-to-action anchor, or branded container highlight rather than an overwhelming full-bleed background.

How do I maintain WCAG AA accessibility when using Sage Green?

Sage green requires dark text (#1E293B or #2D3A31) to maintain WCAG AA compliance (ratio 5.8:1). Avoid white text on mid-tone sage surfaces. Always verify text and background luminance ratios using our real-time WCAG matrix table above before shipping to production.

How can I import Sage Green into Tailwind CSS?

Use our Code Export Center above to copy the ready-made 11-step shade scale (50 to 950) directly into your Tailwind v4 @theme or v3 tailwind.config.js file.

Explore More

Related Design Color Wheels

View all wheels →

Aesthetic

#9D8DF1

Dreamy, Pinterest-inspired palette featuring Y2K pastels, cottagecore greens, and warm 70s vintage tones.

Soft Autumn

#B86B53

Muted, warm earth-toned palette from 12-season color analysis — featuring terracotta, olive, and warm taupe.

Deep Winter

#1E3A8A

High-contrast, jewel-toned palette from 12-season analysis — featuring obsidian navy, icy cobalt, and cool ruby.

Soft Summer

#9B8EB9

Cool, desaturated smoky pastel palette — featuring dusty lavender, slate denim, and sea mist sage.