Back to palettes

Palette

Starry Night Horizon

A minimalist monochrome gradient that captures the infinite depth and mystery of a clear 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 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

#000000#212121#424242#616161#757575

Palette guide

How to use Starry Night Horizon

Overview

The 'Starry Night Horizon' palette is a minimalist monochrome gradient that captures the infinite depth and mystery of a clear starry night sky. Featuring pure black #000000, it gradually lightens through #212121, #424242, and #616161, culminating in the soft mid-grey #757575. This sophisticated and timeless color scheme is perfect for designers and developers aiming for a sleek, modern, and elegant aesthetic. It provides a strong foundation for high-contrast designs, allowing content to truly stand out with clarity and impact in any digital medium.

Best used for

  • High-end luxury brand websites
  • Minimalist photography portfolios
  • Dark mode application themes
  • Tech product interfaces
  • Artistic and conceptual presentations
  • Sleek fashion e-commerce platforms

Suggested color roles

primary

Utilize #000000 as the ultimate foundational black, providing maximum depth for backgrounds.

secondary

Apply #212121 for distinct sections, card backgrounds, or subtle shadow effects.

accent

Use #757575 sparingly for subtle highlights, borders, or inactive UI elements.

background

The deepest #000000 is ideal for a truly dark, immersive background experience.

text

Bright white or a very light grey (e.g., #EEEEEE) is essential for readability on darker shades. For lighter shades, use #000000.

Accessibility notes

  • Ensure white or light grey text has sufficient contrast (WCAG AA) on #000000, #212121, and #424242.
  • Text on #616161 or #757575 will require a dark text color (e.g., black) for optimal readability.
  • Avoid using similar grey tones for text and background to prevent low contrast and readability issues.
  • Maintain a consistent light text color across the darker palette shades for a cohesive and accessible user experience.

Recommended combinations

Deep Contrast

A strong dark base with a mid-grey element and a lighter grey for distinct visual separation.

#000000 · #424242 · #757575

Subtle Gradient

A smooth tonal progression of greys, ideal for creating depth in backgrounds or layered UI components.

#212121 · #424242 · #616161

Minimalist Base

Combines the darkest shades for background with the lightest for subtle accents or non-critical text.

#000000 · #212121 · #757575

CSS variables

:root {
  --starry-night-horizon-4-1: #000000;
  --starry-night-horizon-4-2: #212121;
  --starry-night-horizon-4-3: #424242;
  --starry-night-horizon-4-4: #616161;
  --starry-night-horizon-4-5: #757575;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "starry-night-horizon-4": {
        1: "#000000",
        2: "#212121",
        3: "#424242",
        4: "#616161",
        5: "#757575",
      }
    }
  }
}

Related searches

minimalist black greydark monochrome palettesophisticated dark themeinfinite depth colorsnight sky black

Palette colors

Hex values

Color 1#000000
·
Color 2#212121
·
Color 3#424242
·
Color 4#616161
·
Color 5#757575
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2.1:1Fail
3.4:1AA18
4.6:1AA
2
1.3:1Fail
1.6:1Fail
2.6:1Fail
3.5:1AA18
3
2.1:1Fail
1.6:1Fail
1.6:1Fail
2.2:1Fail
4
3.4:1AA18
2.6:1Fail
1.6:1Fail
1.3:1Fail
5
4.6:1AA
3.5:1AA18
2.2:1Fail
1.3:1Fail

Similar palettes

More like Starry Night Horizon

View all Dark
Obsidian Night Stone
Abyssal Bioluminescence
Abyssal Seaweed Garden
Cyber City Echoes
Deep Forest Murmur
Deep Ocean Abyss