Back to palettes

Palette

Herbal Garden Mist

Soft, muted greens and blues evoking the tranquil, dew-kissed atmosphere of an early morning herb garden.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Herbal Garden Mist 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 Herbal Garden Mist.

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

Data visualization

#4F6D7A#7CA0A9#B3C1C6#DDE4E6#E7ECEB

Palette guide

How to use Herbal Garden Mist

Overview

The Herbal Garden Mist palette captures the serene and ethereal beauty of a dew-kissed morning garden with its soft, cool, and muted tones. The deep, tranquil blue-green #4F6D7A establishes a calming foundation, transitioning beautifully through the gentle #7CA0A9 and the airy #B3C1C6. The lightest hues, #DDE4E6 and the almost white #E7ECEB, evoke a sense of mist and freshness. This palette is exceptionally well-suited for designs aiming to convey calm, purity, and a sophisticated, understated elegance, making it a favorite for projects that need to feel clean, peaceful, and inviting without being overly vibrant or intrusive.

Best used for

  • Spa and relaxation brand identity
  • Minimalist interior design concepts
  • Skincare and beauty product packaging
  • Wellness apps and meditation platforms
  • Coastal or serene home decor
  • Wedding stationery with a subtle elegance

Suggested color roles

primary

#4F6D7A – A deep, calming blue-green ideal for main branding, headers, and strong visual anchors.

secondary

#7CA0A9 – A softer, mid-tone blue-green suitable for subheadings, navigation, and supporting graphic elements.

accent

#B3C1C6 – A light, airy accent for subtle highlights, delicate icons, or to break up larger sections of content.

background

#E7ECEB – Provides a very light, clean, and expansive backdrop, promoting a sense of calm and clarity.

text

#4F6D7A – Ensures excellent readability on the lightest backgrounds, maintaining the palette's cool, serene mood.

Accessibility notes

  • Ensure #4F6D7A text on #E7ECEB or #DDE4E6 backgrounds meets WCAG contrast requirements.
  • Be cautious when using #B3C1C6 for small text; it's best for larger elements or decorative accents.
  • Check the contrast of #7CA0A9 when used for interactive elements against the lightest backgrounds.
  • For maximum readability, consider using a very dark charcoal or black for extensive body text if the primary color feels too soft.

Recommended combinations

Misty Depths

Deep, readable text on a misty background with a gentle, cool accent.

#4F6D7A · #E7ECEB · #7CA0A9

Airy Layers

Creates a soft, layered effect for backgrounds or subtle UI elements, anchored by a deep tone.

#B3C1C6 · #DDE4E6 · #4F6D7A

Calm Harmony

A serene combination for soft branding, light interfaces, or tranquil illustrations.

#7CA0A9 · #E7ECEB · #B3C1C6

CSS variables

:root {
  --herbal-garden-mist-1: #4F6D7A;
  --herbal-garden-mist-2: #7CA0A9;
  --herbal-garden-mist-3: #B3C1C6;
  --herbal-garden-mist-4: #DDE4E6;
  --herbal-garden-mist-5: #E7ECEB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "herbal-garden-mist": {
        1: "#4F6D7A",
        2: "#7CA0A9",
        3: "#B3C1C6",
        4: "#DDE4E6",
        5: "#E7ECEB",
      }
    }
  }
}

Related searches

misty blue green palettecalming cool color schemeserene minimalist designspa inspired colorssubtle elegant branding

Palette colors

Hex values

Color 1#4F6D7A
·
Color 2#7CA0A9
·
Color 3#B3C1C6
·
Color 4#DDE4E6
·
Color 5#E7ECEB
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
3:1Fail
4.3:1AA18
4.6:1AA
2
2:1Fail
1.5:1Fail
2.2:1Fail
2.4:1Fail
3
3:1Fail
1.5:1Fail
1.4:1Fail
1.5:1Fail
4
4.3:1AA18
2.2:1Fail
1.4:1Fail
1.1:1Fail
5
4.6:1AA
2.4:1Fail
1.5:1Fail
1.1:1Fail

Similar palettes

More like Herbal Garden Mist

View all cool