Back to palettes

Palette

Starry Night Embrace

Deep, mysterious blues and a single golden accent evoke the vast, tranquil beauty of a starry night sky.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0C0C1E#1C1C3A#2B2B55#5E5E99#FFD700

Palette guide

How to use Starry Night Embrace

Overview

The 'Starry Night Embrace' palette offers a deep, mysterious atmosphere, perfect for evoking the tranquil beauty of a cosmic night sky. Its core is built on profound dark blues like #0C0C1E and #1C1C3A, providing a rich, immersive base. The mid-tone #2B2B55 and lighter #5E5E99 add subtle depth and dimension, mimicking distant nebulae. A striking golden accent, #FFD700, serves as a focal point, representing twinkling stars or celestial highlights. This combination is ideal for designers and developers seeking to create sophisticated, high-contrast interfaces and branding that convey luxury and wonder.

Best used for

  • Luxury brand websites
  • Space-themed applications
  • Dark mode UI/UX designs
  • Elegant event invitations
  • Fantasy game interfaces
  • High-end presentation slides

Suggested color roles

primary

Use #0C0C1E as the foundational dark background, establishing a sense of depth and mystery.

secondary

Apply #1C1C3A for supporting panels, card backgrounds, or secondary navigation elements, maintaining the dark theme.

accent

Reserve #FFD700 for key calls-to-action, important icons, or glowing elements to draw immediate attention.

background

The deepest #0C0C1E is ideal for main backgrounds, providing a vast, immersive canvas.

text

For primary text, use a bright white or very light grey. For secondary text or subheadings, #5E5E99 can work if contrast is sufficient.

Accessibility notes

  • Ensure #FFD700 text or icons have sufficient contrast against all dark blue backgrounds.
  • Text in #5E5E99 may not pass WCAG AA on #0C0C1E or #1C1C3A; verify contrast ratios carefully.
  • Always use a very light text color (e.g., white or #F0F0F0) for legibility on #0C0C1E and #1C1C3A.
  • Limit the use of #FFD700 to essential elements to prevent visual fatigue and maintain its impact.

Recommended combinations

Deep Sky & Gold

A strong dark background with a mid-tone element and a bright, attention-grabbing accent.

#0C0C1E · #2B2B55 · #FFD700

Cosmic Depths

A gradient of dark blues, perfect for creating layered backgrounds or subtle depth in UI elements.

#0C0C1E · #1C1C3A · #5E5E99

Star Dust

A mid-tone base with a lighter blue for supporting details, highlighted by a golden accent for interactive elements.

#2B2B55 · #5E5E99 · #FFD700

CSS variables

:root {
  --starry-night-embrace-1: #0C0C1E;
  --starry-night-embrace-2: #1C1C3A;
  --starry-night-embrace-3: #2B2B55;
  --starry-night-embrace-4: #5E5E99;
  --starry-night-embrace-5: #FFD700;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "starry-night-embrace": {
        1: "#0C0C1E",
        2: "#1C1C3A",
        3: "#2B2B55",
        4: "#5E5E99",
        5: "#FFD700",
      }
    }
  }
}

Related searches

dark blue gold palettecosmic color schemenight sky colorsluxury dark modedeep space aesthetic

Palette colors

Hex values

Color 1#0C0C1E
·
Color 2#1C1C3A
·
Color 3#2B2B55
·
Color 4#5E5E99
·
Color 5#FFD700
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.5:1Fail
3.3:1AA18
13.8:1AAA
2
1.2:1Fail
1.2:1Fail
2.8:1Fail
11.7:1AAA
3
1.5:1Fail
1.2:1Fail
2.2:1Fail
9.5:1AAA
4
3.3:1AA18
2.8:1Fail
2.2:1Fail
4.2:1AA18
5
13.8:1AAA
11.7:1AAA
9.5:1AAA
4.2:1AA18

Similar palettes

More like Starry Night Embrace

View all dark
Midnight Star Veil
Midnight Star Veil
Midnight Stellar Glow
Velvet Night Sky
Cosmic Deep Slumber
Cosmic Veil Wonder