Back to palettes

Palette

Alpine Lake Serene

Deep and tranquil colors reminiscent of a serene alpine lake surrounded by cool, quiet forests.

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

#1E464A#3A696E#5C9196#9BBEC4#D1E5E7

Palette guide

How to use Alpine Lake Serene

Overview

The Alpine Lake Serene palette (version 2) offers a deeply tranquil and cool aesthetic, reminiscent of a quiet alpine lake nestled within verdant forests. It transitions beautifully from the profound teal-black of #1E464A, through the rich #3A696E and the clear aqua of #5C9196. Lighter, misty tones like #9BBEC4 and the almost white #D1E5E7 complete the spectrum, evoking both deep waters and crisp, fresh air. This palette is ideal for designers and developers seeking a calm, sophisticated, and natural feel. It's perfectly suited for projects requiring a sense of peace, clarity, and understated elegance, such as nature-inspired brands, wellness applications, or serene digital environments.

Best used for

  • Nature and outdoor adventure brands
  • Wellness and meditation apps
  • Eco-friendly product packaging
  • Serene website backgrounds
  • Sustainable living blogs
  • Luxury spa interiors

Suggested color roles

primary

Use #1E464A as the deepest, grounding teal-black for primary content, conveying depth and stability.

secondary

Apply #3A696E as a rich, versatile dark teal for secondary elements, adding sophistication and calm.

accent

Employ #5C9196 as a clear, refreshing accent for subtle highlights or interactive elements.

background

Utilize #D1E5E7 as a light, airy, cool base, creating a sense of spaciousness and tranquility.

text

Set body text in #1E464A, the darkest color, for optimal readability on light backgrounds like #D1E5E7.

Accessibility notes

  • Text in #1E464A on #D1E5E7 background offers excellent contrast, ensuring readability for all users.
  • Avoid using #9BBEC4 for small text on #5C9196 background due to low contrast, impacting legibility.
  • Ensure interactive elements using lighter tones have distinct visual cues beyond color to aid navigation.
  • Use the darker colors for primary content and calls-to-action to ensure maximum legibility and impact.

Recommended combinations

Forest Depths

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

#1E464A · #3A696E · #5C9196

Misty Shore

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

#D1E5E7 · #9BBEC4 · #5C9196

Quiet Reflection

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

#3A696E · #9BBEC4 · #1E464A

CSS variables

:root {
  --alpine-lake-serene-2-1: #1E464A;
  --alpine-lake-serene-2-2: #3A696E;
  --alpine-lake-serene-2-3: #5C9196;
  --alpine-lake-serene-2-4: #9BBEC4;
  --alpine-lake-serene-2-5: #D1E5E7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "alpine-lake-serene-2": {
        1: "#1E464A",
        2: "#3A696E",
        3: "#5C9196",
        4: "#9BBEC4",
        5: "#D1E5E7",
      }
    }
  }
}

Related searches

deep teal color paletteserene lake green bluecalm nature colorsforest lake schemecool green blue gradient

Palette colors

Hex values

Color 1#1E464A
·
Color 2#3A696E
·
Color 3#5C9196
·
Color 4#9BBEC4
·
Color 5#D1E5E7
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.9:1Fail
5.2:1AA
7.9:1AAA
2
1.7:1Fail
1.7:1Fail
3.1:1AA18
4.7:1AA
3
2.9:1Fail
1.7:1Fail
1.8:1Fail
2.7:1Fail
4
5.2:1AA
3.1:1AA18
1.8:1Fail
1.5:1Fail
5
7.9:1AAA
4.7:1AA
2.7:1Fail
1.5:1Fail

Similar palettes

More like Alpine Lake Serene

View all cool