Palette

Dusk Lavender Field

Soft, muted purples and blues reflecting the serene beauty of a lavender field as evening falls.

Coolcalm5 colors

More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#5D5B8D#8B8CD9#C8C7E7#3A3A6B#ADA7C9

Palette guide

How to use Dusk Lavender Field

Overview

The "Dusk Lavender Field" palette features soft, muted purples and blues reflecting the serene beauty of a lavender field as evening falls. This cool and calming collection includes a deep indigo #5D5B8D, a brighter lavender #8B8CD9, a very light pastel purple #C8C7E7, a dark, rich blue-purple #3A3A6B, and a medium muted purple #ADA7C9. It's ideal for designs seeking a tranquil, sophisticated, and soothing aesthetic. Designers can utilize this palette for luxury brands, wellness products, or elegant digital interfaces. Developers will find these hex codes excellent for creating harmonious user experiences that evoke peace, introspection, and a touch of natural beauty.

Best used for

Luxury spa or cosmetic branding
Meditation and mindfulness app interfaces
Elegant wedding stationery or event decor
High-end floral design or botanical art
Women's fashion or boutique branding
Serene bedroom interior design concepts

Suggested color roles

primary

#5D5B8D - A deep indigo, excellent for main content areas, headers, or to establish a sophisticated, calming base.

secondary

#8B8CD9 - A brighter lavender, perfect for subheadings, navigation elements, or subtle interactive components.

accent

#3A3A6B - The darkest blue-purple, ideal for strong calls-to-action, important icons, or to add grounded depth.

background

#C8C7E7 - A very light, pastel purple, offering a soft, airy, and inviting canvas that enhances the lavender tones.

text

#3A3A6B - The darkest color in the palette, ensuring excellent readability on lighter backgrounds. For dark backgrounds, use #C8C7E7.

Accessibility notes

Use #3A3A6B for text on #C8C7E7 and #ADA7C9 for optimal readability.
For text on darker shades like #5D5B8D or #3A3A6B, use the lightest color, #C8C7E7, or pure white for sufficient contrast.
Ensure interactive elements have clear visual states with good contrast, especially when using lighter purples.
Avoid pairing #8B8CD9 with #ADA7C9 for text/background combinations due to potentially low contrast.

Recommended combinations

Twilight Bloom

Creates a soft, layered background effect or subtle UI elements, evoking a gentle floral transition.

#C8C7E7 · #ADA7C9 · #8B8CD9

Deep Serenity

Use for primary branding, strong text, and a light background to highlight the deep, calming purples.

#5D5B8D · #3A3A6B · #C8C7E7

Lavender Contrast

Ideal for content blocks, card backgrounds, or subtle visual hierarchy with elegant depth.

#8B8CD9 · #ADA7C9 · #3A3A6B

CSS variables

:root {
  --dusk-lavender-field-1: #5D5B8D;
  --dusk-lavender-field-2: #8B8CD9;
  --dusk-lavender-field-3: #C8C7E7;
  --dusk-lavender-field-4: #3A3A6B;
  --dusk-lavender-field-5: #ADA7C9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dusk-lavender-field": {
        1: "#5D5B8D",
        2: "#8B8CD9",
        3: "#C8C7E7",
        4: "#3A3A6B",
        5: "#ADA7C9",
      }
    }
  }
}

Hex values

Color 1#5D5B8D

Color 2#8B8CD9

Color 3#C8C7E7

Color 4#3A3A6B

Color 5#ADA7C9

Accessibility

Contrast checker

2:1Fail

3.8:1AA18

1.7:1Fail

2.7:1Fail

2:1Fail

1.9:1Fail

3.4:1AA18

1.3:1Fail

3.8:1AA18

1.9:1Fail

6.4:1AA

1.4:1Fail

1.7:1Fail

3.4:1AA18

6.4:1AA

4.6:1AA

2.7:1Fail

1.3:1Fail

1.4:1Fail

4.6:1AA

Similar palettes

More like Dusk Lavender Field

View all Cool

Lavender Twilight Field

Aegean Shoreline Treasures

Bamboo Garden Calm

Dreamy Cloudscape Blues

Frozen Tundra Calm

Glacial Lake Tranquil