Back to palettes

Palette

Beryl Stream

Flowing hues reminiscent of clear, cool beryl-colored waters in a gentle, peaceful mountain stream.

coolnatural5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#36454F#5F9EA0#87CEEB#ADD8E6#72B9D4

Palette guide

How to use Beryl Stream

Overview

The Beryl Stream palette offers a refreshing and natural collection of cool blue-greens, ideal for projects seeking a tranquil and clear aesthetic. With deep tones like #36454F and #5F9EA0, alongside brighter hues such as #87CEEB, #ADD8E6, and #72B9D4, this palette perfectly mirrors the flowing, pristine qualities of a mountain stream. It's particularly useful for designers aiming to evoke a sense of calm, freshness, and environmental consciousness, making designs feel both grounded and expansive, like clear beryl-colored waters.

Best used for

  • Eco-friendly and sustainable branding
  • Spa and wellness websites
  • Nature photography portfolios
  • Aquatic or marine-themed designs
  • Serene digital art and illustrations
  • Health and lifestyle mobile applications

Suggested color roles

primary

Utilize #36454F for strong, anchoring elements like footers or main navigation, providing a deep, sophisticated base.

secondary

Apply #72B9D4 for prominent headings or key visual components, representing the vibrant clarity of water.

accent

Use #87CEEB as a bright, airy highlight for interactive states, small icons, or subtle decorative touches, adding sparkle.

background

Employ #ADD8E6 as a light, expansive canvas for main content areas, promoting readability and a fresh feel.

text

For dark text on light backgrounds, #36454F or a dark charcoal provides excellent contrast. On darker blues, a crisp white is recommended.

Accessibility notes

  • Ensure #36454F has sufficient contrast when used for text on lighter blues like #ADD8E6 or #87CEEB.
  • Check readability of #5F9EA0 against similar mid-tones like #72B9D4; aim for clear distinction.
  • Avoid using light blue text on light blue backgrounds for body content; reserve for large headings or accents.
  • Provide clear focus states for interactive elements using contrasting colors from the palette.

Recommended combinations

Deep Waters

Creates a sense of depth and mystery, perfect for headers or background gradients.

#36454F · #5F9EA0 · #72B9D4

Clear Stream

Captures the freshness of flowing water, ideal for clean content areas or infographics.

#ADD8E6 · #87CEEB · #72B9D4

Misty Shore

Offers a balanced contrast between deep and light, suitable for elegant branding or UI elements.

#36454F · #ADD8E6 · #5F9EA0

CSS variables

:root {
  --beryl-stream-1: #36454F;
  --beryl-stream-2: #5F9EA0;
  --beryl-stream-3: #87CEEB;
  --beryl-stream-4: #ADD8E6;
  --beryl-stream-5: #72B9D4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "beryl-stream": {
        1: "#36454F",
        2: "#5F9EA0",
        3: "#87CEEB",
        4: "#ADD8E6",
        5: "#72B9D4",
      }
    }
  }
}

Related searches

aqua blue palettenature inspired colorsserene water themecool blue designenvironmental branding colors

Palette colors

Hex values

Color 1#36454F
·
Color 2#5F9EA0
·
Color 3#87CEEB
·
Color 4#ADD8E6
·
Color 5#72B9D4
·

Accessibility

Contrast checker

1
2
3
4
5
1
3.2:1AA18
5.7:1AA
6.5:1AA
4.5:1AA
2
3.2:1AA18
1.8:1Fail
2:1Fail
1.4:1Fail
3
5.7:1AA
1.8:1Fail
1.1:1Fail
1.3:1Fail
4
6.5:1AA
2:1Fail
1.1:1Fail
1.4:1Fail
5
4.5:1AA
1.4:1Fail
1.3:1Fail
1.4:1Fail

Similar palettes

More like Beryl Stream

View all cool
Dewdrop Emerald Vine
Emerald Bamboo Sway
Emerald Grove Sanctuary
Emerald Peak Summit
Emerald River Stone
Lapis Tidepool