Palette

Lavender Sky Dreams

Soft and dreamy purples that evoke the tranquil beauty of a twilight sky transitioning to night.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Lavender Sky Dreams 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 Lavender Sky Dreams.

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

Data visualization

#9370DB#B19CD9#E6E6FA#8470BE#A584DE

Palette guide

How to use Lavender Sky Dreams

Overview

The "Lavender Sky Dreams" palette is a captivating collection of purples that evoke the tranquil beauty of a twilight sky. Ranging from the deep #8470BE to the serene #E6E6FA, with vibrant notes like #9370DB and the softer #B19CD9, this palette offers a dreamy and sophisticated aesthetic. The inclusion of #A584DE provides a balanced mid-tone, enhancing its versatility. It's an excellent choice for designs aiming to convey calm, introspection, and a touch of ethereal wonder. Designers can leverage these shades to create immersive digital experiences, elegant branding, or soothing visual content that inspires a sense of peace.

Best used for

Astrology and spiritual websites
Night sky photography presentations
Dream interpretation apps
High-end spa and relaxation services
E-commerce for artisanal jewelry
Creative writing or poetry platforms

Suggested color roles

primary

#8470BE - A deep, grounding purple, ideal for main headings, brand logos, or significant UI elements, conveying depth and mystery.

secondary

#A584DE - A balanced medium purple, perfect for subheadings, secondary navigation, or supporting graphics, adding a gentle presence.

accent

#9370DB - A vibrant medium purple, excellent for calls-to-action, buttons, or highlighting important information, creating a sophisticated pop.

background

#E6E6FA - A very light, almost white lavender, providing an airy and expansive backdrop that enhances content readability.

text

#8470BE - This deep purple offers strong readability for body text on light backgrounds, or a dark charcoal for contrast.

Accessibility notes

Ensure #8470BE text on #E6E6FA backgrounds meets WCAG AA contrast standards; it should pass.
Avoid using #B19CD9 or #A584DE for small text on #E6E6FA to maintain readability.
Interactive elements should clearly stand out using #9370DB or #8470BE.
Consider providing sufficient visual distinction between similar purple tones for users with color vision deficiencies.

Recommended combinations

Sky Transition

Creates smooth, ethereal background gradients or layered effects, mimicking a twilight sky.

#E6E6FA · #B19CD9 · #A584DE

Dreamy Focus

Ideal for main content blocks and headings, providing strong readability with deep, captivating purples.

#E6E6FA · #8470BE · #9370DB

Ethereal Accent

Suited for interactive elements or subtle highlights, adding a sophisticated yet gentle emphasis.

#B19CD9 · #A584DE · #9370DB

CSS variables

:root {
  --lavender-sky-dreams-1: #9370DB;
  --lavender-sky-dreams-2: #B19CD9;
  --lavender-sky-dreams-3: #E6E6FA;
  --lavender-sky-dreams-4: #8470BE;
  --lavender-sky-dreams-5: #A584DE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lavender-sky-dreams": {
        1: "#9370DB",
        2: "#B19CD9",
        3: "#E6E6FA",
        4: "#8470BE",
        5: "#A584DE",
      }
    }
  }
}

Hex values

Color 1#9370DB

Color 2#B19CD9

Color 3#E6E6FA

Color 4#8470BE

Color 5#A584DE

Accessibility

Contrast checker

1.5:1Fail

3.1:1AA18

1.1:1Fail

1.2:1Fail

1.5:1Fail

2:1Fail

1.7:1Fail

1.2:1Fail

3.1:1AA18

2:1Fail

3.4:1AA18

2.5:1Fail

1.1:1Fail

1.7:1Fail

3.4:1AA18

1.4:1Fail

1.2:1Fail

2.5:1Fail

1.4:1Fail

Similar palettes

More like Lavender Sky Dreams

Lavender Sky Dreams

See it in context.

Ready when you are.

Built with Lavender Sky Dreams.

How to use Lavender Sky Dreams

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Sky Transition

Dreamy Focus

Ethereal Accent

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Lavender Sky Dreams