Palette

Silver Lake Morning

A serene blend of cool grays and silvery whites, reminiscent of a still lake shimmering under a morning mist.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Silver Lake Morning 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 Silver Lake Morning.

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

Data visualization

#5F6F6F#8F9F9F#BFBFCF#DFDFEF#EFEFEF

Palette guide

How to use Silver Lake Morning

Overview

The Silver Lake Morning palette offers a serene blend of cool greys and silvery whites, reminiscent of a still lake shimmering under a morning mist. This tranquil collection features the airy #EFEFEF, the subtle #DFDFEF, the gentle #BFBFCF, the calming #8F9F9F, and the deep #5F6F6F. For designers and developers, these colors provide a calming and sophisticated foundation, perfect for creating interfaces and branding that evoke peace, clarity, and natural beauty. It’s an excellent choice for projects where a cool, understated elegance is desired, ensuring a harmonious and contemplative user experience.

Best used for

Spa and wellness brand identity
Eco-friendly product packaging
Nature photography websites
Meditation and mindfulness applications
Serene home decor inspiration
Minimalist art exhibition design

Suggested color roles

primary

Use #8F9F9F as a calm, grounded mid-tone for main content areas or prominent UI elements.

secondary

Employ #BFBFCF for soft, cool supporting elements, secondary backgrounds, or subtle accents.

accent

Apply #5F6F6F for the deepest tone, providing subtle depth, strong contrast, and emphasis for key information.

background

Choose #EFEFEF as a bright, ethereal background to create an expansive and clean canvas.

text

For strong readability on light backgrounds like #EFEFEF, use #5F6F6F for primary body text.

Accessibility notes

For body text on #EFEFEF, use #5F6F6F or #8F9F9F to ensure good contrast and WCAG AA compliance.
Lighter shades like #DFDFEF and #BFBFCF may not provide sufficient contrast for small text on #EFEFEF.
Reserve the lightest shades for large headings or decorative elements to maintain overall readability.
Test all text and interactive element color combinations against WCAG guidelines for accessibility.

Recommended combinations

Misty Morning

Creates a soft, atmospheric gradient suitable for serene backgrounds or layered UI elements.

#EFEFEF · #DFDFEF · #BFBFCF

Deep Lake

Provides a calm yet strong contrast, ideal for clear hierarchy in text or prominent features.

#EFEFEF · #5F6F6F · #8F9F9F

Tranquil Blend

Offers a gradual depth, perfect for progress indicators, charts, or subtle data visualization.

#BFBFCF · #8F9F9F · #5F6F6F

CSS variables

:root {
  --silver-lake-morning-1: #5F6F6F;
  --silver-lake-morning-2: #8F9F9F;
  --silver-lake-morning-3: #BFBFCF;
  --silver-lake-morning-4: #DFDFEF;
  --silver-lake-morning-5: #EFEFEF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "silver-lake-morning": {
        1: "#5F6F6F",
        2: "#8F9F9F",
        3: "#BFBFCF",
        4: "#DFDFEF",
        5: "#EFEFEF",
      }
    }
  }
}

Hex values

Color 1#5F6F6F

Color 2#8F9F9F

Color 3#BFBFCF

Color 4#DFDFEF

Color 5#EFEFEF

Accessibility

Contrast checker

1.9:1Fail

2.9:1Fail

4:1AA18

4.6:1AA

1.9:1Fail

1.5:1Fail

2.1:1Fail

2.4:1Fail

2.9:1Fail

1.5:1Fail

1.4:1Fail

1.6:1Fail

4:1AA18

2.1:1Fail

1.4:1Fail

1.1:1Fail

4.6:1AA

2.4:1Fail

1.6:1Fail

1.1:1Fail

Similar palettes

More like Silver Lake Morning

Stillwater Surface Calm

Alpine Lake Reflection