Back to palettes

Palette

Lakeside Reeds Quiet

Subtle greens and muted tones reflecting the peaceful, reedy edges of a still lake at twilight.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Lakeside Reeds Quiet 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 Lakeside Reeds Quiet.

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

Data visualization

#5F7D6B#738F80#96A89B#B8C7BF#D7DFDB

Palette guide

How to use Lakeside Reeds Quiet

Overview

The Lakeside Reeds Quiet palette offers a tranquil blend of subtle greens and muted tones, perfectly capturing the serene essence of a still lake at twilight. This palette, featuring calming shades like the deep #5F7D6B, the balanced #96A89B, and the airy #D7DFDB, is ideal for designers and developers aiming to evoke peace and natural harmony. Its gentle progression from deeper greens to soft, almost-white hues creates an inviting and understated aesthetic. This selection promotes a sense of calm, making it excellent for projects that require a sophisticated yet soothing visual experience.

Best used for

  • Wellness and spa branding
  • Eco-friendly product packaging
  • Nature-themed web design
  • Interior design mood boards
  • Relaxation and meditation apps
  • Sustainable fashion lines

Suggested color roles

primary

Use #5F7D6B as the foundational color for main headings or brand elements, providing a deep, grounding green.

secondary

Employ #738F80 for supporting sections, subheadings, or larger content blocks to maintain a cohesive, natural feel.

accent

Highlight interactive elements or key information with #96A89B, offering a subtle yet distinct contrast.

background

Utilize #D7DFDB as a clean, airy background, ensuring excellent readability and a soft visual base.

text

For body text, #5F7D6B or a very dark charcoal ensures high readability against lighter backgrounds like #D7DFDB.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when pairing mid-tones like #96A89B with #B8C7BF.
  • White text on #5F7D6B provides excellent readability for headings and important callouts.
  • For small text, avoid using #738F80 on #B8C7BF; opt for a darker text color or a lighter background.
  • The lightest color, #D7DFDB, works well as a background for nearly all other palette colors for text.

Recommended combinations

Deep Serenity

Ideal for main UI elements, navigation, and primary content areas, creating a calm and professional look.

#5F7D6B · #738F80 · #D7DFDB

Muted Harmony

Perfect for subtle gradients, secondary content blocks, or decorative accents that require a soft touch.

#96A89B · #B8C7BF · #D7DFDB

Reed Accent

Suitable for call-to-action buttons, interactive states, or highlighting key information against a lighter canvas.

#5F7D6B · #B8C7BF · #96A89B

CSS variables

:root {
  --lakeside-reeds-quiet-1: #5F7D6B;
  --lakeside-reeds-quiet-2: #738F80;
  --lakeside-reeds-quiet-3: #96A89B;
  --lakeside-reeds-quiet-4: #B8C7BF;
  --lakeside-reeds-quiet-5: #D7DFDB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lakeside-reeds-quiet": {
        1: "#5F7D6B",
        2: "#738F80",
        3: "#96A89B",
        4: "#B8C7BF",
        5: "#D7DFDB",
      }
    }
  }
}

Related searches

serene green color palettenature inspired design colorstranquil muted green hexpeaceful UI color schemesoft aquatic greens

Palette colors

Hex values

Color 1#5F7D6B
·
Color 2#738F80
·
Color 3#96A89B
·
Color 4#B8C7BF
·
Color 5#D7DFDB
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.8:1Fail
2.6:1Fail
3.3:1AA18
2
1.3:1Fail
1.4:1Fail
2:1Fail
2.6:1Fail
3
1.8:1Fail
1.4:1Fail
1.4:1Fail
1.8:1Fail
4
2.6:1Fail
2:1Fail
1.4:1Fail
1.3:1Fail
5
3.3:1AA18
2.6:1Fail
1.8:1Fail
1.3:1Fail

Similar palettes

More like Lakeside Reeds Quiet

View all cool