Back to palettes

Palette

Lavender Fields Dream

Soft, ethereal purples echoing the peaceful beauty and fragrant calm of blooming lavender fields.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#9370DB#B19CD9#DCD0FF#6A5ACD#7B68EE

Palette guide

How to use Lavender Fields Dream

Overview

The Lavender Fields Dream palette offers a captivating array of ethereal purples, blending classic lavender tones with vibrant, almost electric accents. Featuring the elegant #9370DB, the gentle #B19CD9, the airy #DCD0FF, the rich #6A5ACD, and the striking #7B68EE, this collection evokes a dreamlike field under a vibrant sky. Designers can leverage its dynamic range for impactful branding, modern digital interfaces, or compelling artistic creations. Developers will find ample contrast opportunities, enabling clear visual hierarchy and accessible text while maintaining a sophisticated and engaging aesthetic across various platforms. This palette is perfect for designs that aim to be both serene and subtly energetic.

Best used for

  • Modern luxury branding
  • Creative digital art projects
  • Interactive web applications
  • High-tech fashion accessories
  • Youthful and sophisticated marketing
  • Dynamic user interface designs

Suggested color roles

primary

Designate #9370DB as the primary color for prominent UI elements, brand accents, or key interactive components, offering an elegant focal point.

secondary

Use #B19CD9 for supporting graphics, secondary links, or subtle background patterns, providing a softer complement to the primary.

accent

Employ #7B68EE for powerful calls to action, important headings, or elements that require a vibrant, almost electric pop and maximum impact.

background

The lightest shade, #DCD0FF, is ideal for clean, airy backgrounds, creating a serene canvas that allows deeper purples to stand out.

text

For body text on light backgrounds like #DCD0FF, a dark charcoal or black is recommended. For headings, #6A5ACD provides excellent contrast and sophistication.

Accessibility notes

  • Ensure #6A5ACD or #7B68EE text on #DCD0FF backgrounds meets WCAG AAA contrast standards for superior readability.
  • Avoid using #B19CD9 for small text on light backgrounds without careful contrast checking due to potential readability issues.
  • The vibrant accents like #7B68EE should be used judiciously for interactive elements to ensure their purpose is clear.
  • Test color combinations extensively with color blindness simulators to ensure critical information remains discernible to all users.

Recommended combinations

Ethereal Bloom

Create gentle, layered backgrounds or soft visual elements, transitioning smoothly from the lightest shade to an elegant mid-purple.

#DCD0FF · #B19CD9 · #9370DB

Vibrant Focus

Ideal for a strong, energetic design: #DCD0FF as a clean background, #6A5ACD for main content, and #7B68EE for powerful calls to action.

#DCD0FF · #6A5ACD · #7B68EE

Dynamic Harmony

Perfect for creating visual hierarchy within complex components, using the varying depths of purple to guide the user's eye with subtle energy.

#B19CD9 · #9370DB · #6A5ACD

CSS variables

:root {
  --lavender-fields-dream-4-1: #9370DB;
  --lavender-fields-dream-4-2: #B19CD9;
  --lavender-fields-dream-4-3: #DCD0FF;
  --lavender-fields-dream-4-4: #6A5ACD;
  --lavender-fields-dream-4-5: #7B68EE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lavender-fields-dream-4": {
        1: "#9370DB",
        2: "#B19CD9",
        3: "#DCD0FF",
        4: "#6A5ACD",
        5: "#7B68EE",
      }
    }
  }
}

Related searches

vibrant lavender color schemeethereal purple designmodern pastel purplesdynamic floral palettesophisticated purple web design

Palette colors

Hex values

Color 1#9370DB
·
Color 2#B19CD9
·
Color 3#DCD0FF
·
Color 4#6A5ACD
·
Color 5#7B68EE
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.6:1Fail
1.4:1Fail
1.1:1Fail
2
1.5:1Fail
1.7:1Fail
2.2:1Fail
1.7:1Fail
3
2.6:1Fail
1.7:1Fail
3.7:1AA18
2.9:1Fail
4
1.4:1Fail
2.2:1Fail
3.7:1AA18
1.3:1Fail
5
1.1:1Fail
1.7:1Fail
2.9:1Fail
1.3:1Fail

Similar palettes

More like Lavender Fields Dream

View all pastel
Dreamy Lavender Field
Lavender Misty Dream
Amethyst Haze Dream
Aura Amethyst Dream
Dreamy Lavender Field
Lavender Bloom Field