Back to palettes

Palette

Violet Haze Prairie

Soft, muted violets and lilacs evoking the tranquil, hazy beauty of a vast lavender field at dawn.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Violet Haze Prairie 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 Violet Haze Prairie.

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

Data visualization

#E6E6FA#D8BFD8#C3B2D2#9370DB#6A5ACD

Palette guide

How to use Violet Haze Prairie

Overview

The Violet Haze Prairie palette captures the tranquil, hazy beauty of a vast lavender field at dawn with its soft, muted violets and lilacs. Ranging from the airy #E6E6FA to the deep, anchoring #6A5ACD, with the serene #C3B2D2 offering a harmonious mid-tone, this collection is perfect for designs seeking a calm, dreamy, and natural aesthetic. It's an excellent choice for designers aiming to evoke feelings of serenity, peace, and understated beauty. The gentle blend of shades allows for creating soothing and inviting visual experiences, making it ideal for branding, digital interfaces, or print materials that require a touch of quiet elegance and natural charm.

Best used for

  • Yoga and meditation studio branding
  • Baby product packaging and websites
  • Tranquil spa and wellness retreats
  • Nature-inspired photography portfolios
  • Art therapy resources and platforms
  • Personal blogs with a calm or minimalist theme

Suggested color roles

primary

#6A5ACD - A deep, anchoring violet that provides a strong, grounding primary for headers, hero sections, or significant brand elements.

secondary

#9370DB - A rich, supporting lavender perfect for content blocks, sub-sections, or distinct UI components, adding elegant depth.

accent

#D8BFD8 - A soft, delicate lilac that serves as a subtle highlight for interactive elements, dividers, or decorative details.

background

#E6E6FA - An airy, very light lavender that provides a clean and serene background for content areas, ensuring excellent readability.

text

On #E6E6FA and #D8BFD8, use #6A5ACD or a deep charcoal for optimal readability. For #6A5ACD and #9370DB, white or a very light cream text is recommended.

Accessibility notes

  • Ensure high contrast for text: White or light cream text on #6A5ACD and #9370DB is crucial for readability.
  • Be mindful of contrast between mid-tones: Text or UI elements in #D8BFD8 may lack sufficient contrast on backgrounds like #C3B2D2.
  • Check WCAG AA/AAA compliance for critical interactive elements, especially when using accent colors on lighter backgrounds.
  • Avoid using small body text in #C3B2D2 against backgrounds that are too close in luminance, such as #9370DB.

Recommended combinations

Hazy Dawn

Ideal for a fresh, calming design, using the lightest lavender as the background, the deepest violet for headings, and the mid-purple for body text or accents.

#E6E6FA · #6A5ACD · #9370DB

Prairie Serenity

Great for content sections or cards, where the mid-tone acts as a base, complemented by the softer lilac for highlights, and the deep violet for strong accents or links.

#C3B2D2 · #D8BFD8 · #6A5ACD

Lavender Fields

Effective for creating depth and focus, with the mid-purple as a background, the lightest lavender for supporting text or icons, and the mid-tone for interactive elements.

#9370DB · #E6E6FA · #C3B2D2

CSS variables

:root {
  --violet-haze-prairie-1: #E6E6FA;
  --violet-haze-prairie-2: #D8BFD8;
  --violet-haze-prairie-3: #C3B2D2;
  --violet-haze-prairie-4: #9370DB;
  --violet-haze-prairie-5: #6A5ACD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "violet-haze-prairie": {
        1: "#E6E6FA",
        2: "#D8BFD8",
        3: "#C3B2D2",
        4: "#9370DB",
        5: "#6A5ACD",
      }
    }
  }
}

Related searches

lavender color palettecalm purple themedreamy web designsoft pastel violettranquil UI colors

Palette colors

Hex values

Color 1#E6E6FA
·
Color 2#D8BFD8
·
Color 3#C3B2D2
·
Color 4#9370DB
·
Color 5#6A5ACD
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.6:1Fail
3.1:1AA18
4.3:1AA18
2
1.4:1Fail
1.2:1Fail
2.2:1Fail
3.1:1AA18
3
1.6:1Fail
1.2:1Fail
1.9:1Fail
2.7:1Fail
4
3.1:1AA18
2.2:1Fail
1.9:1Fail
1.4:1Fail
5
4.3:1AA18
3.1:1AA18
2.7:1Fail
1.4:1Fail

Similar palettes

More like Violet Haze Prairie

View all pastel
Lavender Haze Field
Lavender Sky Drift
Aura Amethyst Dream
Celestial Dream Dust
Dreamy Cotton
Dreamy Lavender Field