Palette

Starry Night Horizon

A deep and expanding range of blues, mimicking the profound calm of a star-dusted night sky meeting the horizon.

coolcalm5 colors

More cool 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

#000080#191970#4169E1#7B68EE#A0C0E7

Palette guide

How to use Starry Night Horizon

Overview

The 'Starry Night Horizon' palette offers a deep and expanding range of blues, mimicking the profound calm of a star-dusted night sky meeting the horizon. Starting with the foundational #000080 and #191970, it transitions through vibrant #4169E1 and serene #7B68EE, culminating in the soft, airy #A0C0E7. This palette is incredibly versatile for designers and developers aiming to create interfaces that feel both expansive and tranquil. It naturally supports themes of technology, education, and wellness, providing a sense of depth and clarity.

Best used for

High-tech interfaces and dashboards
Educational platform branding
Wellness and meditation apps
Serene corporate websites
Data visualization tools
Travel agency promotions

Suggested color roles

primary

Use #000080 as the foundational deep blue, ideal for large background areas or primary navigation.

secondary

Apply #191970 for supporting sections, secondary panels, or subtle background textures.

accent

Utilize #4169E1 for calls-to-action, interactive elements, or key information that needs to stand out with vibrancy.

background

The deepest #000080 provides a profound dark mode background, while #A0C0E7 can serve as a light, airy canvas.

text

For light backgrounds, use a dark blue like #000080 or a charcoal. For dark backgrounds, bright white or a very light grey is recommended.

Accessibility notes

Ensure sufficient contrast between text and background, especially when using #7B68EE or #A0C0E7 as backgrounds.
Text in white or a very light grey on #000080 and #191970 should meet WCAG AA contrast standards.
Avoid using similar blue tones for text and background, such as #4169E1 text on #7B68EE background, without verification.
Check contrast of interactive elements (#4169E1) against surrounding backgrounds to ensure visibility.

Recommended combinations

Deep Horizon

A strong dark base with a supporting dark tone and a soft, light blue accent for balance.

#000080 · #191970 · #A0C0E7

Sky Gradient

A smooth transition of blues, ideal for dynamic backgrounds, progress indicators, or visual hierarchies.

#191970 · #4169E1 · #7B68EE

Calm Contrast

Combines deep dark with a vibrant accent and a soft light tone for striking yet serene compositions.

#000080 · #4169E1 · #A0C0E7

CSS variables

:root {
  --starry-night-horizon-2-1: #000080;
  --starry-night-horizon-2-2: #191970;
  --starry-night-horizon-2-3: #4169E1;
  --starry-night-horizon-2-4: #7B68EE;
  --starry-night-horizon-2-5: #A0C0E7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "starry-night-horizon-2": {
        1: "#000080",
        2: "#191970",
        3: "#4169E1",
        4: "#7B68EE",
        5: "#A0C0E7",
      }
    }
  }
}

Hex values

Color 1#000080

Color 2#191970

Color 3#4169E1

Color 4#7B68EE

Color 5#A0C0E7

Accessibility

Contrast checker

1.1:1Fail

3.3:1AA18

3.9:1AA18

8.5:1AAA

1.1:1Fail

3.1:1AA18

3.6:1AA18

7.9:1AAA

3.3:1AA18

3.1:1AA18

1.2:1Fail

2.6:1Fail

3.9:1AA18

3.6:1AA18

1.2:1Fail

2.2:1Fail

8.5:1AAA

7.9:1AAA

2.6:1Fail

2.2:1Fail

Similar palettes

More like Starry Night Horizon

Celestial Oasis Dream

Celestial Ocean Dream

Celestial Ocean Gaze