Back to palettes

Palette

Serene Waterfall Mist

The tranquil blues and greens of a waterfall's misty spray, utterly calming.

CoolCalm5 colors
More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Serene Waterfall 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 Serene Waterfall Mist.

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

Data visualization

#4682B4#5F9EA0#ADD8E6#B0E0E6#E0FFFF

Palette guide

How to use Serene Waterfall Mist

Overview

The Serene Waterfall Mist palette captures the ethereal beauty of a waterfall's misty spray, offering a collection of tranquil blues and greens. From the grounded steel blue `#4682B4` and cadet blue `#5F9EA0` to the lighter, airy shades of light sky blue `#ADD8E6`, light cyan `#B0E0E6`, and the almost-white `#E0FFFF`, this palette is utterly calming. It provides designers and developers with a refreshing and expansive visual language, perfect for creating clean, serene, and inviting interfaces that evoke a sense of purity and natural beauty, ideal for wellness or environmental themes.

Best used for

  • Spa and wellness resort branding
  • Baby product packaging and websites
  • Cloud computing and tech interfaces
  • Environmental and nature-focused organizations
  • Travel and tourism promotions (coastal, water)
  • Meditation and mindfulness app design

Suggested color roles

primary

The robust steel blue `#4682B4` can anchor the design, suitable for headers, navigation, or strong brand elements.

secondary

Cadet blue `#5F9EA0` offers a harmonious secondary color, great for subheadings or complementary sections.

accent

Light sky blue `#ADD8E6` provides a gentle accent, perfect for subtle highlights, interactive states, or decorative elements.

background

The lightest shade, `#E0FFFF`, creates an expansive, airy background, enhancing readability and an open feel.

text

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

Accessibility notes

  • Ensure sufficient contrast when using lighter blues like `#ADD8E6` or `#B0E0E6` for text on `#E0FFFF`; dark text is crucial.
  • The darkest shade, `#4682B4`, offers excellent contrast for white or very light gray text, improving legibility.
  • 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

Deep Water

A strong base with a light touch; `#4682B4` for impact, `#5F9EA0` for harmony, and `#E0FFFF` for clean content.

#4682B4 · #5F9EA0 · #E0FFFF

Misty Flow

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

#ADD8E6 · #B0E0E6 · #4682B4

Fresh Air

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

#E0FFFF · #ADD8E6 · #5F9EA0

CSS variables

:root {
  --serene-waterfall-mist-1: #4682B4;
  --serene-waterfall-mist-2: #5F9EA0;
  --serene-waterfall-mist-3: #ADD8E6;
  --serene-waterfall-mist-4: #B0E0E6;
  --serene-waterfall-mist-5: #E0FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "serene-waterfall-mist": {
        1: "#4682B4",
        2: "#5F9EA0",
        3: "#ADD8E6",
        4: "#B0E0E6",
        5: "#E0FFFF",
      }
    }
  }
}

Related searches

waterfall color schemelight blue paletteserene water colorsmisty design themetranquil cool tones

Palette colors

Hex values

Color 1#4682B4
·
Color 2#5F9EA0
·
Color 3#ADD8E6
·
Color 4#B0E0E6
·
Color 5#E0FFFF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2.7:1Fail
2.9:1Fail
3.9:1AA18
2
1.3:1Fail
2:1Fail
2.1:1Fail
2.9:1Fail
3
2.7:1Fail
2:1Fail
1.1:1Fail
1.4:1Fail
4
2.9:1Fail
2.1:1Fail
1.1:1Fail
1.4:1Fail
5
3.9:1AA18
2.9:1Fail
1.4:1Fail
1.4:1Fail

Similar palettes

More like Serene Waterfall Mist

View all Cool
Muted Ocean Depth
Alpine Lake Dawn
Arctic Glacier Melt
Coastal Pebble Wash
Misty Coastal Inlet
Misty Lagoon Serene