Palette

Starry Night Horizon

A deep, inky palette mirroring the vastness of the night sky, with subtle blue hints of the distant horizon.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0B0A21#1F1E3A#393755#62607E#9DA1B6

Palette guide

How to use Starry Night Horizon

Overview

The 'Starry Night Horizon' palette is a deep, inky collection mirroring the vastness of the night sky, with subtle blue hints of the distant horizon. From the profound #0B0A21 to the soft grey-blue #9DA1B6, this palette offers a sense of quiet grandeur and sophisticated mystery. The intermediate shades #1F1E3A, #393755, and #62607E provide smooth transitions, enabling designers and developers to create immersive and elegant digital experiences. It's perfectly suited for projects requiring a blend of technological sophistication and cosmic tranquility.

Best used for

Space exploration themed websites
Luxury product branding
Dark mode application designs
Abstract digital art platforms
High-tech product displays
Cinematic title sequences

Suggested color roles

primary

Utilize #0B0A21 as the deepest, foundational dark for backgrounds or primary content areas.

secondary

Apply #1F1E3A for supporting panels, card elements, or subtle distinctions within the dark theme.

accent

Reserve #62607E for subtle highlights, interactive elements, or secondary calls-to-action.

background

The primary background should be #0B0A21 to establish the deep, cosmic canvas.

text

For optimal readability on dark backgrounds, use #9DA1B6 or a bright white. For lighter elements, use #0B0A21.

Accessibility notes

Text on #62607E might require a dark color like black or #0B0A21 for sufficient contrast.
#9DA1B6 offers good contrast against the deepest purples and blues, making it suitable for primary text.
Avoid using #393755 for small text on #1F1E3A due to potential low contrast; verify WCAG standards.
Use a very light text color (e.g., white or #E0E0E0) for legibility on #0B0A21 and #1F1E3A backgrounds.

Recommended combinations

Cosmic Depths

A dark gradient ideal for creating layered backgrounds or subtle dimensional effects in UI.

#0B0A21 · #1F1E3A · #393755

Starlight Glow

Mid-tones transitioning to a soft light accent, perfect for highlighting content or creating visual flow.

#393755 · #62607E · #9DA1B6

Deep Horizon

A deep background, a mid-range element for balance, and a light text color for clear communication.

#0B0A21 · #62607E · #9DA1B6

CSS variables

:root {
  --starry-night-horizon-1: #0B0A21;
  --starry-night-horizon-2: #1F1E3A;
  --starry-night-horizon-3: #393755;
  --starry-night-horizon-4: #62607E;
  --starry-night-horizon-5: #9DA1B6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "starry-night-horizon": {
        1: "#0B0A21",
        2: "#1F1E3A",
        3: "#393755",
        4: "#62607E",
        5: "#9DA1B6",
      }
    }
  }
}

Hex values

Color 1#0B0A21

Color 2#1F1E3A

Color 3#393755

Color 4#62607E

Color 5#9DA1B6

Accessibility

Contrast checker

1.2:1Fail

1.7:1Fail

3.2:1AA18

7.6:1AAA

1.2:1Fail

1.4:1Fail

2.7:1Fail

6.3:1AA

1.7:1Fail

1.4:1Fail

1.9:1Fail

4.4:1AA18

3.2:1AA18

2.7:1Fail

1.9:1Fail

2.3:1Fail

7.6:1AAA

6.3:1AA

4.4:1AA18

2.3:1Fail

Similar palettes

More like Starry Night Horizon

Celestial Glimmer Dust

Celestial Night Bloom