Back to palettes

Palette

Celestial Cloudscape

Light blues and ethereal whites with a hint of mystic purple, like a distant cloudy galaxy.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Celestial Cloudscape 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 Celestial Cloudscape.

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

Data visualization

#ADD8E6#87CEEB#F0FFFF#E0FFFF#6A5ACD

Palette guide

How to use Celestial Cloudscape

Overview

The Celestial Cloudscape palette combines light blues and ethereal whites with a hint of mystic purple, like a distant cloudy galaxy. It features airy blues such as #ADD8E6 and #87CEEB, complemented by the near-white #F0FFFF and #E0FFFF. The striking deep lavender #6A5ACD adds a sophisticated and intriguing accent. This palette is ideal for designers and developers seeking a calm, dreamy, and slightly whimsical aesthetic. It's perfect for projects that require a sense of lightness, tranquility, and a touch of magical elegance, from lifestyle branding to spiritual apps and artistic websites.

Best used for

  • Dreamy lifestyle brand websites
  • Meditation or mindfulness apps
  • Ethereal digital art and illustrations
  • Bridal or event planning branding
  • Serene interior design concepts
  • Cloud-themed software interfaces

Suggested color roles

primary

#6A5ACD - A deep, mystic lavender, ideal for strong headers, important accents, or to provide a sophisticated anchor.

secondary

#ADD8E6 - Use for subheadings, content blocks, or subtle backgrounds, offering a calming light blue.

accent

#87CEEB - A bright, clear sky blue, perfect for interactive elements, hover states, or to draw attention.

background

#F0FFFF - An ethereal, very light white-blue, providing an open, clean, and expansive canvas for content.

text

#6A5ACD - Offers excellent contrast and readability on the lightest backgrounds like #F0FFFF, ensuring legibility for body text and headings.

Accessibility notes

  • Ensure #6A5ACD text on #F0FFFF background meets WCAG AAA contrast ratio.
  • #ADD8E6 or #87CEEB text on #E0FFFF or #F0FFFF will have insufficient contrast; avoid for critical information.
  • For body text, stick to #6A5ACD or a dark charcoal on the lightest backgrounds.
  • Use #87CEEB sparingly for text, primarily for larger headings if the background is sufficiently dark.

Recommended combinations

Mystic Sky

Deep lavender for strong elements, light blue for content, and ethereal white for background.

#6A5ACD · #ADD8E6 · #F0FFFF

Cloud Dream

Bright sky blue for main content, very light white for soft sections, and mystic lavender for emphasis.

#87CEEB · #E0FFFF · #6A5ACD

Celestial Veil

Very light background with layered light blues for a soft, airy, and expansive feel.

#F0FFFF · #ADD8E6 · #87CEEB

CSS variables

:root {
  --celestial-cloudscape-1: #ADD8E6;
  --celestial-cloudscape-2: #87CEEB;
  --celestial-cloudscape-3: #F0FFFF;
  --celestial-cloudscape-4: #E0FFFF;
  --celestial-cloudscape-5: #6A5ACD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-cloudscape": {
        1: "#ADD8E6",
        2: "#87CEEB",
        3: "#F0FFFF",
        4: "#E0FFFF",
        5: "#6A5ACD",
      }
    }
  }
}

Related searches

light blue purple paletteethereal cloud colorsserene mystic designdreamy cool tonescelestial white blue scheme

Palette colors

Hex values

Color 1#ADD8E6
·
Color 2#87CEEB
·
Color 3#F0FFFF
·
Color 4#E0FFFF
·
Color 5#6A5ACD
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.5:1Fail
1.4:1Fail
3.5:1AA18
2
1.1:1Fail
1.7:1Fail
1.7:1Fail
3:1AA18
3
1.5:1Fail
1.7:1Fail
1:1Fail
5.2:1AA
4
1.4:1Fail
1.7:1Fail
1:1Fail
5:1AA
5
3.5:1AA18
3:1AA18
5.2:1AA
5:1AA

Similar palettes

More like Celestial Cloudscape

View all cool
Arctic Sky Aurora
Celestial Azure Drift
Celestial Cloud Dust
Celestial Glow
Celestial Ocean Dream
Dreamy Sky Canvas