Palette

Lavender Dreamscape

A gentle, ethereal field of lavender under a soft, moonlit sky, evoking calm serenity.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4E416F#786C8D#B4A9C4#E2DFF4#D3D0D9

Palette guide

How to use Lavender Dreamscape

Overview

The Lavender Dreamscape palette offers a sophisticated and deeply calming collection, moving from rich, muted purples to soft, airy off-whites. It begins with the profound #4E416F, transitioning through the elegant #786C8D and the harmonious #B4A9C4. The lighter tones, #E2DFF4 and the subtle #D3D0D9, provide luminosity and contrast. This palette is ideal for creating designs that evoke a sense of quiet luxury, introspection, and serene elegance, reminiscent of a moonlit lavender field. Designers will find these hues versatile for high-end branding, sophisticated digital interfaces, or calming interior design concepts, offering a truly refined visual experience.

Best used for

Luxury brand identity and packaging
High-end editorial or publishing design
Sophisticated web and app interfaces
Art gallery or museum exhibition design
Interior design for elegant, tranquil spaces
Evening wear fashion collections

Suggested color roles

primary

#786C8D serves as a sophisticated and grounding primary, excellent for main headings, brand logos, or key graphical elements, providing a subtle anchor.

secondary

#B4A9C4 offers a soft, supportive tone, ideal for subheadings, background panels, or secondary information, maintaining the palette's refined aesthetic.

accent

#4E416F provides a deep, luxurious accent, perfect for call-to-action buttons, interactive elements, or important highlights, adding gravitas.

background

#E2DFF4 is a very light, almost off-white background, creating an open and airy canvas that enhances content and promotes a sense of tranquility.

text

#4E416F offers excellent contrast for body text on lighter backgrounds, ensuring readability. A deep charcoal or black can also be used for optimal legibility.

Accessibility notes

Ensure text in #4E416F on #E2DFF4 or #D3D0D9 backgrounds meets WCAG AA contrast standards.
Avoid using #D3D0D9 text on #E2DFF4 for critical information due to insufficient contrast.
Use #4E416F or #786C8D for interactive elements to ensure they are visually distinct and perceivable.
Carefully test color combinations for users with color vision deficiencies, especially for subtle differences between lighter tones.

Recommended combinations

Moonlit Gradient

Ideal for elegant background gradients, layered UI elements, or creating a sophisticated, atmospheric visual flow.

#E2DFF4 · #B4A9C4 · #786C8D

Deep Refinement

Effective for establishing visual depth in headers, footers, or feature sections, providing strong yet harmonious contrast.

#786C8D · #4E416F · #B4A9C4

Serene UI

Suitable for designing sophisticated interfaces, with a light background, a balanced primary, and a deep, legible color for text and accents.

#E2DFF4 · #786C8D · #4E416F

CSS variables

:root {
  --lavender-dreamscape-1: #4E416F;
  --lavender-dreamscape-2: #786C8D;
  --lavender-dreamscape-3: #B4A9C4;
  --lavender-dreamscape-4: #E2DFF4;
  --lavender-dreamscape-5: #D3D0D9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lavender-dreamscape": {
        1: "#4E416F",
        2: "#786C8D",
        3: "#B4A9C4",
        4: "#E2DFF4",
        5: "#D3D0D9",
      }
    }
  }
}

Hex values

Color 1#4E416F

Color 2#786C8D

Color 3#B4A9C4

Color 4#E2DFF4

Color 5#D3D0D9

Accessibility

Contrast checker

1.9:1Fail

4.1:1AA18

7:1AA

6:1AA

1.9:1Fail

2.2:1Fail

3.7:1AA18

3.2:1AA18

4.1:1AA18

2.2:1Fail

1.7:1Fail

1.5:1Fail

7:1AA

3.7:1AA18

1.7:1Fail

1.2:1Fail

6:1AA

3.2:1AA18

1.5:1Fail

1.2:1Fail

Similar palettes

More like Lavender Dreamscape

View all pastel

Amethyst Haze Dream

Dreamy Lavender Field

Lavender Dream

Lavender Fields Dream

Lavender Haze Meadow

Lavender Misty Dream