Back to palettes

Palette

Starry Night Horizon

Captures the deep, serene blues of a night sky, where stars emerge above a 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

#0D1B2A#1B263B#415A77#778DA9#E0E1EF

Palette guide

How to use Starry Night Horizon

Overview

The 'Starry Night Horizon' palette captures the deep, serene blues of a night sky, where stars emerge above a distant horizon. Ranging from the profound #0D1B2A to the soft, nearly white #E0E1EF, this palette offers a sense of stability and calm. The mid-tones #1B263B, #415A77, and #778DA9 provide a natural progression, allowing for nuanced depth and visual interest. It's an excellent choice for designers and developers seeking to create sophisticated, trustworthy, and visually calming digital experiences that evoke professionalism and tranquility.

Best used for

  • Corporate branding and websites
  • Educational platforms and content
  • Calm and focused mobile applications
  • Data visualization dashboards
  • Elegant presentation themes
  • Interior design mood boards

Suggested color roles

primary

Establish #0D1B2A as the deep, grounding base for primary backgrounds or large visual blocks.

secondary

Utilize #1B263B for secondary backgrounds, headers, or distinct sections to maintain depth.

accent

Apply #415A77 for subtle emphasis on interactive elements, progress bars, or illustrative details.

background

Choose #0D1B2A for a dark, immersive background, or #E0E1EF for a clean, light mode canvas.

text

For dark backgrounds, use #E0E1EF or white. For light backgrounds, use #0D1B2A or a dark charcoal for optimal readability.

Accessibility notes

  • Ensure sufficient contrast for text on #778DA9, particularly if using a mid-tone text color.
  • #E0E1EF provides excellent contrast against all darker blues in this palette, making it ideal for primary text.
  • Avoid using #415A77 as text on #1B263B without carefully checking WCAG contrast ratios.
  • When using #E0E1EF as a background, pair it with a very dark text color like #0D1B2A for optimal readability.

Recommended combinations

Celestial Depth

A deep dark base, a harmonious mid-blue element, and a bright, soft highlight for clarity.

#0D1B2A · #415A77 · #E0E1EF

Horizon Blend

A smooth, gradual transition of blues, perfect for creating subtle gradients or visual flow.

#1B263B · #415A77 · #778DA9

Starlight Focus

Combines a deep background with a soft blue element and a bright, legible text color for emphasis.

#0D1B2A · #778DA9 · #E0E1EF

CSS variables

:root {
  --starry-night-horizon-3-1: #0D1B2A;
  --starry-night-horizon-3-2: #1B263B;
  --starry-night-horizon-3-3: #415A77;
  --starry-night-horizon-3-4: #778DA9;
  --starry-night-horizon-3-5: #E0E1EF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "starry-night-horizon-3": {
        1: "#0D1B2A",
        2: "#1B263B",
        3: "#415A77",
        4: "#778DA9",
        5: "#E0E1EF",
      }
    }
  }
}

Related searches

serene night palettecorporate blue schemedark blue light blueelegant night skycalming interface colors

Palette colors

Hex values

Color 1#0D1B2A
·
Color 2#1B263B
·
Color 3#415A77
·
Color 4#778DA9
·
Color 5#E0E1EF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
2.4:1Fail
5.1:1AA
13.4:1AAA
2
1.1:1Fail
2.1:1Fail
4.4:1AA18
11.7:1AAA
3
2.4:1Fail
2.1:1Fail
2.1:1Fail
5.5:1AA
4
5.1:1AA
4.4:1AA18
2.1:1Fail
2.6:1Fail
5
13.4:1AAA
11.7:1AAA
5.5:1AA
2.6:1Fail

Similar palettes

More like Starry Night Horizon

View all dark
Celestial Night Sky
Starlit Canvas
Celestial Night Bloom
Celestial Sapphire Dust
Celestial Void Gaze
Desert Night Sky