Palette

Starry Night Veil

A deep and serene palette, reminiscent of a vast, star-dusted night sky draping the quiet world.

darkcalm5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000080#191970#2F4F4F#4682B4#ADD8E6

Palette guide

How to use Starry Night Veil

Overview

The 'Starry Night Veil' palette is a deep and serene collection, reminiscent of a vast, star-dusted night sky draping the quiet world. It flows from the profound #000080 and #191970, through the unique blue-grey #2F4F4F and inviting #4682B4, culminating in the airy #ADD8E6. This palette offers designers and developers an ideal foundation for creating calm, trustworthy, and expansive digital environments. It's particularly effective for projects that aim to convey a sense of peace, depth, and clarity, making it versatile for various applications from wellness to corporate design.

Best used for

Wellness and meditation apps
Educational content platforms
Financial services websites
Medical and healthcare interfaces
Serene brand identities
Winter or calm-themed digital art

Suggested color roles

primary

Utilize #000080 as the foundational deep blue for major backgrounds or primary elements.

secondary

Apply #191970 for supporting content areas, headers, or subtle visual distinctions.

accent

Reserve #4682B4 for interactive elements, highlights, or calls-to-action to draw gentle attention.

background

The deepest #000080 is perfect for a dark, immersive background; #ADD8E6 offers a light, airy alternative.

text

For dark backgrounds, use white or a very light grey. For light backgrounds, a dark blue like #000080 or black ensures readability.

Accessibility notes

Ensure sufficient contrast for text on #4682B4 and #ADD8E6, especially if using mid-tone text colors.
#ADD8E6 provides excellent contrast against the darkest blues, making it suitable for primary text on dark backgrounds.
Avoid using #2F4F4F as text on #191970 without verifying WCAG contrast ratios to ensure readability.
Use a very light text color (e.g., white or #F0F0F0) for optimal legibility on #000080 and #191970 backgrounds.

Recommended combinations

Deep Calm

A strong dark base with a supporting dark tone and a soft, light blue accent for serene balance.

#000080 · #191970 · #ADD8E6

Veil Gradient

A smooth transition from dark to medium blue-grey, ideal for dynamic backgrounds or layered elements.

#191970 · #2F4F4F · #4682B4

Sky & Sea

A mid-tone base with lighter, airy blues, perfect for creating a sense of openness and tranquility.

#2F4F4F · #4682B4 · #ADD8E6

CSS variables

:root {
  --starry-night-veil-1: #000080;
  --starry-night-veil-2: #191970;
  --starry-night-veil-3: #2F4F4F;
  --starry-night-veil-4: #4682B4;
  --starry-night-veil-5: #ADD8E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "starry-night-veil": {
        1: "#000080",
        2: "#191970",
        3: "#2F4F4F",
        4: "#4682B4",
        5: "#ADD8E6",
      }
    }
  }
}

Hex values

Color 1#000080

Color 2#191970

Color 3#2F4F4F

Color 4#4682B4

Color 5#ADD8E6

Accessibility

Contrast checker

1.1:1Fail

1.8:1Fail

3.9:1AA18

10.5:1AAA

1.1:1Fail

1.7:1Fail

3.6:1AA18

9.7:1AAA

1.8:1Fail

1.7:1Fail

2.2:1Fail

5.8:1AA

3.9:1AA18

3.6:1AA18

2.2:1Fail

2.7:1Fail

10.5:1AAA

9.7:1AAA

5.8:1AA

2.7:1Fail

Similar palettes

More like Starry Night Veil

View all dark

Midnight Indigo Reverie

Moonless Lake Reflection