Back to palettes

Palette

Morning Cloud Canvas

Gentle and ethereal shades of blue and white, capturing the quiet calm of an early morning sky.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Morning Cloud Canvas 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 Morning Cloud Canvas.

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

Data visualization

#F0F8FF#ADD8E6#B0C4DE#778899#E6E6FA

Palette guide

How to use Morning Cloud Canvas

Overview

The Morning Cloud Canvas palette offers gentle and ethereal shades of blue and white, capturing the quiet calm of an early morning sky. This cool collection features the crisp #F0F8FF (Alice Blue), a soft #ADD8E6 (Light Blue), a calming #B0C4DE (Light Steel Blue), a grounding #778899 (Slate Gray), and a subtle #E6E6FA (Lavender Blush). It's an excellent choice for designers and developers seeking to create a tranquil, professional, and atmospheric aesthetic. This palette excels in conveying clarity, stability, and a sense of peaceful openness, ideal for corporate interfaces, educational platforms, or serene branding.

Best used for

  • Corporate and tech company websites
  • Educational and academic platforms
  • Serene health and wellness applications
  • Minimalist UI/UX design projects
  • Weather forecasting apps and dashboards
  • Atmospheric photography portfolios

Suggested color roles

primary

Use #B0C4DE for main headings, key calls to action, or prominent graphical elements to establish a calm yet authoritative presence.

secondary

Apply #ADD8E6 for supporting text, sub-headings, or background sections that require a lighter, refreshing blue.

accent

Utilize #778899 for important interactive elements, strong icons, or borders to provide subtle depth and contrast.

background

Employ #F0F8FF as the primary background color, providing a clean, airy, and expansive canvas that enhances legibility.

text

For optimal readability on lighter backgrounds, use #778899 for body text and headings, offering strong yet soft contrast.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using #ADD8E6 or #E6E6FA for text on #F0F8FF.
  • For interactive elements, make sure their color, such as #B0C4DE, stands out clearly against surrounding elements.
  • Avoid using #ADD8E6 and #B0C4DE for small, critical information without thorough contrast checks due to their close values.
  • Always test text legibility of light text on #778899 backgrounds to meet WCAG contrast standards.

Recommended combinations

Cloudy Sky

Creates a soft, layered sky effect, ideal for header banners or sections requiring an open, calm feel.

#ADD8E6 · #B0C4DE · #F0F8FF

Misty Morning

Offers a sophisticated blend of grey, lavender, and off-white, perfect for accent panels or elegant content blocks.

#778899 · #E6E6FA · #F0F8FF

Skyline Hues

Provides a balanced mix of blues and grey, suitable for infographics, data visualization, or corporate branding elements.

#B0C4DE · #778899 · #ADD8E6

CSS variables

:root {
  --morning-cloud-canvas-1: #F0F8FF;
  --morning-cloud-canvas-2: #ADD8E6;
  --morning-cloud-canvas-3: #B0C4DE;
  --morning-cloud-canvas-4: #778899;
  --morning-cloud-canvas-5: #E6E6FA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "morning-cloud-canvas": {
        1: "#F0F8FF",
        2: "#ADD8E6",
        3: "#B0C4DE",
        4: "#778899",
        5: "#E6E6FA",
      }
    }
  }
}

Related searches

soft blue grey palettemorning sky colorscloud theme designcool minimalist schemeatmospheric blue hex

Palette colors

Hex values

Color 1#F0F8FF
·
Color 2#ADD8E6
·
Color 3#B0C4DE
·
Color 4#778899
·
Color 5#E6E6FA
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.7:1Fail
3.4:1AA18
1.1:1Fail
2
1.4:1Fail
1.2:1Fail
2.4:1Fail
1.2:1Fail
3
1.7:1Fail
1.2:1Fail
2:1Fail
1.4:1Fail
4
3.4:1AA18
2.4:1Fail
2:1Fail
3:1Fail
5
1.1:1Fail
1.2:1Fail
1.4:1Fail
3:1Fail

Similar palettes

More like Morning Cloud Canvas

View all cool
Celestial Cloud Dust
Morning Cloud Ascent
Arctic Sky Whisper
Arctic Sky Whisper
Celestial Azure Drift
Celestial Glow