Palette

Alpine Lake Serene

The cool, crisp serenity of an alpine lake, reflecting the clear sky and surrounding nature.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Alpine Lake Serene 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 Alpine Lake Serene.

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

Data visualization

#005F6C#2E8691#85C0CE#C5E5EE#E6F3F7

Palette guide

How to use Alpine Lake Serene

Overview

The Alpine Lake Serene palette (version 1) captures the cool, crisp serenity of an alpine lake, reflecting the clear sky and surrounding nature. It features a beautiful progression from the deep teal of #005F6C, through the vibrant #2E8691 and the airy #85C0CE. Lighter, almost transparent blues like #C5E5EE and the pristine #E6F3F7 complete the spectrum, evoking calm waters and a fresh atmosphere. This palette is ideal for designers and developers seeking a clean, refreshing, and tranquil aesthetic. It's perfect for projects requiring a sense of peace, clarity, and natural elegance, such as eco-tourism, wellness brands, or serene digital interfaces.

Best used for

Eco-tourism and travel websites
Aquatic or marine conservation projects
Wellness and mindfulness applications
Clean, minimalist UI designs
Nature-inspired branding
Spa and resort promotions

Suggested color roles

primary

Use #005F6C as the deepest, grounding teal for primary content, conveying depth and tranquility.

secondary

Apply #2E8691 as a vibrant, versatile aqua for secondary elements, adding freshness and clarity.

accent

Employ #85C0CE as a clear, refreshing highlight for subtle accents or interactive elements.

background

Utilize #E6F3F7 as a pristine, airy, cool base, creating a sense of spaciousness and calm.

text

Set body text in #005F6C, the darkest color, for optimal readability on light backgrounds like #E6F3F7.

Accessibility notes

Text in #005F6C on #E6F3F7 background offers excellent contrast, ensuring readability for all users.
Avoid using #C5E5EE for small text on #85C0CE background due to low contrast, impacting legibility.
Ensure interactive elements have distinct visual cues in addition to color to aid navigation and usability.
Use the darker colors for headings and calls-to-action to ensure maximum legibility and visual impact.

Recommended combinations

Deep Water Calm

Creates a profound, layered depth, ideal for primary content blocks, footers, or atmospheric backgrounds.

#005F6C · #2E8691 · #85C0CE

Sky Reflection

A light, ethereal combination perfect for headers, subtle gradients, or decorative elements.

#E6F3F7 · #C5E5EE · #85C0CE

Aqua Horizon

Provides a balanced, natural flow, suitable for data visualization or layered UI components.

#2E8691 · #C5E5EE · #005F6C

CSS variables

:root {
  --alpine-lake-serene-1: #005F6C;
  --alpine-lake-serene-2: #2E8691;
  --alpine-lake-serene-3: #85C0CE;
  --alpine-lake-serene-4: #C5E5EE;
  --alpine-lake-serene-5: #E6F3F7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "alpine-lake-serene": {
        1: "#005F6C",
        2: "#2E8691",
        3: "#85C0CE",
        4: "#C5E5EE",
        5: "#E6F3F7",
      }
    }
  }
}

Hex values

Color 1#005F6C

Color 2#2E8691

Color 3#85C0CE

Color 4#C5E5EE

Color 5#E6F3F7

Accessibility

Contrast checker

1.7:1Fail

3.7:1AA18

5.5:1AA

6.5:1AA

1.7:1Fail

2.1:1Fail

3.2:1AA18

3.8:1AA18

3.7:1AA18

2.1:1Fail

1.5:1Fail

1.8:1Fail

5.5:1AA

3.2:1AA18

1.5:1Fail

1.2:1Fail

6.5:1AA

3.8:1AA18

1.8:1Fail

1.2:1Fail

Similar palettes

More like Alpine Lake Serene

View all cool

Coastal Seafoam Whisper

Coastal Seaglass Shimmer

Glacial Lake Tranquility

Hushed Alpine Lake

Koi Water Garden

Mint Glacial Stream