Palette

Dreamy Sky Canvas

A tranquil palette evoking a serene, cloud-draped sky, perfect for creating a peaceful and expansive mood.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Dreamy Sky 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 Dreamy Sky Canvas.

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

Data visualization

#DAE2EA#C4D1DF#AEC0D4#99B0C8#E8F0F7

Palette guide

How to use Dreamy Sky Canvas

Overview

The "Dreamy Sky Canvas" palette offers a tranquil and expansive mood, drawing inspiration from a serene, cloud-draped sky. This cool-toned collection, ranging from the light #DAE2EA to the deeper #99B0C8, is excellent for designs aiming for a sense of calm and clarity. The subtle variations, including #C4D1DF and #AEC0D4, provide depth without sacrificing softness. #E8F0F7 serves as a clean, almost ethereal background. Designers can leverage these blues for corporate branding, digital interfaces, or any project requiring a sophisticated yet approachable feel. Developers will find these hex codes versatile for creating harmonious UI elements that promote focus and tranquility.

Best used for

Corporate websites with a professional yet calming aesthetic
Healthcare or wellness application interfaces
Minimalist interior design concepts
Cloud computing or data visualization dashboards
Branding for consulting firms or financial services
Serene landscape photography backdrops

Suggested color roles

primary

#AEC0D4 - A mid-tone, calming blue, ideal for primary branding elements, headers, or prominent UI components to establish a serene mood.

secondary

#C4D1DF - A slightly lighter blue, excellent for secondary information, sub-sections, or subtle visual separation.

accent

#99B0C8 - The deepest blue in the palette, suitable for highlighting key information, interactive states, or strong calls-to-action.

background

#E8F0F7 - A very light, almost off-white blue, perfect for clean, expansive backgrounds that allow content to breathe.

text

#2F4F4F (dark slate gray) - A deep, muted dark slate gray offers excellent readability and complements the cool tones of the palette.

Accessibility notes

Ensure adequate contrast for text against #E8F0F7, especially when using lighter shades from the palette.
For body text, a dark color like #2F4F4F or black is crucial against all palette backgrounds.
Pairing #99B0C8 with #E8F0F7 provides good contrast for headings or important UI elements.
Avoid using #DAE2EA or #C4D1DF for small text on #E8F0F7 to prevent readability issues.

Recommended combinations

Sky Depth

Creates a layered sky effect for backgrounds, hero sections, or illustrating depth in digital designs.

#E8F0F7 · #DAE2EA · #AEC0D4

UI Harmony

Excellent for main UI elements, interactive components, and consistent branding across an application.

#AEC0D4 · #C4D1DF · #99B0C8

Subtle Contrast

Use #E8F0F7 as a base, #99B0C8 for strong text/icons, and #DAE2EA for secondary details.

#E8F0F7 · #99B0C8 · #DAE2EA

CSS variables

:root {
  --dreamy-sky-canvas-1: #DAE2EA;
  --dreamy-sky-canvas-2: #C4D1DF;
  --dreamy-sky-canvas-3: #AEC0D4;
  --dreamy-sky-canvas-4: #99B0C8;
  --dreamy-sky-canvas-5: #E8F0F7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dreamy-sky-canvas": {
        1: "#DAE2EA",
        2: "#C4D1DF",
        3: "#AEC0D4",
        4: "#99B0C8",
        5: "#E8F0F7",
      }
    }
  }
}

Hex values

Color 1#DAE2EA

Color 2#C4D1DF

Color 3#AEC0D4

Color 4#99B0C8

Color 5#E8F0F7

Accessibility

Contrast checker

1.2:1Fail

1.4:1Fail

1.7:1Fail

1.1:1Fail

1.2:1Fail

1.4:1Fail

1.3:1Fail

1.4:1Fail

1.2:1Fail

1.6:1Fail

1.7:1Fail

1.4:1Fail

1.2:1Fail

1.9:1Fail

1.1:1Fail

1.3:1Fail

1.6:1Fail

1.9:1Fail

Similar palettes

More like Dreamy Sky Canvas

Dreamy Sky Canvas

See it in context.

Ready when you are.

Built with Dreamy Sky Canvas.

How to use Dreamy Sky Canvas

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Sky Depth

UI Harmony

Subtle Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Dreamy Sky Canvas