Palette

Silver Lining Sky

A gradient of soft greys moving into bright whites, like the luminous edge of a cloud against a hopeful sky.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#696969#A9A9A9#D3D3D3#F0F8FF#B0C4DE

Palette guide

How to use Silver Lining Sky

Overview

The Silver Lining Sky palette presents a gradient of soft greys moving into bright whites and gentle blues, like the luminous edge of a cloud against a hopeful sky. This inspiring collection includes the airy #F0F8FF, the soft #D3D3D3, the comforting #B0C4DE, the versatile #A9A9A9, and the grounding #696969. For designers and developers, these colors offer a clean, optimistic, and modern foundation, perfect for creating interfaces and branding that convey hope, clarity, and tranquility. It's an excellent choice for projects where a light, expansive, and subtly colored aesthetic is desired, ensuring a welcoming user experience.

Best used for

Inspirational and motivational websites
Non-profit organization branding
Educational platforms and apps
Clean, modern user interfaces
Baby product branding and packaging
Wellness and mental health applications

Suggested color roles

primary

Designate #B0C4DE as the primary color for important sections or interactive elements, offering a calm blue-grey.

secondary

Utilize #D3D3D3 for soft, supporting grey elements, secondary backgrounds, or subtle UI accents.

accent

Apply #696969 for the deepest tone, providing strong emphasis for calls to action, important text, or strong anchors.

background

Choose #F0F8FF as the main background color to create an airy, bright, and expansive canvas.

text

For excellent readability on light backgrounds like #F0F8FF, use #696969 for primary body text.

Accessibility notes

#696969 provides strong contrast on #F0F8FF and #D3D3D3, ensuring readability for all text.
#A9A9A9 can be used for secondary text on #F0F8FF, but always verify WCAG AA compliance for smaller sizes.
Ensure interactive elements in #B0C4DE have sufficient contrast against #F0F8FF if used as a background.
Avoid using #D3D3D3 or #B0C4DE for small text on #F0F8FF due to potential low contrast issues.

Recommended combinations

Hopeful Horizon

Creates a soft, expansive gradient ideal for headers, banners, or full-page backgrounds.

#F0F8FF · #D3D3D3 · #B0C4DE

Clear Contrast

Offers a direct and legible contrast, perfect for main text on background or key information blocks.

#F0F8FF · #696969 · #A9A9A9

Sky Depth

Provides a layered blue-grey progression, suitable for charts, data visualization, or complex UI elements.

#B0C4DE · #A9A9A9 · #696969

CSS variables

:root {
  --silver-lining-sky-1: #696969;
  --silver-lining-sky-2: #A9A9A9;
  --silver-lining-sky-3: #D3D3D3;
  --silver-lining-sky-4: #F0F8FF;
  --silver-lining-sky-5: #B0C4DE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "silver-lining-sky": {
        1: "#696969",
        2: "#A9A9A9",
        3: "#D3D3D3",
        4: "#F0F8FF",
        5: "#B0C4DE",
      }
    }
  }
}

Hex values

Color 1#696969

Color 2#A9A9A9

Color 3#D3D3D3

Color 4#F0F8FF

Color 5#B0C4DE

Accessibility

Contrast checker

2.3:1Fail

3.7:1AA18

5.1:1AA

3.1:1AA18

2.3:1Fail

1.6:1Fail

2.2:1Fail

1.3:1Fail

3.7:1AA18

1.6:1Fail

1.4:1Fail

1.2:1Fail

5.1:1AA

2.2:1Fail

1.4:1Fail

1.7:1Fail

3.1:1AA18

1.3:1Fail

1.2:1Fail

1.7:1Fail

Similar palettes

More like Silver Lining Sky

View all monochrome

Abstract Canvas Swirl