Palette

Celestial Veil Haze

An otherworldly blend of deep purples and blues, conjuring images of distant cosmic clouds and stardust.

coolelegant5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Celestial Veil Haze 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 Celestial Veil Haze.

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

Data visualization

#1C1C3D#3E3E6E#6C6CA3#A5A5D0#E0E0F0

Palette guide

How to use Celestial Veil Haze

Overview

The "Celestial Veil Haze" palette is an otherworldly blend of deep purples and blues, conjuring images of distant cosmic clouds and stardust. Starting with the profound #1C1C3D, it transitions through the rich #3E3E6E and #6C6CA3, then brightens with the luminous #A5A5D0, culminating in the ethereal #E0E0F0. This cool and elegant palette is perfect for designs that aim to convey depth, sophistication, and a touch of otherworldly calm. Developers can utilize these harmonious shades for serene interfaces, while designers can craft unique branding or digital art that feels both vast and intimately detailed, evoking a quiet cosmic wonder.

Best used for

Luxury tech product design
Ethereal website backgrounds
Astrology and spiritual content
Dreamy digital art illustrations
Sophisticated app backgrounds
Corporate branding with a mystical twist

Suggested color roles

primary

#1C1C3D - The core deep background, providing an immersive and sophisticated foundation.

secondary

#3E3E6E - Use for secondary panels, card backgrounds, or to define sections in a dark interface.

accent

#E0E0F0 - The lightest shade, perfect for glowing highlights, icons, or to draw attention to key interactive elements.

background

#1C1C3D - The main background, creating a vast, dark, and mysterious cosmic aesthetic.

text

#E0E0F0 - Excellent for primary text on dark backgrounds like #1C1C3D or #3E3E6E, ensuring high readability and a clean look.

Accessibility notes

Text in #E0E0F0 on #1C1C3D provides high contrast, ensuring good readability for all text.
Ensure #A5A5D0 text on #3E3E6E has sufficient contrast for WCAG AA compliance, especially for smaller fonts.
Avoid using #6C6CA3 for small or critical text on #3E3E6E as contrast might be borderline.
Use #E0E0F0 for interactive elements to ensure they are easily discoverable against darker shades.

Recommended combinations

Cosmic Clouds

Creates a classic dark mode look with bright, readable text and clear hierarchy.

#1C1C3D · #3E3E6E · #E0E0F0

Nebula Gradient

Excellent for smooth, cosmic gradients in backgrounds, headers, or digital art.

#3E3E6E · #6C6CA3 · #A5A5D0

Ethereal Glimmer

Use the lighter shades for detailed illustrations or subtle UI highlights against the deep background.

#1C1C3D · #A5A5D0 · #E0E0F0

CSS variables

:root {
  --celestial-veil-haze-1: #1C1C3D;
  --celestial-veil-haze-2: #3E3E6E;
  --celestial-veil-haze-3: #6C6CA3;
  --celestial-veil-haze-4: #A5A5D0;
  --celestial-veil-haze-5: #E0E0F0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-veil-haze": {
        1: "#1C1C3D",
        2: "#3E3E6E",
        3: "#6C6CA3",
        4: "#A5A5D0",
        5: "#E0E0F0",
      }
    }
  }
}

Hex values

Color 1#1C1C3D

Color 2#3E3E6E

Color 3#6C6CA3

Color 4#A5A5D0

Color 5#E0E0F0

Accessibility

Contrast checker

1.7:1Fail

3.4:1AA18

6.9:1AA

12.5:1AAA

1.7:1Fail

2:1Fail

4.2:1AA18

7.6:1AAA

3.4:1AA18

2:1Fail

2.1:1Fail

3.7:1AA18

6.9:1AA

4.2:1AA18

2.1:1Fail

1.8:1Fail

12.5:1AAA

7.6:1AAA

3.7:1AA18

1.8:1Fail

Similar palettes

More like Celestial Veil Haze

View all cool

Celestial Nebula Rift

Celestial Echo Nebula

Stellar Nebula Dust

Astral Glow Nebula

Celestial Dust Stream

Celestial Nebula Glow