Palette

Twilight Blossom Hush

A serene blend of deep purples and muted mauves, reflecting the quiet beauty of blossoms at twilight.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Twilight Blossom Hush 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 Blossom Hush.

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

Data visualization

#3C2A2F#5F4B3F#7B68EE#B4A996#E3DCCD

Palette guide

How to use Twilight Blossom Hush

Overview

The Twilight Blossom Hush palette offers a serene blend of deep, muted tones reflecting the quiet beauty of blossoms at twilight. Featuring the grounding #3C2A2F (Deep Charcoal-Plum) and the unexpected vibrant #7B68EE (Medium Slate Blue), this palette creates a sophisticated yet calm atmosphere. Supported by earthy #5F4B3F (Muted Taupe) and #B4A996 (Soft Mauve), alongside the airy #E3DCCD (Pale Cream-Beige), it's genuinely useful for designers and developers crafting projects that evoke tranquility, natural elegance, or a touch of quiet luxury. This scheme is versatile for web interfaces, branding, or digital art that values a soft, refined aesthetic.

Best used for

Serene home decor branding
Wellness and relaxation application interfaces
Nature-inspired websites or blogs
Artisan craft packaging and branding
Quiet luxury design projects
Photography with a soft-focus aesthetic

Suggested color roles

primary

Utilize #3C2A2F (Deep Charcoal-Plum) as a sophisticated, grounding primary color for main navigation or headers.

secondary

Apply #5F4B3F (Muted Taupe) for warm, natural support in content areas, secondary buttons, or subtle textures.

accent

Introduce #7B68EE (Medium Slate Blue) as a vibrant, unexpected pop for calls to action, icons, or focal points.

background

Employ #E3DCCD (Pale Cream-Beige) for soft, expansive backgrounds that enhance readability and calm.

text

For dark text, use #3C2A2F on light backgrounds. For dark backgrounds, white or #E3DCCD ensures excellent contrast.

Accessibility notes

The light #B4A996 on #E3DCCD will have very low contrast, making it unsuitable for text.
Ensure #7B68EE text on #E3DCCD meets contrast standards for readability.
Dark text (e.g., #3C2A2F) should be used on light backgrounds (e.g., #E3DCCD) for legibility.
Consider using #E3DCCD for text on #3C2A2F and #5F4B3F to ensure sufficient contrast.

Recommended combinations

Earthy Serenity

Creates a grounded, natural feel with deep and warm mid-tones against a soft, light background.

#3C2A2F · #5F4B3F · #E3DCCD

Blossom Pop

Combines a strong base with a vibrant, unexpected accent and a serene light background for impact.

#3C2A2F · #7B68EE · #E3DCCD

Muted Harmony

Offers a gentle, warm transition, ideal for subtle layering or soft, atmospheric elements.

#5F4B3F · #B4A996 · #E3DCCD

CSS variables

:root {
  --twilight-blossom-hush-1: #3C2A2F;
  --twilight-blossom-hush-2: #5F4B3F;
  --twilight-blossom-hush-3: #7B68EE;
  --twilight-blossom-hush-4: #B4A996;
  --twilight-blossom-hush-5: #E3DCCD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "twilight-blossom-hush": {
        1: "#3C2A2F",
        2: "#5F4B3F",
        3: "#7B68EE",
        4: "#B4A996",
        5: "#E3DCCD",
      }
    }
  }
}

Hex values

Color 1#3C2A2F

Color 2#5F4B3F

Color 3#7B68EE

Color 4#B4A996

Color 5#E3DCCD

Accessibility

Contrast checker

1.6:1Fail

3.2:1AA18

5.8:1AA

9.8:1AAA

1.6:1Fail

2:1Fail

3.5:1AA18

6:1AA

3.2:1AA18

2:1Fail

1.8:1Fail

3:1AA18

5.8:1AA

3.5:1AA18

1.8:1Fail

1.7:1Fail

9.8:1AAA

6:1AA

3:1AA18

1.7:1Fail

Similar palettes

More like Twilight Blossom Hush

View all cool

Lavender Field Serene

Lavender Haze Whisper

Celestial Dreamscape

Desert Sky Starlight

Dreamy Lavender Field

Frosted Berry Basket