Palette

Astral Glow Veil

Reflecting the quiet magic of a starlit evening, where lavender hues meet deep celestial blues.

coolelegant5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Astral Glow 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 Astral Glow Veil.

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

Data visualization

#3D3B51#746C8F#B6B4CC#F1EEF8#D8C7D8

Palette guide

How to use Astral Glow Veil

Overview

The Astral Glow Veil palette reflects the quiet magic of a starlit evening, where lavender hues meet deep celestial blues. This serene and elegant collection features the deep twilight of #3D3B51, the soft blue-purple of #746C8F, and the airy #B6B4CC, culminating in the near-white #F1EEF8 and gentle #D8C7D8. Ideal for designers and developers seeking a subtle, sophisticated, and calming aesthetic, this palette is perfect for creating peaceful web designs, luxury lifestyle branding, or elegant print materials where a sense of tranquility and understated beauty is desired.

Best used for

Serene web and app designs
Luxury lifestyle brands
Wedding invitations and stationery
Peaceful meditation apps
Elegant product packaging
Subtle interior design accents

Suggested color roles

primary

#3D3B51 serves as a deep, anchoring primary color, excellent for main headings and foundational elements.

secondary

#746C8F provides a soft, supportive blue-purple, suitable for subheadings or secondary content blocks.

accent

#D8C7D8 offers a gentle, warm highlight, perfect for delicate accents, subtle borders, or interactive elements.

background

#F1EEF8 creates an airy, clean, and light background, ensuring excellent readability for darker text.

text

#3D3B51 ensures optimal legibility for primary text on lighter backgrounds, or use a deep charcoal for general body copy.

Accessibility notes

Ensure sufficient contrast for text, especially #3D3B51 on #F1EEF8, to meet WCAG AA standards.
Avoid using #D8C7D8 or #B6B4CC for small text on #F1EEF8 backgrounds due to low contrast.
Test legibility of lighter shades for secondary text, ensuring they remain readable.
Provide clear visual cues for interactive elements, possibly using a slightly darker shade for hover states.

Recommended combinations

Twilight Serenity

A balanced and tranquil combination, ideal for creating a calm and sophisticated page layout.

#F1EEF8 · #B6B4CC · #3D3B51

Gentle Glow

Highlights soft, ethereal tones, suitable for artistic elements or distinctive branding.

#746C8F · #D8C7D8 · #3D3B51

Subtle Veil

Creates a harmonious light gradient, perfect for backgrounds or serene sections.

#B6B4CC · #F1EEF8 · #746C8F

CSS variables

:root {
  --astral-glow-veil-1: #3D3B51;
  --astral-glow-veil-2: #746C8F;
  --astral-glow-veil-3: #B6B4CC;
  --astral-glow-veil-4: #F1EEF8;
  --astral-glow-veil-5: #D8C7D8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "astral-glow-veil": {
        1: "#3D3B51",
        2: "#746C8F",
        3: "#B6B4CC",
        4: "#F1EEF8",
        5: "#D8C7D8",
      }
    }
  }
}

Hex values

Color 1#3D3B51

Color 2#746C8F

Color 3#B6B4CC

Color 4#F1EEF8

Color 5#D8C7D8

Accessibility

Contrast checker

2.2:1Fail

5.3:1AA

9.4:1AAA

6.7:1AA

2.2:1Fail

2.4:1Fail

4.3:1AA18

3.1:1AA18

5.3:1AA

2.4:1Fail

1.8:1Fail

1.3:1Fail

9.4:1AAA

4.3:1AA18

1.8:1Fail

1.4:1Fail

6.7:1AA

3.1:1AA18

1.3:1Fail

1.4:1Fail

Similar palettes

More like Astral Glow Veil

View all cool

Amethyst Field Dusk

Celestial Dawn Hues

Celestial Ocean Horizon

Crystal Geode Depths

Oceanic Twilight Bloom

Amethyst Cavern Glow