Palette

Midnight Star Veil

Captures the deep blues of the night sky, illuminated by distant starlight.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Midnight Star 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 Midnight Star Veil.

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

Data visualization

#0A1C2A#283747#5D6D7E#AAB7B8#F7DC6F

Palette guide

How to use Midnight Star Veil

Overview

The Midnight Star Veil palette is a stunning blend of deep blues and cool grays, punctuated by a vibrant golden accent, evoking the classic elegance of a starlit night. Anchored by #0A1C2A, it transitions through #283747 and #5D6D7E, with the luminous #AAB7B8, and a striking #F7DC6F. This collection is perfect for designers and developers aiming for a luxurious, celestial, or high-end aesthetic. The interplay of deep, calm blues with the bright gold creates a memorable visual experience, ideal for branding, web design, and digital art that seeks to convey sophistication and wonder.

Best used for

Luxury brand websites and apps
High-end event invitations
Celestial-themed digital art
Upscale product packaging
Astronomy education platforms
Elegant personal portfolios

Suggested color roles

primary

Utilize #0A1C2A as the foundational deep blue, providing a rich, immersive backdrop for your design.

secondary

Employ #283747 for main content areas or secondary UI elements, offering a harmonious contrast to the primary dark.

accent

Reserve #F7DC6F for key calls-to-action, icons, or decorative elements to create a striking, luminous focal point.

background

The deep #0A1C2A is excellent for full-screen backgrounds, while #283747 can define content sections.

text

For primary text on dark backgrounds, #AAB7B8 ensures good readability. For highlights, #F7DC6F provides excellent visibility.

Accessibility notes

The #F7DC6F accent provides excellent contrast on #0A1C2A or #283747 for both text and UI elements.
Ensure #AAB7B8 text on #0A1C2A or #283747 meets WCAG AA standards for body text readability.
Avoid using #5D6D7E directly on #283747 for small text due to potentially insufficient contrast.
When using a light background, #0A1C2A or #283747 serve as excellent dark text colors.

Recommended combinations

Starry Night

Ideal for hero sections or prominent feature blocks, combining deep blue with a bright star and soft text.

#0A1C2A · #F7DC6F · #AAB7B8

Deep Twilight

Perfect for layering UI components like cards or navigation menus, offering subtle depth and clear text.

#283747 · #5D6D7E · #AAB7B8

Golden Accent

Use for call-to-action buttons or important highlights where the golden color needs to stand out vividly.

#0A1C2A · #F7DC6F · #283747

CSS variables

:root {
  --midnight-star-veil-1: #0A1C2A;
  --midnight-star-veil-2: #283747;
  --midnight-star-veil-3: #5D6D7E;
  --midnight-star-veil-4: #AAB7B8;
  --midnight-star-veil-5: #F7DC6F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-star-veil": {
        1: "#0A1C2A",
        2: "#283747",
        3: "#5D6D7E",
        4: "#AAB7B8",
        5: "#F7DC6F",
      }
    }
  }
}

Hex values

Color 1#0A1C2A

Color 2#283747

Color 3#5D6D7E

Color 4#AAB7B8

Color 5#F7DC6F

Accessibility

Contrast checker

1.4:1Fail

3.3:1AA18

8.4:1AAA

12.7:1AAA

1.4:1Fail

2.3:1Fail

5.9:1AA

8.9:1AAA

3.3:1AA18

2.3:1Fail

2.6:1Fail

3.9:1AA18