Back to palettes

Palette

Hushed Alpine Lake

Serene blues and greens reflecting the quiet stillness of a pristine alpine lake at dawn.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F4F4F#5F9EA0#8FBC8F#ADD8E6#F0F8FF

Palette guide

How to use Hushed Alpine Lake

Overview

The "Hushed Alpine Lake" palette offers a tranquil collection of cool blues and greens, evoking the serene stillness of a pristine mountain environment. Anchored by the deep, contemplative blue-green of #2F4F4F, it transitions through the refreshing teal of #5F9EA0 and the soft sage of #8FBC8F. Lighter shades like #ADD8E6 provide a crisp, airy feel, culminating in the near-white #F0F8FF. This palette is ideal for creating designs that communicate peace, clarity, and natural elegance, providing developers and designers with a harmonious foundation for calming digital experiences and sophisticated branding.

Best used for

  • Wellness and meditation apps
  • Eco-tourism and nature conservation websites
  • Spa and relaxation product branding
  • Sustainable fashion and lifestyle blogs
  • Minimalist UI design for productivity tools
  • Photography portfolios showcasing landscapes

Suggested color roles

primary

#2F4F4F - Excellent for commanding headlines, navigation bars, or a robust footer, grounding the design with its deep, sophisticated tone.

secondary

#5F9EA0 - Perfect for subheadings, active states, or as a background for secondary content blocks, offering a refreshing contrast without overwhelming.

accent

#8FBC8F - Use this soft green for call-to-action buttons, interactive elements, or small illustrative details to draw attention subtly.

background

#ADD8E6 - A calming and airy background for main content areas, cards, or hero sections, providing a sense of spaciousness.

text

#2F4F4F or a rich charcoal (#333333) for body text ensures high readability against lighter backgrounds like #ADD8E6 or #F0F8FF.

Accessibility notes

  • Ensure sufficient contrast when pairing #2F4F4F with #F0F8FF or #ADD8E6 for text, meeting WCAG AA standards.
  • Avoid using #8FBC8F directly on #ADD8E6 for small text, as contrast may be insufficient; reserve #8FBC8F for larger headings or graphical elements.
  • For interactive elements, use #5F9EA0 or #8FBC8F with a strong hover state or outline to clearly indicate focus for users with visual impairments.
  • When using #ADD8E6 as a background, ensure text colors like #2F4F4F or a dark grey provide a contrast ratio of at least 4.5:1 for standard text.

Recommended combinations

Deep Lake

Ideal for high-contrast text and background, with the teal as a subtle accent for links or icons.

#2F4F4F · #F0F8FF · #5F9EA0

Misty Shore

A light background with a gentle green accent for buttons or illustrations, grounded by dark text.

#ADD8E6 · #8FBC8F · #2F4F4F

Alpine Twilight

Creates a soft, layered effect for UI cards or sections, with the lightest shade for internal content or delicate borders.

#5F9EA0 · #ADD8E6 · #F0F8FF

CSS variables

:root {
  --hushed-alpine-lake-1: #2F4F4F;
  --hushed-alpine-lake-2: #5F9EA0;
  --hushed-alpine-lake-3: #8FBC8F;
  --hushed-alpine-lake-4: #ADD8E6;
  --hushed-alpine-lake-5: #F0F8FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "hushed-alpine-lake": {
        1: "#2F4F4F",
        2: "#5F9EA0",
        3: "#8FBC8F",
        4: "#ADD8E6",
        5: "#F0F8FF",
      }
    }
  }
}

Related searches

calm nature color schemeblue green web paletteserene UI colorsmountain lake branding palettetranquil design inspiration

Palette colors

Hex values

Color 1#2F4F4F
·
Color 2#5F9EA0
·
Color 3#8FBC8F
·
Color 4#ADD8E6
·
Color 5#F0F8FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.9:1Fail
4.1:1AA18
5.8:1AA
8.3:1AAA
2
2.9:1Fail
1.4:1Fail
2:1Fail
2.8:1Fail
3
4.1:1AA18
1.4:1Fail
1.4:1Fail
2:1Fail
4
5.8:1AA
2:1Fail
1.4:1Fail
1.4:1Fail
5
8.3:1AAA
2.8:1Fail
2:1Fail
1.4:1Fail

Similar palettes

More like Hushed Alpine Lake

View all cool
Alpine Lake Serene
Coastal Seafoam Whisper
Coastal Seaglass Shimmer
Koi Water Garden
Mint Glacial Stream
Misty Alpine Ridge