Palette

Calm Lake Reflections

Tranquil blues and greys capturing the peaceful reflections on a still, calm lake surface.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Calm Lake Reflections 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 Calm Lake Reflections.

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

Data visualization

#2F4F4F#4682B4#87CEEB#B0C4DE#708090

Palette guide

How to use Calm Lake Reflections

Overview

The Calm Lake Reflections palette features tranquil blues and greys, capturing the peaceful reflections on a still lake surface. This serene collection includes a deep, muted teal-grey, #2F4F4F, and a robust steel blue, #4682B4, evoking deep waters. These are complemented by a lighter sky blue, #87CEEB, and a soft periwinkle, #B0C4DE, reminiscent of the sky. A mid-tone grey, #708090, provides grounding. Designers will find this palette excellent for creating calming, contemplative, and sophisticated visuals. Developers can leverage these colors to build serene and inviting user interfaces for brands focused on wellness, nature, minimalist design, or any application seeking a tranquil and refined aesthetic, ensuring a sense of peace and clarity.

Best used for

Wellness and meditation apps
Nature-focused photography websites
Minimalist interior design concepts
Sustainable living brands
Tranquil educational platforms
Outdoor recreation branding

Suggested color roles

primary

Utilize #B0C4DE as a soft, adaptable primary background, providing a light and serene foundation.

secondary

Apply #87CEEB for supporting elements, offering a gentle sky blue that complements the primary.

accent

Introduce #4682B4 as a strong, yet calm, accent for calls to action or key features, adding depth and focus.

background

Employ #B0C4DE for clean, light backgrounds, creating a gentle and harmonious canvas.

text

Use #2F4F4F for main body text and headings, ensuring strong readability and a sophisticated, grounded feel against lighter backgrounds.

Accessibility notes

Ensure sufficient contrast when pairing #2F4F4F text with #B0C4DE or #87CEEB backgrounds for optimal readability.
Avoid using lighter blues like #87CEEB or #B0C4DE for small text against similar light backgrounds due to low contrast.
For interactive elements, use #2F4F4F or #4682B4 to ensure clear affordance and meet WCAG contrast guidelines.
Test color combinations across different screen types to verify visual clarity for all users.

Recommended combinations

Still Waters

Creates a soft, harmonious blend of light blues and greys, ideal for subtle gradients, backgrounds, or layered effects.

#87CEEB · #B0C4DE · #708090

Deep Reflection

Offers a grounded yet serene feel, combining deep teal-grey with light periwinkle and steel blue for text or important elements.

#2F4F4F · #B0C4DE · #4682B4

Sky & Shore

Provides a balanced blend of blues and grey, suitable for content blocks or distinct sections, evoking a lakeside view.

#4682B4 · #708090 · #87CEEB

CSS variables

:root {
  --calm-lake-reflections-1: #2F4F4F;
  --calm-lake-reflections-2: #4682B4;
  --calm-lake-reflections-3: #87CEEB;
  --calm-lake-reflections-4: #B0C4DE;
  --calm-lake-reflections-5: #708090;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "calm-lake-reflections": {
        1: "#2F4F4F",
        2: "#4682B4",
        3: "#87CEEB",
        4: "#B0C4DE",
        5: "#708090",
      }
    }
  }
}

Hex values

Color 1#2F4F4F

Color 2#4682B4

Color 3#87CEEB

Color 4#B0C4DE

Color 5#708090

Accessibility

Contrast checker

2.2:1Fail

5.1:1AA

5:1AA

2.2:1Fail

2.4:1Fail

2.3:1Fail

1:1Fail

5.1:1AA

2.4:1Fail

1:1Fail

2.3:1Fail

5:1AA

2.3:1Fail

1:1Fail

2.3:1Fail

2.2:1Fail

1:1Fail

2.3:1Fail

Similar palettes

More like Calm Lake Reflections

Calm Lake Reflections

See it in context.

Ready when you are.

Built with Calm Lake Reflections.

How to use Calm Lake Reflections

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Still Waters

Deep Reflection

Sky & Shore

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Calm Lake Reflections