Back to palettes

Palette

Twilight Lavender Field

Soothing purples and soft greens reminiscent of a serene lavender field at the gentle hours of twilight.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8677AE#9B8DC9#D2CDE4#ADBCA1#EAEAE0

Palette guide

How to use Twilight Lavender Field

Overview

The "Twilight Lavender Field" palette offers a soothing blend of gentle purples and soft, muted greens, reminiscent of a serene lavender field at dusk. With shades like the calming #8677AE and the delicate #EAEAE0, this collection is perfect for designers and developers seeking a peaceful and natural aesthetic. The unique inclusion of #ADBCA1 provides an earthy, botanical touch, while #9B8DC9 and #D2CDE4 offer versatile mid-tones. This palette is ideal for creating tranquil digital environments, organic branding, or any content that requires a soft, calming, and naturally elegant mood.

Best used for

  • Organic beauty or skincare brands
  • Yoga and meditation studio websites
  • Nature-inspired children's products
  • Relaxation or wellness app interfaces
  • Handmade craft e-commerce stores
  • Environmental or botanical garden websites

Suggested color roles

primary

#8677AE - A soft, muted lavender, excellent for main headers, footers, or dominant brand elements, conveying calm.

secondary

#9B8DC9 - A slightly lighter purple, ideal for secondary content blocks, navigation, or subtle interactive elements.

accent

#ADBCA1 - A gentle, earthy green, perfect for subtle accents, icons, or graphical elements that add a natural touch.

background

#EAEAE0 - A very light, almost off-white, providing a clean, airy, and soft canvas for most content.

text

#8677AE - The darkest purple shade, offering good contrast for primary body text against light backgrounds like #EAEAE0.

Accessibility notes

  • Ensure #8677AE text has sufficient contrast against #EAEAE0 and #D2CDE4 for WCAG AA compliance.
  • Avoid using #9B8DC9 or #ADBCA1 for small text on very light backgrounds as contrast may be insufficient.
  • For critical information, consider a dark charcoal (e.g., #444444) for text on the lightest background.
  • Ensure interactive elements have clear visual cues for states (e.g., hover, focus) to maintain usability.

Recommended combinations

Field Serenity

Light, airy backgrounds with layered content and soft, readable text.

#EAEAE0 · #D2CDE4 · #8677AE

Natural Accent

Primary content areas with an organic green accent and light background.

#8677AE · #ADBCA1 · #EAEAE0

Pastel UI

Card elements, forms, and buttons for a gentle and approachable user interface.

#9B8DC9 · #D2CDE4 · #8677AE

CSS variables

:root {
  --twilight-lavender-field-1: #8677AE;
  --twilight-lavender-field-2: #9B8DC9;
  --twilight-lavender-field-3: #D2CDE4;
  --twilight-lavender-field-4: #ADBCA1;
  --twilight-lavender-field-5: #EAEAE0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "twilight-lavender-field": {
        1: "#8677AE",
        2: "#9B8DC9",
        3: "#D2CDE4",
        4: "#ADBCA1",
        5: "#EAEAE0",
      }
    }
  }
}

Related searches

lavender green pastel palettecalm floral color schemetwilight field colorssoft nature brandingmuted purple green ui

Palette colors

Hex values

Color 1#8677AE
·
Color 2#9B8DC9
·
Color 3#D2CDE4
·
Color 4#ADBCA1
·
Color 5#EAEAE0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2.6:1Fail
2:1Fail
3.3:1AA18
2
1.3:1Fail
1.9:1Fail
1.5:1Fail
2.5:1Fail
3
2.6:1Fail
1.9:1Fail
1.3:1Fail
1.3:1Fail
4
2:1Fail
1.5:1Fail
1.3:1Fail
1.7:1Fail
5
3.3:1AA18
2.5:1Fail
1.3:1Fail
1.7:1Fail

Similar palettes

More like Twilight Lavender Field

View all pastel
Lavender Field Whisper
Dewdrop Petal Blush
Gentle Lavender Haze
Lavender Dream Haze
Lavender Field Dreams
Lavender Field Haze