Back to palettes

Palette

Tranquil Waterfall Mist

Soft, cool tones that capture the refreshing and serene aura of a gentle waterfall and its mist.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B0E0E6#AFEEEE#E0FFFF#87CEEB#F0F8FF

Palette guide

How to use Tranquil Waterfall Mist

Overview

The "Tranquil Waterfall Mist" palette is a breathtaking collection of soft, ethereal blues, perfectly capturing the refreshing and serene essence of a gentle waterfall. With light hues like #F0F8FF and #E0FFFF, complemented by slightly deeper yet still airy tones such as #AFEEEE, #B0E0E6, and #87CEEB, this palette creates an incredibly calming and expansive atmosphere. It's ideal for designers and developers crafting experiences that demand lightness, purity, and a sense of peaceful openness. Think wellness apps, cloud services, or any digital product aiming to evoke clarity and tranquility.

Best used for

  • Wellness and meditation apps
  • Cloud computing service branding
  • Spa and beauty product websites
  • Nursery or baby product designs
  • Clean, minimalist UI themes
  • Travel agencies promoting serene destinations

Suggested color roles

primary

Use #87CEEB (Sky Blue) for calls to action, prominent headings, or interactive elements, providing a clear yet gentle focus.

secondary

Apply #B0E0E6 (Powder Blue) for secondary navigation, background sections, or subtle informational panels, maintaining a light feel.

accent

Employ #AFEEEE (Pale Turquoise) for delicate icons, hover states, or small illustrative details to add a refreshing, airy touch.

background

Utilize #F0F8FF (Alice Blue) to provide an incredibly clean, almost white base, ensuring maximum readability and an expansive, tranquil canvas.

text

Use #87CEEB (Sky Blue) for headings and important text. For general body text, consider a dark grey like #333333 for optimal contrast and readability against these very light backgrounds.

Accessibility notes

  • Given the lightness of the palette, ensure that text (e.g., #87CEEB or a dark charcoal) has sufficient contrast against background colors like #F0F8FF or #E0FFFF.
  • Avoid using very light colors like #E0FFFF for small text or critical UI elements without a much darker background.
  • Interactive elements should use #87CEEB to clearly indicate functionality and provide better contrast.
  • Always check contrast ratios, especially for links and buttons, to ensure WCAG compliance for all users.

Recommended combinations

Misty Flow

Perfect for soft background gradients or ethereal UI elements, creating a delicate and airy visual experience.

#F0F8FF · #E0FFFF · #AFEEEE

Clear Sky

Ideal for a clean header or call-to-action block, using the deepest blue for focus on a very light background.

#87CEEB · #B0E0E6 · #F0F8FF

Gentle Cascade

Effective for subtle data visualizations or informational panels, providing a harmonious and serene presentation.

#AFEEEE · #B0E0E6 · #E0FFFF

CSS variables

:root {
  --tranquil-waterfall-mist-1: #B0E0E6;
  --tranquil-waterfall-mist-2: #AFEEEE;
  --tranquil-waterfall-mist-3: #E0FFFF;
  --tranquil-waterfall-mist-4: #87CEEB;
  --tranquil-waterfall-mist-5: #F0F8FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tranquil-waterfall-mist": {
        1: "#B0E0E6",
        2: "#AFEEEE",
        3: "#E0FFFF",
        4: "#87CEEB",
        5: "#F0F8FF",
      }
    }
  }
}

Related searches

calm blue palettemisty blue color schemeserene water colorslight blue UI designtranquil cool tones

Palette colors

Hex values

Color 1#B0E0E6
·
Color 2#AFEEEE
·
Color 3#E0FFFF
·
Color 4#87CEEB
·
Color 5#F0F8FF
·

Accessibility

Contrast checker

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

Similar palettes

More like Tranquil Waterfall Mist

View all cool
Lake Mist Reflection
Peaceful Lake Mist
Calm Ocean Swell
Glacial Lagoon Calm
Glacial Lake Mirror
Glacial Lake Serenity