Palette

Dreamy Skyscape Tint

Whispering pastels reflect the tranquil, airy feel of a serene sky painted with delicate clouds at dawn.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Dreamy Skyscape Tint 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 Skyscape Tint.

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

Data visualization

#F0F4F7#E0E7ED#CFD8E3#BFCAE1#AFC6E0

Palette guide

How to use Dreamy Skyscape Tint

Overview

The "Dreamy Skyscape Tint" palette offers whispering pastels that reflect the tranquil, airy feel of a serene sky at dawn. This subtle and ethereal collection features a gentle progression of cool, muted blues, from the almost-white #F0F4F7 to the slightly deeper #AFC6E0. Shades like #E0E7ED, #CFD8E3, and #BFCAE1 provide delicate variations, making it ideal for designs that require extreme softness and understated elegance. Designers can use this palette to create minimalist interfaces, sophisticated branding, or peaceful environments. Developers will appreciate the harmonious nature of these hex codes for seamless background transitions, subtle hover states, and clean typography.

Best used for

Minimalist website designs and UI frameworks
Luxury spa or wellness brand identities
High-end stationery or editorial design
Architectural rendering backdrops
Subtle abstract art or digital photography filters
Calm and sophisticated corporate presentations

Suggested color roles

primary

#CFD8E3 - A soft, muted blue, perfect for main content areas or large sections where a gentle, unifying color is needed.

secondary

#BFCAE1 - A slightly deeper blue, suitable for subheadings, borders, or to provide subtle visual structure without being intrusive.

accent

#AFC6E0 - The deepest shade, ideal for delicate accents, interactive elements, or to provide a touch more depth to icons.

background

#F0F4F7 - A very light, almost white-blue, serving as an expansive and clean base that enhances the airy feel.

text

#34495E (dark muted blue-gray) - A dark, professional blue-gray offers excellent contrast and complements the cool, subtle tones of the palette.

Accessibility notes

Given the extreme lightness of this palette, a dark text color like #34495E or black is essential for readability on all backgrounds.
Ensure sufficient contrast for any interactive elements, especially when using lighter shades for text or icons.
Avoid using #E0E7ED or #CFD8E3 for small text on #F0F4F7, as the contrast will be insufficient.
When layering colors, always test contrast ratios to meet WCAG guidelines, particularly for text.

Recommended combinations

Dawn Fade

Creates a delicate, almost imperceptible gradient for backgrounds, banners, or soft visual transitions.

#F0F4F7 · #E0E7ED · #CFD8E3

Subtle Depth

Use for layering content, card backgrounds, or subtle UI elements that require a hint of visual separation.

#BFCAE1 · #AFC6E0 · #CFD8E3

Clean Base

Establishes a minimalist foundation with the deepest color for contrast in headings or key highlights.

#F0F4F7 · #AFC6E0 · #BFCAE1

CSS variables

:root {
  --dreamy-skyscape-tint-1: #F0F4F7;
  --dreamy-skyscape-tint-2: #E0E7ED;
  --dreamy-skyscape-tint-3: #CFD8E3;
  --dreamy-skyscape-tint-4: #BFCAE1;
  --dreamy-skyscape-tint-5: #AFC6E0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dreamy-skyscape-tint": {
        1: "#F0F4F7",
        2: "#E0E7ED",
        3: "#CFD8E3",
        4: "#BFCAE1",
        5: "#AFC6E0",
      }
    }
  }
}

Hex values

Color 1#F0F4F7

Color 2#E0E7ED

Color 3#CFD8E3

Color 4#BFCAE1

Color 5#AFC6E0

Accessibility

Contrast checker

1.1:1Fail

1.3:1Fail

1.5:1Fail

1.6:1Fail

1.1:1Fail

1.2:1Fail

1.3:1Fail

1.4:1Fail

1.3:1Fail

1.2:1Fail

1.1:1Fail

1.2:1Fail

1.5:1Fail

1.3:1Fail

1.1:1Fail

1.6:1Fail

1.4:1Fail

1.2:1Fail

1.1:1Fail

Similar palettes

More like Dreamy Skyscape Tint

Dreamy Skyscape Tint

See it in context.

Ready when you are.

Built with Dreamy Skyscape Tint.

How to use Dreamy Skyscape Tint

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Dawn Fade

Subtle Depth

Clean Base

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Dreamy Skyscape Tint