Palette

Cosmic Night Veil

A deep and mysterious palette, like gazing into the tranquil expanse of a star-dusted night sky.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2C2F40#4B4E6D#7C7FAD#C2C5D6#3A3D51

Palette guide

How to use Cosmic Night Veil

Overview

The Cosmic Night Veil palette offers a deep and mysterious aesthetic, like gazing into the tranquil expanse of a star-dusted night sky. It ranges from the profound #2C2F40 (dark charcoal) and #3A3D51 (deep slate grey) through the rich #4B4E6D (medium grey-blue) and the softer #7C7FAD (lavender grey). The palette culminates in the serene #C2C5D6 (light blue-grey), offering a delicate, misty veil effect. This dark and mystical collection is perfect for designers and developers crafting serene, sophisticated, or elegant digital experiences. It excels in creating atmospheric backgrounds, subtle branding, and UI elements that convey depth, tranquility, and a timeless celestial feel.

Best used for

Elegant dark mode app interfaces and websites
Mystical brand identity and luxurious packaging
Abstract digital art and serene space illustrations
High-end fashion or beauty campaigns with ethereal vibes
Contemplative game environments and cinematic visuals
Sophisticated event invitations and signage

Suggested color roles

primary

Utilize #2C2F40 or #3A3D51 as a deep, anchoring background color, establishing a calm, professional canvas for celestial elements.

secondary

Employ #4B4E6D for significant content areas, subheadings, or distinct sections, offering a rich, supporting blue-grey hue.

accent

Apply #7C7FAD for subtle highlights, interactive states, or as a secondary text color on very dark backgrounds, adding a touch of sophisticated lavender-grey.

background

The darker shades like #2C2F40 and #3A3D51 are ideal for expansive, tranquil backdrops, while #C2C5D6 can be used for subtle, glowing elements or light mode accents.

text

For optimal readability on dark backgrounds like #2C2F40 or #3A3D51, use #C2C5D6 or a crisp white. A deep charcoal or black provides excellent contrast on #7C7FAD or #C2C5D6.

Accessibility notes

Ensure sufficient contrast between #C2C5D6 and the darker background colors, especially for body text.
White text on #2C2F40, #3A3D51, and #4B4E6D generally provides good readability.
Avoid using #7C7FAD as a text color on #4B4E6D due to potential low contrast; reserve it for larger UI elements.
Test color combinations for legibility across various screen types and lighting conditions to maintain the desired mood.

Recommended combinations

Deep Veil

Creates a deep, harmonious grey-blue gradient, perfect for professional backgrounds or subtly layered UI designs.

#2C2F40 · #3A3D51 · #4B4E6D

Celestial Mist

Ideal for subtle gradients, ethereal overlays, or conveying a soft, luminous glow in illustrations and decorative elements.

#4B4E6D · #7C7FAD · #C2C5D6

Night Contrast

Excellent for establishing clear hierarchy, with a light highlight against a dark canvas, enhanced by a serene grey-blue accent.

#2C2F40 · #C2C5D6 · #7C7FAD

CSS variables

:root {
  --cosmic-night-veil-2-1: #2C2F40;
  --cosmic-night-veil-2-2: #4B4E6D;
  --cosmic-night-veil-2-3: #7C7FAD;
  --cosmic-night-veil-2-4: #C2C5D6;
  --cosmic-night-veil-2-5: #3A3D51;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cosmic-night-veil-2": {
        1: "#2C2F40",
        2: "#4B4E6D",
        3: "#7C7FAD",
        4: "#C2C5D6",
        5: "#3A3D51",
      }
    }
  }
}

Hex values

Color 1#2C2F40

Color 2#4B4E6D

Color 3#7C7FAD

Color 4#C2C5D6

Color 5#3A3D51

Accessibility

Contrast checker

1.6:1Fail

3.5:1AA18

7.7:1AAA

1.2:1Fail

1.6:1Fail

2.1:1Fail

4.7:1AA

1.3:1Fail

3.5:1AA18

2.1:1Fail

2.2:1Fail

2.8:1Fail

7.7:1AAA

4.7:1AA

2.2:1Fail

6.2:1AA

1.2:1Fail

1.3:1Fail

2.8:1Fail

6.2:1AA

Similar palettes

More like Cosmic Night Veil

Celestial Shimmer Glow

Cosmic Abyss Gaze

Cosmic Dreamscape Dust