Back to palettes

Palette

Azure Dream Canvas

A light, expansive palette of sky blues and gentle whites, like a vast open dream canvas.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Azure Dream 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 Azure Dream Canvas.

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

Data visualization

#87CEEB#B0E0E6#ADD8E6#F0F8FF#6A5ACD

Palette guide

How to use Azure Dream Canvas

Overview

The Azure Dream Canvas palette presents a light, expansive collection of sky blues and gentle whites, like a vast open dream canvas. It features the soft sky blue of #87CEEB, the ethereal aquas of #B0E0E6 and #ADD8E6, the pristine near-white of #F0F8FF, and a surprising deep periwinkle in #6A5ACD. This pastel palette is an excellent choice for designers and developers aiming to create serene, airy, and imaginative digital spaces. Its delicate yet versatile range allows for subtle blends and calming contrasts, perfect for applications that prioritize softness, spaciousness, and a touch of gentle sophistication.

Best used for

  • Children's book illustrations
  • Wedding stationery designs
  • Cloud storage services branding
  • Baby product websites
  • Art and creative portfolios (airy)
  • Beauty and skincare brands (gentle)

Suggested color roles

primary

#87CEEB acts as a gentle yet defining primary, suitable for main sections, soft headers, or brand elements.

secondary

#ADD8E6 provides a harmonious secondary, excellent for subheadings, background sections, or supporting visuals.

accent

#6A5ACD offers a sophisticated, deep periwinkle accent, perfect for subtle highlights, important links, or a touch of elegance.

background

#F0F8FF delivers a pristine, expansive background, ensuring content breathes and the overall feel is light and dreamy.

text

Use #6A5ACD or a deep charcoal for body text on #F0F8FF or #B0E0E6 backgrounds for optimal readability.

Accessibility notes

  • Ensure #6A5ACD text on #F0F8FF backgrounds meets WCAG AA contrast standards.
  • Avoid using #B0E0E6 or #ADD8E6 for small text on light backgrounds due to potential low contrast.
  • Use #6A5ACD for critical interactive elements to provide clear visual cues against the lighter tones.
  • For large text, #87CEEB on #F0F8FF can work, but verify contrast carefully.

Recommended combinations

Dreamy Sky

Creates a soft, ethereal gradient, perfect for backgrounds or subtle visual transitions.

#F0F8FF · #B0E0E6 · #87CEEB

Canvas Highlight

A balanced trio for clear hierarchy, with a strong accent against a clean background and soft secondary.

#F0F8FF · #6A5ACD · #ADD8E6

Pastel Depth

Effective for adding depth to pastel designs, using the deeper tone for contrast and structure.

#6A5ACD · #87CEEB · #B0E0E6

CSS variables

:root {
  --azure-dream-canvas-1: #87CEEB;
  --azure-dream-canvas-2: #B0E0E6;
  --azure-dream-canvas-3: #ADD8E6;
  --azure-dream-canvas-4: #F0F8FF;
  --azure-dream-canvas-5: #6A5ACD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "azure-dream-canvas": {
        1: "#87CEEB",
        2: "#B0E0E6",
        3: "#ADD8E6",
        4: "#F0F8FF",
        5: "#6A5ACD",
      }
    }
  }
}

Related searches

dreamy pastel blue paletteairy sky blue colorsgentle white blue schemeperiwinkle accent palettesoft blue web design

Palette colors

Hex values

Color 1#87CEEB
·
Color 2#B0E0E6
·
Color 3#ADD8E6
·
Color 4#F0F8FF
·
Color 5#6A5ACD
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.1:1Fail
1.6:1Fail
3:1AA18
2
1.2:1Fail
1.1:1Fail
1.3:1Fail
3.7:1AA18
3
1.1:1Fail
1.1:1Fail
1.4:1Fail
3.5:1AA18
4
1.6:1Fail
1.3:1Fail
1.4:1Fail
4.9:1AA
5
3:1AA18
3.7:1AA18
3.5:1AA18
4.9:1AA

Similar palettes

More like Azure Dream Canvas

View all pastel
Cloud Berry Skies
Ethereal Cloud Veil
Sky Whispers Gentle
Whispering Cloud Veil
Cloud Blossom Breeze
Cloud Dream Whisper