Palette

Violet Bloom Nectar

A gentle cascade of purples and lavenders, mirroring the delicate beauty of blooming violet flowers.

pastelelegant5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Violet Bloom Nectar 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 Bloom Nectar.

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

Data visualization

#8A2BE2#9370DB#BA55D3#DDA0DD#E6E6FA

Palette guide

How to use Violet Bloom Nectar

Overview

The Violet Bloom Nectar palette offers a gentle cascade of purples and lavenders, mirroring the delicate beauty of blooming violet flowers. From the vibrant #8A2BE2 to the soft, airy #E6E6FA, with the elegant #BA55D3 in between, this collection is perfect for designs seeking a sweet, delicate, and floral aesthetic. It's an excellent choice for designers aiming to evoke feelings of freshness, purity, and natural elegance. The harmonious blend of shades allows for creating sophisticated yet approachable visual experiences, making it ideal for branding, digital interfaces, or print materials that require a touch of gentle charm and vibrant allure.

Best used for

Wedding and bridal invitations
Beauty and skincare product branding
Floral design and gardening websites
Children's book illustrations
Spring/summer fashion collections
Personal blogs with a feminine or dreamy theme

Suggested color roles

primary

#8A2BE2 - A vibrant and captivating violet, ideal for making a strong statement in headers, hero sections, or key brand elements.

secondary

#9370DB - A softer, yet still rich, purple perfect for supporting content blocks, sub-sections, or distinct UI components, adding elegance.

accent

#BA55D3 - A bright, playful fuchsia-purple that serves as an inviting highlight for calls-to-action, interactive elements, or decorative details.

background

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

text

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

Accessibility notes

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

Recommended combinations

Floral Dream

Perfect for a fresh, inviting design, using the lightest lavender as the background, the vibrant violet for headings, and the fuchsia-purple for playful accents.

#E6E6FA · #8A2BE2 · #BA55D3

Gentle Bloom

Great for content sections or cards, where the soft purple acts as a base, complemented by the elegant mid-purple for text, and the vibrant violet for strong accents.

#DDA0DD · #9370DB · #8A2BE2

Sweet Nectar

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

#9370DB · #BA55D3 · #E6E6FA

CSS variables

:root {
  --violet-bloom-nectar-1: #8A2BE2;
  --violet-bloom-nectar-2: #9370DB;
  --violet-bloom-nectar-3: #BA55D3;
  --violet-bloom-nectar-4: #DDA0DD;
  --violet-bloom-nectar-5: #E6E6FA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "violet-bloom-nectar": {
        1: "#8A2BE2",
        2: "#9370DB",
        3: "#BA55D3",
        4: "#DDA0DD",
        5: "#E6E6FA",
      }
    }
  }
}

Hex values

Color 1#8A2BE2

Color 2#9370DB

Color 3#BA55D3

Color 4#DDA0DD

Color 5#E6E6FA

Accessibility

Contrast checker

1.6:1Fail

1.5:1Fail

2.9:1Fail

4.8:1AA

1.6:1Fail

1:1Fail

1.8:1Fail

3.1:1AA18

1.5:1Fail

1:1Fail

1.9:1Fail

3.2:1AA18

2.9:1Fail

1.8:1Fail

1.9:1Fail

1.7:1Fail

4.8:1AA

3.1:1AA18

3.2:1AA18

1.7:1Fail

Similar palettes

More like Violet Bloom Nectar

View all pastel

Blooming Orchid Delight

Blushing Rose Glow

Mystic Orchid Petal

Twilight Orchid Bloom

Whispering Orchid Petals

Whispering Orchid Veil