Back to palettes

Palette

Sage Mist Contour

Subtle greens and grays that trace the gentle, hazy outlines of a landscape veiled in sage mist.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sage Mist Contour 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 Sage Mist Contour.

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

Data visualization

#6E8C78#8FBCA0#B1D1BF#D7E7E0#5C7A67

Palette guide

How to use Sage Mist Contour

Overview

The 'Sage Mist Contour' palette features subtle greens and grays that trace the gentle, hazy outlines of a landscape veiled in mist. This serene collection, including the balanced #6E8C78, the airy #8FBCA0, the soft #B1D1BF, the near-white #D7E7E0, and the grounding #5C7A67, creates a calm and minimalist aesthetic. Designers can leverage these hues to evoke tranquility, sophistication, and a sense of understated elegance. Developers will find these hex codes ideal for crafting user interfaces that are clean, serene, and visually harmonious, perfect for high-end wellness brands or minimalist digital experiences.

Best used for

  • Minimalist branding and web design
  • Mindful living and meditation apps
  • Spa and wellness center aesthetics
  • Subtle interior design accents
  • Eco-conscious product marketing
  • Clean, modern corporate identities

Suggested color roles

primary

Use #6E8C78 as a balanced, misty main green, conveying serenity and sophisticated simplicity.

secondary

Apply #8FBCA0 for lighter, airy support elements, creating gentle visual transitions.

accent

Employ #5C7A67 as a deeper, grounding contour, perfect for important headings or subtle highlights.

background

Utilize #D7E7E0 for a soft, almost white base that brightens the design and enhances readability.

text

Pair #5C7A67 or a dark charcoal with #D7E7E0 for excellent readability in body text and headings.

Accessibility notes

  • Ensure #5C7A67 text on #D7E7E0 provides strong contrast for optimal readability.
  • Check that #6E8C78 text on #B1D1BF meets WCAG contrast guidelines for legibility.
  • Avoid using light-colored text on mid-tone greens to prevent readability issues.
  • Consider color blindness when using subtle variations of green to ensure visual distinction.

Recommended combinations

Misty Layers

Creates a soft, atmospheric depth, ideal for backgrounds, subtle gradients, or serene visual storytelling.

#D7E7E0 · #B1D1BF · #8FBCA0

Contour Definition

Perfect for establishing clear yet gentle outlines and visual hierarchy in a clean design.

#5C7A67 · #6E8C78 · #8FBCA0

Serene Base

Offers a clean and calming visual structure, excellent for defining sections and ensuring clear communication.

#D7E7E0 · #6E8C78 · #5C7A67

CSS variables

:root {
  --sage-mist-contour-1: #6E8C78;
  --sage-mist-contour-2: #8FBCA0;
  --sage-mist-contour-3: #B1D1BF;
  --sage-mist-contour-4: #D7E7E0;
  --sage-mist-contour-5: #5C7A67;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sage-mist-contour": {
        1: "#6E8C78",
        2: "#8FBCA0",
        3: "#B1D1BF",
        4: "#D7E7E0",
        5: "#5C7A67",
      }
    }
  }
}

Related searches

monochrome sage palettemuted green schemeserene design colorsmisty landscape palettecalm minimalist greens

Palette colors

Hex values

Color 1#6E8C78
·
Color 2#8FBCA0
·
Color 3#B1D1BF
·
Color 4#D7E7E0
·
Color 5#5C7A67
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.2:1Fail
2.9:1Fail
1.3:1Fail
2
1.7:1Fail
1.3:1Fail
1.7:1Fail
2.2:1Fail
3
2.2:1Fail
1.3:1Fail
1.3:1Fail
2.9:1Fail
4
2.9:1Fail
1.7:1Fail
1.3:1Fail
3.7:1AA18
5
1.3:1Fail
2.2:1Fail
2.9:1Fail
3.7:1AA18

Similar palettes

More like Sage Mist Contour

View all monochrome
Cloud Grey Mirage
Digital Interface Glow
Monochromatic Foggy City
Monochromatic Mist
Monochrome Charcoal Depth
Tranquil Stone Path