Back to palettes

Palette

Winter Twilight Hues

Muted, dusky blues reflecting the tranquil and contemplative mood of a winter twilight.

darkcalm5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Winter Twilight 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 Winter Twilight Hues.

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

Data visualization

#3A4F6B#5E7A9C#8CAED1#2E405C#4D6789

Palette guide

How to use Winter Twilight Hues

Overview

The Winter Twilight Hues palette presents a range of muted, dusky blues that perfectly capture the tranquil and contemplative mood of a winter evening. Dominated by the deep #2E405C (Dark Slate Gray) and the rich #3A4F6B (Dark Blue), this scheme provides a solid, professional foundation. Lighter, more ethereal tones like #8CAED1 (Light Blue) and #5E7A9C (Steel Blue) introduce a sense of spaciousness and calm, while #4D6789 (Slate Blue) bridges the darker and lighter elements gracefully. This palette is ideal for designers seeking a cohesive, cool-toned aesthetic that exudes sophistication and serenity.

Best used for

  • Elegant corporate branding
  • Financial services websites
  • Scientific or educational presentations
  • Luxury travel brochures
  • Meditation or mindfulness apps
  • High-tech product interfaces

Suggested color roles

primary

Dark Slate Gray (#2E405C) serves as a grounding primary, excellent for header, footer, or main background areas, providing strong contrast.

secondary

Dark Blue (#3A4F6B) offers a complementary deep tone, suitable for sub-headings, prominent buttons, or content containers.

accent

Light Blue (#8CAED1) provides a serene accent, perfect for interactive elements, highlights, or graphical details that need to pop softly.

background

Steel Blue (#5E7A9C) can be used as a soft, cool background for cards or secondary content sections, offering depth beyond pure white.

text

Use #8CAED1 or white for text on darker backgrounds like #2E405C. For lighter backgrounds like #8CAED1, use #2E405C or black for readability.

Accessibility notes

  • Ensure sufficient contrast when using #8CAED1 for text on #5E7A9C; a darker text color (e.g., #2E405C) is required for readability.
  • The deep #2E405C provides excellent contrast for light text, ensuring WCAG AA compliance.
  • Avoid using #4D6789 for small text on #3A4F6B without careful contrast checking; opt for more distinct contrast.
  • For body text on lighter backgrounds, a dark charcoal like #2E405C is recommended to maintain optimal legibility.

Recommended combinations

Deep Serenity

Creates a profound yet calm visual, ideal for hero banners with light text and subtle interactive elements.

#2E405C · #3A4F6B · #8CAED1

Muted Flow

Excellent for multi-layered content, where different shades of blue provide clear visual hierarchy and depth.

#5E7A9C · #4D6789 · #2E405C

Accent Focus

Suitable for emphasizing key information or calls to action, with the light blue standing out against darker tones.

#3A4F6B · #8CAED1 · #5E7A9C

CSS variables

:root {
  --winter-twilight-hues-1: #3A4F6B;
  --winter-twilight-hues-2: #5E7A9C;
  --winter-twilight-hues-3: #8CAED1;
  --winter-twilight-hues-4: #2E405C;
  --winter-twilight-hues-5: #4D6789;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "winter-twilight-hues": {
        1: "#3A4F6B",
        2: "#5E7A9C",
        3: "#8CAED1",
        4: "#2E405C",
        5: "#4D6789",
      }
    }
  }
}

Related searches

dusky blue color schemewinter evening palettecalm sophisticated bluesmuted blue UI designprofessional cool colors

Palette colors

Hex values

Color 1#3A4F6B
·
Color 2#5E7A9C
·
Color 3#8CAED1
·
Color 4#2E405C
·
Color 5#4D6789
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
3.6:1AA18
1.3:1Fail
1.4:1Fail
2
1.9:1Fail
1.9:1Fail
2.4:1Fail
1.3:1Fail
3
3.6:1AA18
1.9:1Fail
4.5:1AA
2.5:1Fail
4
1.3:1Fail
2.4:1Fail
4.5:1AA
1.8:1Fail
5
1.4:1Fail
1.3:1Fail
2.5:1Fail
1.8:1Fail

Similar palettes

More like Winter Twilight Hues

View all dark
Deep Sea Lullaby
Abyssal Bloom Depths
Deep Forest Solace
Midnight Indigo Reverie
Misty Spruce Grove
Moonless Lake Reflection