Back to palettes

Palette

Zen Garden

Tranquil greens and muted blues create a serene and balanced atmosphere, perfect for reflection.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B4C6A4#9DBDA2#87B4A8#70A1AB#5A88B2

Palette guide

How to use Zen Garden

Overview

The Zen Garden palette offers a serene blend of tranquil greens and muted blues, perfect for creating calm and reflective digital experiences. Featuring hues like the soft green of #B4C6A4, the gentle teal of #9DBDA2, and the deeper aquatic tone of #70A1AB, this palette provides a harmonious foundation for projects seeking a natural and balanced aesthetic. Designers will find its cool, earthy tones ideal for fostering a sense of peace, while developers can implement these exact hex codes to ensure visual consistency across web and mobile interfaces. The cool, refreshing blue of #5A88B2 acts as a gentle anchor, completing a versatile set for mindful design.

Best used for

  • Wellness and meditation apps
  • Spa and holistic health websites
  • Eco-friendly product branding
  • Nature-inspired interior design visuals
  • Educational platforms for mindfulness
  • Serene digital art and illustration

Suggested color roles

primary

#87B4A8 - A balanced teal-green, ideal for main headings, prominent UI elements, or large background sections to establish the core tranquil mood.

secondary

#9DBDA2 - A lighter, more muted green, perfect for supporting content blocks, secondary navigation, or subtle dividers.

accent

#5A88B2 - A calming blue, excellent for calls-to-action, interactive elements, or small design details that need to subtly stand out without disrupting tranquility.

background

#B4C6A4 - A very light, soft green, serving as a gentle base for primary content areas, providing an airy and natural feel.

text

#70A1AB - A deeper, desaturated blue-green, suitable for body text on light backgrounds, offering good readability while maintaining the palette's cool harmony. For lighter text, consider a near-white like #F5F5F5.

Accessibility notes

  • Ensure sufficient contrast between #B4C6A4 and darker text colors like #70A1AB for readability, especially for small font sizes.
  • Use a tool to check WCAG compliance for text against backgrounds, particularly when pairing lighter colors such as #9DBDA2 with #B4C6A4.
  • Reserve #5A88B2 for interactive elements that have clear visual cues beyond color, as its contrast might be moderate against some palette backgrounds.
  • Avoid using multiple light colors like #B4C6A4 and #9DBDA2 in close proximity for critical information to prevent visual ambiguity.

Recommended combinations

Forest Calm

Ideal for tranquil website headers or hero sections, providing depth with a gradient-like feel from light green to a deeper blue-green.

#B4C6A4 · #87B4A8 · #70A1AB

Water & Stone

Excellent for UI elements where #5A88B2 acts as an interactive button against a #9DBDA2 card, with #B4C6A4 as a subtle border.

#9DBDA2 · #5A88B2 · #B4C6A4

Deep Serenity

Suitable for data visualizations or charts, where the progression of blue-greens visually represents growth or flow in a calming manner.

#70A1AB · #5A88B2 · #9DBDA2

CSS variables

:root {
  --zen-garden-2-1: #B4C6A4;
  --zen-garden-2-2: #9DBDA2;
  --zen-garden-2-3: #87B4A8;
  --zen-garden-2-4: #70A1AB;
  --zen-garden-2-5: #5A88B2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "zen-garden-2": {
        1: "#B4C6A4",
        2: "#9DBDA2",
        3: "#87B4A8",
        4: "#70A1AB",
        5: "#5A88B2",
      }
    }
  }
}

Related searches

calm green blue paletteserene web design colorsnatural meditation app colorstranquil ui ux paletteearthy cool color scheme

Palette colors

Hex values

Color 1#B4C6A4
·
Color 2#9DBDA2
·
Color 3#87B4A8
·
Color 4#70A1AB
·
Color 5#5A88B2
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.3:1Fail
1.6:1Fail
2.1:1Fail
2
1.1:1Fail
1.1:1Fail
1.4:1Fail
1.8:1Fail
3
1.3:1Fail
1.1:1Fail
1.2:1Fail
1.6:1Fail
4
1.6:1Fail
1.4:1Fail
1.2:1Fail
1.3:1Fail
5
2.1:1Fail
1.8:1Fail
1.6:1Fail
1.3:1Fail

Similar palettes

More like Zen Garden

View all cool
Alpine Lake Serene
Bamboo Forest Mist
Coastal Seafoam Whisper
Coastal Seaglass Shimmer
Enchanted Forest Stream
Green Tea Serenity