Back to palettes

Palette

Silver Cloud Lining

Shimmering, light greys inspired by the ethereal beauty of silver-lined clouds.

monochromecalm5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Silver Cloud Lining 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 Cloud Lining.

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

Data visualization

#BDC3C7#95A5A6#ECF0F1#7F8C8D#D0D3D4

Palette guide

How to use Silver Cloud Lining

Overview

The Silver Cloud Lining palette brings together a collection of shimmering, light greys inspired by the ethereal beauty of silver-lined clouds. This versatile palette includes the bright #ECF0F1, the subtle #D0D3D4, the balanced #BDC3C7, the soft #95A5A6, and the grounding #7F8C8D. For designers and developers, these shades offer a modern, airy foundation for interfaces and branding that require a sophisticated yet understated metallic touch. It's perfect for conveying professionalism, clarity, and a sense of calm, ensuring a clean and inviting user experience across various digital and print applications.

Best used for

  • Modern web application interfaces
  • Tech company branding
  • Elegant stationery and print design
  • Health and wellness platforms
  • Minimalist e-commerce sites
  • Cloud storage service branding

Suggested color roles

primary

Designate #BDC3C7 as the primary color for elements requiring a balanced, professional appearance.

secondary

Utilize #D0D3D4 for lighter supporting elements, secondary backgrounds, or subtle UI accents.

accent

Apply #7F8C8D for calls to action, important headings, or to add a stronger, grounding contrast.

background

Choose #ECF0F1 as the main background color to create a clean, bright, and expansive canvas.

text

For readable body text on light backgrounds like #ECF0F1, use #95A5A6 or a darker charcoal for better contrast.

Accessibility notes

  • Use #7F8C8D for primary text on #ECF0F1 or #D0D3D4 to meet WCAG AA contrast standards.
  • Ensure interactive elements, such as buttons, have sufficient contrast against their background states.
  • Avoid using #ECF0F1 for small text on #D0D3D4 due to insufficient contrast, impacting readability.
  • Consider a true black or very dark grey for essential body text if #7F8C8D isn't dark enough on certain backgrounds.

Recommended combinations

Light & Airy

Creates a soft, subtle depth ideal for layered backgrounds or card interfaces.

#ECF0F1 · #D0D3D4 · #BDC3C7

Professional Contrast

Offers clear visual hierarchy, perfect for text on background or highlighting key information.

#ECF0F1 · #7F8C8D · #95A5A6

Subtle Gradient

Provides a smooth, sophisticated transition for progress bars, charts, or decorative elements.

#BDC3C7 · #95A5A6 · #7F8C8D

CSS variables

:root {
  --silver-cloud-lining-1: #BDC3C7;
  --silver-cloud-lining-2: #95A5A6;
  --silver-cloud-lining-3: #ECF0F1;
  --silver-cloud-lining-4: #7F8C8D;
  --silver-cloud-lining-5: #D0D3D4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "silver-cloud-lining": {
        1: "#BDC3C7",
        2: "#95A5A6",
        3: "#ECF0F1",
        4: "#7F8C8D",
        5: "#D0D3D4",
      }
    }
  }
}

Related searches

modern silver grey palettelight metallic colorsethereal cloud paletteminimal grey UI designprofessional neutral scheme

Palette colors

Hex values

Color 1#BDC3C7
·
Color 2#95A5A6
·
Color 3#ECF0F1
·
Color 4#7F8C8D
·
Color 5#D0D3D4
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.6:1Fail
2:1Fail
1.2:1Fail
2
1.4:1Fail
2.2:1Fail
1.4:1Fail
1.7:1Fail
3
1.6:1Fail
2.2:1Fail
3:1AA18
1.3:1Fail
4
2:1Fail
1.4:1Fail
3:1AA18
2.3:1Fail
5
1.2:1Fail
1.7:1Fail
1.3:1Fail
2.3:1Fail

Similar palettes

More like Silver Cloud Lining

View all monochrome
Rainy Window Pane
Silver Birch Whispers
Ancient Forest Myst
Ancient Ruin Stone
Arctic Fox Pelt
Contemplative Stone Flow