Palette

Indigo Dusk Dream

Capturing the tranquil progression of the sky from deep indigo to the pale light of approaching night.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Indigo Dusk Dream 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 Indigo Dusk Dream.

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

Data visualization

#1A2E44#3B5F8A#6C91C2#A8C0E7#DEE9F5

Palette guide

How to use Indigo Dusk Dream

Overview

The Indigo Dusk Dream palette captures the tranquil progression of the sky from deep indigo to the pale light of approaching night. With a soothing range from the profound #1A2E44 to the ethereal #DEE9F5, including #3B5F8A, #6C91C2, and #A8C0E7, this cool scheme provides designers and developers a serene and elegant foundation. It's ideal for conveying calmness, introspection, and a sophisticated, dreamy atmosphere. Utilize these gentle indigo hues to create designs that feel peaceful, balanced, and visually harmonious, perfect for wellness applications or contemplative digital experiences.

Best used for

Wellness and meditation apps
Serene website backgrounds and landing pages
Evening event branding and invitations
Cozy interior design concepts
Digital art and photography portfolios
Luxury sleep products and services

Suggested color roles

primary

Use #1A2E44 as the deepest, tranquil indigo for main headings, navigation, or immersive backgrounds, establishing a calm presence.

secondary

Employ #3B5F8A for supportive content blocks, subheadings, or larger sections, offering a calming mid-tone blue.

accent

Apply #A8C0E7 as a soft, dreamy highlight for subtle accents, interactive elements, or to evoke the pale light of dusk.

background

Utilize #DEE9F5 as the lightest, airy background base, creating a clean and ethereal canvas.

text

For dark text, #1A2E44 provides excellent readability on lighter backgrounds. A charcoal gray can also be used for general body text.

Accessibility notes

Text in #1A2E44 on #DEE9F5 offers excellent contrast and readability for all users.
Ensure sufficient contrast for interactive elements, especially when using lighter blues like #A8C0E7 on #DEE9F5.
Avoid using #A8C0E7 on #DEE9F5 for small or essential text due to low contrast; reserve it for larger decorative elements.
White text works well on #1A2E44 and #3B5F8A, providing a clean and modern aesthetic against deeper tones.

Recommended combinations

Dusk Transition

Creates a smooth gradient or layered effect, mimicking the sky's transition from deep indigo to lighter evening hues.

#1A2E44 · #3B5F8A · #6C91C2

Dreamy Focus

Perfect for soft highlights, gentle content blocks, or creating an ethereal and inviting user interface.

#A8C0E7 · #DEE9F5 · #3B5F8A

Calm Evening

Ideal for balanced layouts, readable content, and a serene visual experience, combining deep and light tones.

#6C91C2 · #1A2E44 · #DEE9F5

CSS variables

:root {
  --indigo-dusk-dream-1: #1A2E44;
  --indigo-dusk-dream-2: #3B5F8A;
  --indigo-dusk-dream-3: #6C91C2;
  --indigo-dusk-dream-4: #A8C0E7;
  --indigo-dusk-dream-5: #DEE9F5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "indigo-dusk-dream": {
        1: "#1A2E44",
        2: "#3B5F8A",
        3: "#6C91C2",
        4: "#A8C0E7",
        5: "#DEE9F5",
      }
    }
  }
}

Hex values

Color 1#1A2E44

Color 2#3B5F8A

Color 3#6C91C2

Color 4#A8C0E7

Color 5#DEE9F5

Accessibility

Contrast checker

2.1:1Fail

4.3:1AA18

7.5:1AAA

11.3:1AAA

2.1:1Fail

2:1Fail

3.6:1AA18

5.4:1AA

4.3:1AA18

2:1Fail

1.8:1Fail

2.6:1Fail

7.5:1AAA

3.6:1AA18

1.8:1Fail

1.5:1Fail

11.3:1AAA

5.4:1AA

2.6:1Fail

1.5:1Fail

Similar palettes

More like Indigo Dusk Dream