Back to palettes

Palette

Lavender Haze Field

Soft, ethereal purples and lilacs evoking the tranquil beauty of a blooming lavender field.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#9370DB#B19CD9#CDC2E6#D8BFEA#7A5DA7

Palette guide

How to use Lavender Haze Field

Overview

The "Lavender Haze Field" palette (version 2) delivers soft, ethereal purples and lilacs, perfectly evoking the tranquil beauty of a blooming lavender field. It features the vibrant #9370DB, transitioning to the elegant #B19CD9, and softening further to the delicate #CDC2E6. The lighter #D8BFEA provides an airy touch, while the deeper #7A5DA7 offers a grounding element. This collection is ideal for designers and developers aiming to convey calmness, dreamlike quality, and understated elegance. It's perfect for projects requiring a soothing yet visually engaging aesthetic, from digital interfaces to gentle branding.

Best used for

  • Wellness apps or meditation platforms
  • Feminine product branding or packaging
  • Wedding or event planning services
  • Art and craft e-commerce websites
  • Children's book illustrations
  • Blog or personal website with a gentle aesthetic

Suggested color roles

primary

#9370DB - A vibrant yet soft purple, suitable for main calls-to-action, primary navigation, and impactful headings.

secondary

#B19CD9 - Excellent for supporting elements, subheadings, or backgrounds that need a touch of color without being overwhelming.

accent

#7A5DA7 - A deeper, richer purple perfect for adding gravitas to important links, icons, or as a strong contrasting element.

background

#D8BFEA - A very light, soft background color that provides an airy and gentle canvas for content.

text

#7A5DA7 - A deep, readable purple that offers strong contrast against lighter backgrounds, ideal for body text and critical information.

Accessibility notes

  • Ensure sufficient contrast between #CDC2E6 or #D8BFEA and the background for critical text; larger font sizes may be required.
  • #7A5DA7 provides excellent contrast on #D8BFEA, making it suitable for primary text.
  • Avoid using lighter palette colors for small text or essential information.
  • Test color combinations for readability for users with color vision deficiencies.

Recommended combinations

Field Base

Creates a soft, layered background and subtle informational display.

#D8BFEA · #CDC2E6 · #B19CD9

Vibrant Depth

Ideal for prominent calls-to-action, headers, and brand elements.

#D8BFEA · #9370DB · #7A5DA7

Hazy Blend

Use for delicate patterns, illustrations, or gradient effects with gentle transitions.

#B19CD9 · #9370DB · #CDC2E6

CSS variables

:root {
  --lavender-haze-field-2-1: #9370DB;
  --lavender-haze-field-2-2: #B19CD9;
  --lavender-haze-field-2-3: #CDC2E6;
  --lavender-haze-field-2-4: #D8BFEA;
  --lavender-haze-field-2-5: #7A5DA7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lavender-haze-field-2": {
        1: "#9370DB",
        2: "#B19CD9",
        3: "#CDC2E6",
        4: "#D8BFEA",
        5: "#7A5DA7",
      }
    }
  }
}

Related searches

lavender field color schemeethereal purple palettesoft floral design colorsdreamy UI purplepastel violet branding

Palette colors

Hex values

Color 1#9370DB
·
Color 2#B19CD9
·
Color 3#CDC2E6
·
Color 4#D8BFEA
·
Color 5#7A5DA7
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.2:1Fail
2.3:1Fail
1.4:1Fail
2
1.5:1Fail
1.4:1Fail
1.5:1Fail
2.2:1Fail
3
2.2:1Fail
1.4:1Fail
1:1Fail
3.2:1AA18
4
2.3:1Fail
1.5:1Fail
1:1Fail
3.2:1AA18
5
1.4:1Fail
2.2:1Fail
3.2:1AA18
3.2:1AA18

Similar palettes

More like Lavender Haze Field

View all pastel