Palette

Dusky Bloom Hues

Soft, muted grays with a hint of purple, like a quiet bloom unfolding at dusk.

neutralcalm5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Dusky Bloom Hues 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 Dusky Bloom Hues.

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

Data visualization

#3C3D4A#6C6D7A#9C9DAA#CACBDB#E9E9F0

Palette guide

How to use Dusky Bloom Hues

Overview

The "Dusky Bloom Hues" palette offers soft, muted grays with a hint of purple, reminiscent of a quiet bloom unfolding at dusk. This neutral-cool collection features a deep charcoal-purple #3C3D4A, a medium gray-purple #6C6D7A, a lighter silver-purple #9C9DAA, a very light gray-lavender #CACBDB, and an almost-white #E9E9F0. It's ideal for designs seeking a sophisticated, calm, and understated elegance. Designers can utilize this palette for corporate branding, minimalist interfaces, or refined editorial layouts. Developers will find these hex codes excellent for creating harmonious user experiences that convey professionalism, tranquility, and a subtle touch of color.

Best used for

Corporate or professional website designs
Minimalist UI/UX for productivity apps
Elegant stationery or editorial branding
Luxury home goods or textile design
Art gallery or museum digital presence
Sophisticated fashion or beauty brand identities

Suggested color roles

primary

#6C6D7A - A medium gray-purple, excellent for main content areas, headers, or to establish a sophisticated, calm base.

secondary

#3C3D4A - A deep charcoal-purple, perfect for strong headings, important information, or to add grounded depth.

accent

#9C9DAA - A lighter silver-purple, ideal for subtle highlights, interactive states, or to provide delicate visual interest.

background

#E9E9F0 - The lightest, almost pure white-gray, offering a clean, airy, and expansive canvas.

text

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

Accessibility notes

For text on #E9E9F0 and #CACBDB, use #3C3D4A or #6C6D7A for sufficient contrast.
When using #3C3D4A or #6C6D7A as backgrounds, use #E9E9F0 or pure white for text readability.
Avoid using #9C9DAA as text on #CACBDB due to potential low contrast, especially for smaller fonts.
Always test contrast ratios for interactive elements to meet WCAG guidelines, particularly with monochromatic palettes.

Recommended combinations

Dusky Gradient

Creates a soft, atmospheric background gradient or layered elements, evoking a quiet twilight.

#E9E9F0 · #CACBDB · #9C9DAA

Elegant Depth

Use for primary branding, strong text, and a light background to highlight the sophisticated grays.

#3C3D4A · #6C6D7A · #E9E9F0

Subtle Bloom

Ideal for content blocks, card backgrounds, or subtle visual hierarchy with a gentle, refined feel.

#CACBDB · #9C9DAA · #6C6D7A

CSS variables

:root {
  --dusky-bloom-hues-1: #3C3D4A;
  --dusky-bloom-hues-2: #6C6D7A;
  --dusky-bloom-hues-3: #9C9DAA;
  --dusky-bloom-hues-4: #CACBDB;
  --dusky-bloom-hues-5: #E9E9F0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dusky-bloom-hues": {
        1: "#3C3D4A",
        2: "#6C6D7A",
        3: "#9C9DAA",
        4: "#CACBDB",
        5: "#E9E9F0",
      }
    }
  }
}

Hex values

Color 1#3C3D4A

Color 2#6C6D7A

Color 3#9C9DAA

Color 4#CACBDB

Color 5#E9E9F0

Accessibility

Contrast checker

2.1:1Fail

4:1AA18

6.7:1AA

8.9:1AAA

2.1:1Fail

1.9:1Fail

3.2:1AA18

4.2:1AA18

4:1AA18

1.9:1Fail

1.7:1Fail

2.2:1Fail

6.7:1AA

3.2:1AA18

1.7:1Fail

1.3:1Fail

8.9:1AAA

4.2:1AA18

2.2:1Fail

1.3:1Fail

Similar palettes

More like Dusky Bloom Hues

View all neutral

Dusky Cloud Blanket

Cloudy Day Serene

Coastal Driftwood Grey

Morning Fog

Pebble Shore Calm

Quiet Morning Fog