Back to palettes

Palette

Serene Lake Glass

A cool, clear palette reflecting the tranquil surface of a calm lake under a soft blue sky, clear and reflective.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B0C4DE#87CEEB#ADD8E6#6495ED#4682B4

Palette guide

How to use Serene Lake Glass

Overview

The Serene Lake Glass palette reflects the tranquil surface of a calm lake under a soft blue sky, clear and reflective. This cool collection ranges from the deep, stable blue of #4682B4 to the airy lightness of #B0C4DE, featuring classic and inviting mid-tones like #87CEEB and #ADD8E6. It's an excellent choice for designers aiming to convey clarity, trust, and a sense of peaceful calm. Developers can leverage these harmonious blues for corporate websites, educational platforms, or any interface where a clean, professional, and soothing aesthetic is desired, ensuring a consistent and refreshing user experience.

Best used for

  • Corporate and financial services branding
  • Educational institution websites
  • Weather or water-related applications
  • Healthcare and wellness platforms
  • Aviation or travel industry design
  • Clean, minimalist UI/UX projects

Suggested color roles

primary

#6495ED - A classic, reliable blue, perfect for establishing a trustworthy and professional brand identity.

secondary

#87CEEB - A lighter, refreshing blue for subheadings, interactive elements, or supporting graphics.

accent

#ADD8E6 - A pale, serene blue that can subtly highlight calls-to-action or provide a soft visual break.

background

#B0C4DE - A soft, cool blue-gray that provides a clean, calm, and spacious canvas.

text

#4682B4 for primary text on light backgrounds, or a crisp white for text on darker blues for readability.

Accessibility notes

  • Ensure sufficient contrast when using #ADD8E6 for text against #B0C4DE; it may require larger font sizes.
  • #4682B4 offers excellent contrast for text on #B0C4DE, ensuring readability.
  • Avoid using #87CEEB on #ADD8E6 for small text due to potential low contrast.
  • For interactive elements, consider using #6495ED for active states against lighter backgrounds.

Recommended combinations

Deep Water Clarity

A strong, clear combination for headlines or primary information, with a light accent.

#4682B4 · #ADD8E6 · #6495ED

Sky Reflection

A smooth, upward gradient for backgrounds or layered UI elements, evoking an open sky.

#B0C4DE · #87CEEB · #6495ED

Calm Surface

A light background with deep, readable text, accented by a refreshing mid-tone for balance.

#ADD8E6 · #4682B4 · #87CEEB

CSS variables

:root {
  --serene-lake-glass-1: #B0C4DE;
  --serene-lake-glass-2: #87CEEB;
  --serene-lake-glass-3: #ADD8E6;
  --serene-lake-glass-4: #6495ED;
  --serene-lake-glass-5: #4682B4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "serene-lake-glass": {
        1: "#B0C4DE",
        2: "#87CEEB",
        3: "#ADD8E6",
        4: "#6495ED",
        5: "#4682B4",
      }
    }
  }
}

Related searches

serene blue color schemeslake inspired palettecalm water UI colorsprofessional blue brandingcool clear design palette

Palette colors

Hex values

Color 1#B0C4DE
·
Color 2#87CEEB
·
Color 3#ADD8E6
·
Color 4#6495ED
·
Color 5#4682B4
·

Accessibility

Contrast checker

1
2
3
4
5
1
1:1Fail
1.2:1Fail
1.7:1Fail
2.3:1Fail
2
1:1Fail
1.1:1Fail
1.7:1Fail
2.4:1Fail
3
1.2:1Fail
1.1:1Fail
1.9:1Fail
2.7:1Fail
4
1.7:1Fail
1.7:1Fail
1.9:1Fail
1.4:1Fail
5
2.3:1Fail
2.4:1Fail
2.7:1Fail
1.4:1Fail

Similar palettes

More like Serene Lake Glass

View all cool
Alpine Lake Serene
Glacial Lake Tranquility
Serene Lake Reflect
Serene Lakeside Calm
Azure Abyss Calm
Azure Lagoon Drift