Palette

Starry Night Dream

Deep midnight blues and soft teals capture the serene, shimmering beauty of a starlit night sky.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Starry Night 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 Starry Night Dream.

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

Data visualization

#121C34#2C3E5B#5A7B8E#97B8B1#D9EBE6

Palette guide

How to use Starry Night Dream

Overview

The "Starry Night Dream" palette (version 1) captures the serene, shimmering beauty of a starlit night sky with a harmonious blend of deep midnight blues and soft teals. Beginning with the profound #121C34, a dark navy, it smoothly transitions through rich blues like #2C3E5B and the unique blue-green #5A7B8E. The palette brightens considerably with the airy, minty #97B8B1 and culminates in the ethereal #D9EBE6, a near-white, cool gray. This collection is perfect for designers aiming to evoke calmness, clarity, and a dreamy natural elegance. Developers can utilize these hex codes for refreshing app interfaces, soothing websites, or branding that emphasizes tranquility, openness, and a touch of celestial wonder, offering excellent versatility for light and dark elements.

Best used for

Wellness and mindfulness apps
Eco-friendly or nature-inspired branding
Serene home decor websites
Clean and modern web interfaces
Digital art depicting tranquil landscapes
Travel blogs focusing on natural beauty

Suggested color roles

primary

#121C34 - The deepest midnight blue. Ideal for main backgrounds, headers, or large sections, establishing a sense of profound depth and calm.

secondary

#2C3E5B - A rich, deep blue. Excellent for secondary panels, content cards, or navigation bars, providing structure and depth.

accent

#97B8B1 - A soft, muted teal-green. Use for interactive elements, call-to-action buttons, or key highlights to draw attention and add a fresh, natural pop.

background

#5A7B8E - A versatile mid-tone blue-green, suitable for general backgrounds where a softer, yet still cool and calming, base is desired.

text

#D9EBE6 - A very light, cool gray. Perfect for primary body text on darker backgrounds (#121C34, #2C3E5B) for optimal readability and a serene feel.

Accessibility notes

#D9EBE6 provides excellent contrast against #121C34 and #2C3E5B for body text.
#97B8B1 offers good contrast for interactive elements on darker blues.
Be cautious when using #5A7B8E or #97B8B1 for small text on #D9EBE6; contrast will be insufficient.
Ensure sufficient contrast for button states, especially when using adjacent shades within the mid-range.

Recommended combinations

Night to Dawn

Creates a smooth, atmospheric transition from deep night to soft morning light, ideal for gradients.

#121C34 · #5A7B8E · #D9EBE6

Dreamy Accents

Uses the lighter, airy tones for clear text and interactive elements against a deep blue base.

#2C3E5B · #97B8B1 · #D9EBE6

Serene Depths

Establishes a profound, calming base with subtle shifts in deep blue and teal, suitable for background layers.

#121C34 · #2C3E5B · #5A7B8E

CSS variables

:root {
  --starry-night-dream-1: #121C34;
  --starry-night-dream-2: #2C3E5B;
  --starry-night-dream-3: #5A7B8E;
  --starry-night-dream-4: #97B8B1;
  --starry-night-dream-5: #D9EBE6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "starry-night-dream": {
        1: "#121C34",
        2: "#2C3E5B",
        3: "#5A7B8E",
        4: "#97B8B1",
        5: "#D9EBE6",
      }
    }
  }
}

Hex values

Color 1#121C34

Color 2#2C3E5B

Color 3#5A7B8E

Color 4#97B8B1

Color 5#D9EBE6

Accessibility

Contrast checker

1.6:1Fail

3.8:1AA18

7.9:1AAA

13.7:1AAA

1.6:1Fail

2.4:1Fail

5:1AA

8.7:1AAA

3.8:1AA18

2.4:1Fail

2.1:1Fail

3.6:1AA18

7.9:1AAA

5:1AA

2.1:1Fail

1.7:1Fail

13.7:1AAA

8.7:1AAA

3.6:1AA18

1.7:1Fail

Similar palettes

More like Starry Night Dream

View all cool

Celestial Oasis Dream