Back to palettes

Palette

Serene Zen Stream

A calming and meditative collection, echoing the tranquil flow of a clear stream through a zen garden.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#6AAB9C#A7D3CA#CFE3E0#E0EFED#F1F8F8

Palette guide

How to use Serene Zen Stream

Overview

The Serene Zen Stream palette offers a calming and meditative collection of cool greens and nearly-white tones, echoing the tranquil flow of a clear stream through a zen garden. Featuring a refreshing medium aqua green `#6AAB9C`, a lighter sea green `#A7D3CA`, and progressively lighter shades like `#CFE3E0`, `#E0EFED`, and the airy `#F1F8F8`, this palette is exceptionally useful. Designers and developers can leverage its gentle gradients to create expansive, clean, and incredibly serene digital environments, perfect for promoting relaxation, focus, and a connection to nature.

Best used for

  • Wellness and spa service websites
  • Eco-friendly product branding
  • Minimalist and clean website designs
  • Nature-themed mobile applications
  • Meditation and mindfulness platforms
  • Organic food and lifestyle blogs

Suggested color roles

primary

The medium aqua green `#6AAB9C` serves as a refreshing anchor, suitable for headers or key brand elements.

secondary

Light sea green `#A7D3CA` works well for supporting content, secondary navigation, or subtle background patterns.

accent

The very light blue-green `#CFE3E0` provides a gentle accent, perfect for subtle highlights or interactive states.

background

The almost-white `#F1F8F8` or `#E0EFED` creates an expansive, clean, and airy background, enhancing readability.

text

For optimal readability, use `#6AAB9C` or a dark gray for body text against the very light backgrounds.

Accessibility notes

  • Ensure sufficient contrast when using lighter greens like `#CFE3E0` or `#E0EFED` for text on `#F1F8F8`; dark text is crucial.
  • The darkest shade, `#6AAB9C`, offers excellent contrast for white or very light gray text.
  • Avoid placing similar light tones for text and background, as this can lead to poor readability.
  • Consider using a slightly darker version of the primary or secondary for text on lighter backgrounds to meet WCAG standards.

Recommended combinations

Stream Depth

A strong green base with a light touch; `#6AAB9C` for impact, `#A7D3CA` for harmony, and `#F1F8F8` for clean content.

#6AAB9C · #A7D3CA · #F1F8F8

Misty Shallows

Creates a soft, ethereal gradient; ideal for backgrounds with subtle variations and dark, readable text overlays.

#CFE3E0 · #E0EFED · #6AAB9C

Clear Water

Perfect for a light, expansive design; `#F1F8F8` as a primary background, accented by the gentle mid-tones.

#F1F8F8 · #A7D3CA · #CFE3E0

CSS variables

:root {
  --serene-zen-stream-1: #6AAB9C;
  --serene-zen-stream-2: #A7D3CA;
  --serene-zen-stream-3: #CFE3E0;
  --serene-zen-stream-4: #E0EFED;
  --serene-zen-stream-5: #F1F8F8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "serene-zen-stream": {
        1: "#6AAB9C",
        2: "#A7D3CA",
        3: "#CFE3E0",
        4: "#E0EFED",
        5: "#F1F8F8",
      }
    }
  }
}

Related searches

zen green palettecalm water colorsserene pastel greentranquil stream thememinimalist nature design

Palette colors

Hex values

Color 1#6AAB9C
·
Color 2#A7D3CA
·
Color 3#CFE3E0
·
Color 4#E0EFED
·
Color 5#F1F8F8
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2:1Fail
2.2:1Fail
2.5:1Fail
2
1.6:1Fail
1.2:1Fail
1.4:1Fail
1.5:1Fail
3
2:1Fail
1.2:1Fail
1.1:1Fail
1.2:1Fail
4
2.2:1Fail
1.4:1Fail
1.1:1Fail
1.1:1Fail
5
2.5:1Fail
1.5:1Fail
1.2:1Fail
1.1:1Fail

Similar palettes

More like Serene Zen Stream

View all cool