Palette

Smoked Sage Aura

Muted greens and sophisticated greys evoke the tranquil scent of burning sage.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Smoked Sage Aura reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Smoked Sage Aura.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#C4C3A3#A2B29F#889D96#6D7F7D#55666A

Palette guide

How to use Smoked Sage Aura

Overview

The Smoked Sage Aura palette offers a tranquil and sophisticated blend of muted greens and refined grays, reminiscent of burning sage. This collection flows from the light, airy #C4C3A3, through the serene #A2B29F and #889D96, to the deeper, grounding #6D7F7D and #55666A. It's perfectly suited for projects that aim to evoke calmness, natural elegance, or a sense of well-being. Designers can use these shades to create serene digital experiences, peaceful interior concepts, or branding for organic and sustainable products. Developers will find these colors ideal for UI themes that require a soft, understated, and harmonious aesthetic, promoting focus and relaxation.

Best used for

Wellness and mindfulness applications
Organic and eco-friendly product branding
Spa and relaxation website design
Interior design for calming spaces
Nature-inspired photography portfolios
Subtle, professional corporate themes

Suggested color roles

primary

#55666A - A deep, calming blue-gray, excellent for foundational elements, navigation, or sophisticated backgrounds.

secondary

#6D7F7D - Use for subheadings, content panels, or secondary information to add depth without disrupting tranquility.

accent

#889D96 - A muted sage green, ideal for subtle interactive elements, highlights, or decorative touches that convey natural elegance.

background

#C4C3A3 - A light, soft green-gray, providing a gentle and airy canvas for main content, promoting readability.

text

#55666A - A dark, grounded blue-gray that offers excellent contrast on lighter backgrounds like #C4C3A3, ensuring clear readability.

Accessibility notes

Ensure #889D96 text has sufficient contrast against lighter backgrounds like #A2B29F or #C4C3A3.
The darkest shades, #55666A and #6D7F7D, provide good contrast for white or very light text.
Avoid using #A2B29F for small text on #C4C3A3 as contrast will likely be insufficient.
Check interactive elements to ensure their color states meet WCAG contrast guidelines.

Recommended combinations

Tranquil Base

A serene foundation with light background and a gentle sage accent, great for calming interfaces.

#55666A · #C4C3A3 · #889D96

Herbal Depth

Creates a layered, natural look for content blocks or visual elements.

#6D7F7D · #A2B29F · #55666A

Clean & Calm

Light background with dark text and a complementary mid-tone for a professional, calming aesthetic.

#C4C3A3 · #55666A · #6D7F7D

CSS variables

:root {
  --smoked-sage-aura-1: #C4C3A3;
  --smoked-sage-aura-2: #A2B29F;
  --smoked-sage-aura-3: #889D96;
  --smoked-sage-aura-4: #6D7F7D;
  --smoked-sage-aura-5: #55666A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "smoked-sage-aura": {
        1: "#C4C3A3",
        2: "#A2B29F",
        3: "#889D96",
        4: "#6D7F7D",
        5: "#55666A",
      }
    }
  }
}

Hex values

Color 1#C4C3A3

Color 2#A2B29F

Color 3#889D96

Color 4#6D7F7D

Color 5#55666A

Accessibility

Contrast checker

1.2:1Fail

1.6:1Fail

2.3:1Fail

3.3:1AA18

1.2:1Fail

1.3:1Fail

1.9:1Fail

2.7:1Fail

1.6:1Fail

1.3:1Fail

1.5:1Fail

2.1:1Fail

2.3:1Fail

1.9:1Fail

1.5:1Fail

1.4:1Fail

3.3:1AA18

2.7:1Fail

2.1:1Fail

1.4:1Fail

Similar palettes

More like Smoked Sage Aura