Palette

Serene Lakeside Calm

Gentle blues and whites reflecting the peaceful quiet of a glassy lake surface.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Serene Lakeside Calm 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 Lakeside Calm.

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

Data visualization

#87CEFA#4682B4#ADD8E6#E0FFFF#F0FFFF

Palette guide

How to use Serene Lakeside Calm

Overview

The Serene Lakeside Calm palette captures the peaceful quiet of a glassy lake surface through its gentle blues and whites. Ranging from the soft, almost white #F0FFFF to the grounded blue of #4682B4, and featuring airy mid-tones like #87CEFA and #ADD8E6, this palette exudes a profound sense of tranquility and openness. It's an ideal choice for designers aiming to create light, refreshing, and calming visual experiences. Developers can leverage these harmonious cool tones for applications related to wellness, travel, or any digital space where a clean, ethereal, and soothing aesthetic is desired, promoting relaxation and clarity.

Best used for

Spa and wellness brand identity
Travel and tourism websites (lakeside destinations)
Meditation and relaxation apps
Minimalist interior design concepts
Baby product branding
Cloud-based software interfaces

Suggested color roles

primary

#4682B4 - A stable, classic blue, perfect for establishing a trustworthy and serene brand foundation.

secondary

#87CEFA - A lighter, inviting sky blue for subheadings, active states, or supporting graphic elements.

accent

#ADD8E6 - A pale, serene blue that provides a soft highlight, ideal for subtle interactive cues or dividers.

background

#F0FFFF - A very light, almost white tone (azure), ideal for clean, airy, and expansive backgrounds.

text

#4682B4 for primary text on light backgrounds, or a deep charcoal for text on mid-tones for readability.

Accessibility notes

Ensure sufficient contrast when using #ADD8E6 or #E0FFFF for text against #F0FFFF; they will likely fail for small text.
#4682B4 provides excellent contrast for text on #F0FFFF, ensuring readability.
Avoid using light blues like #87CEFA on #ADD8E6 for small text due to potential low contrast.
For interactive elements, ensure hover/focus states maintain contrast guidelines, possibly by darkening the color.

Recommended combinations

Calm Horizons

A crisp, high-contrast pairing for clean headers or minimalist UI with a refreshing sky blue accent.

#F0FFFF · #4682B4 · #87CEFA

Glassy Surface

Smooth, ethereal gradient for backgrounds or layered UI elements, evoking a clear, reflective surface.

#ADD8E6 · #E0FFFF · #87CEFA

Deep Lakeside

A grounding dark blue for primary content, balanced by a very light background and a soft mid-tone accent.

#4682B4 · #F0FFFF · #ADD8E6

CSS variables

:root {
  --serene-lakeside-calm-1: #87CEFA;
  --serene-lakeside-calm-2: #4682B4;
  --serene-lakeside-calm-3: #ADD8E6;
  --serene-lakeside-calm-4: #E0FFFF;
  --serene-lakeside-calm-5: #F0FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "serene-lakeside-calm": {
        1: "#87CEFA",
        2: "#4682B4",
        3: "#ADD8E6",
        4: "#E0FFFF",
        5: "#F0FFFF",
      }
    }
  }
}

Hex values

Color 1#87CEFA

Color 2#4682B4

Color 3#ADD8E6

Color 4#E0FFFF

Color 5#F0FFFF

Accessibility

Contrast checker

2.4:1Fail

1.1:1Fail

1.6:1Fail

1.7:1Fail

2.4:1Fail

2.7:1Fail

3.9:1AA18

4:1AA18

1.1:1Fail

2.7:1Fail

1.4:1Fail

1.5:1Fail

1.6:1Fail

3.9:1AA18

1.4:1Fail

1:1Fail

1.7:1Fail

4:1AA18

1.5:1Fail

1:1Fail

Similar palettes

More like Serene Lakeside Calm

View all cool

Alpine Lake Serene

Calm Lake Reflections

Calm Ocean Swell

Glacial Lagoon Calm

Glacial Lake Mirror

Glacial Lake Serenity