Back to palettes

Palette

Midnight Horizon Gaze

Deep, rich blues and purples portraying the solemn beauty of the horizon at midnight.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Midnight Horizon Gaze 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 Midnight Horizon Gaze.

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

Data visualization

#0B0E1F#1F2540#3C476E#5E6B9B#7E8AC4

Palette guide

How to use Midnight Horizon Gaze

Overview

The Midnight Horizon Gaze palette captures the solemn beauty of the horizon at midnight, featuring a deep and rich progression of blues and purples. From the profound depth of #0B0E1F and #1F2540 to the softer, distant glow of #5E6B9B and #7E8AC4, this palette offers a sophisticated gradient effect. Designers and developers can utilize this harmonious blend to create immersive and serene digital environments. The presence of #3C476E acts as a vital mid-tone, bridging the darkest and lightest shades, making it highly versatile for layered designs, atmospheric backgrounds, or brand identities that aim for elegance and depth. It's perfect for conveying a sense of calm contemplation.

Best used for

  • Atmospheric web backgrounds and headers
  • Brand identity for tech or luxury services
  • Serene digital art and illustrations
  • Educational platforms requiring a calm aesthetic
  • Meditation or wellness app interfaces
  • Abstract and conceptual design projects

Suggested color roles

primary

Establish #0B0E1F as the foundational background color for profound depth and stability.

secondary

Use #1F2540 for supporting panels, sections, or subtle gradients to build visual interest.

accent

Employ #7E8AC4 for soft highlights, interactive elements, or to simulate a distant light source.

background

The deepest #0B0E1F or #1F2540 provides an immersive and elegant dark canvas.

text

Pair light text colors like #7E8AC4 or pure white (e.g., #FFFFFF) against the darker backgrounds for optimal legibility.

Accessibility notes

  • Ensure sufficient contrast when using #3C476E for text on darker backgrounds like #1F2540.
  • Prioritize #7E8AC4 for essential text and interactive elements to meet WCAG contrast guidelines on dark surfaces.
  • Avoid using #1F2540 for small text on #0B0E1F, as the contrast may be insufficient.
  • When applying gradients, ensure the text placed over the gradient maintains consistent readability across its range.

Recommended combinations

Deep Horizon

Excellent for primary backgrounds with subtle depth and a bright, distant highlight for text or icons.

#0B0E1F · #1F2540 · #7E8AC4

Twilight Blend

Creates a smooth, atmospheric gradient effect, ideal for hero sections or layered UI elements.

#1F2540 · #3C476E · #5E6B9B

Gaze Point

Provides strong contrast for key information or visual elements against a deep, stable base.

#0B0E1F · #5E6B9B · #7E8AC4

CSS variables

:root {
  --midnight-horizon-gaze-1: #0B0E1F;
  --midnight-horizon-gaze-2: #1F2540;
  --midnight-horizon-gaze-3: #3C476E;
  --midnight-horizon-gaze-4: #5E6B9B;
  --midnight-horizon-gaze-5: #7E8AC4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-horizon-gaze": {
        1: "#0B0E1F",
        2: "#1F2540",
        3: "#3C476E",
        4: "#5E6B9B",
        5: "#7E8AC4",
      }
    }
  }
}

Related searches

deep blue purple palettemidnight horizon colorsserene dark gradientstech brand colorsspace UI design

Palette colors

Hex values

Color 1#0B0E1F
·
Color 2#1F2540
·
Color 3#3C476E
·
Color 4#5E6B9B
·
Color 5#7E8AC4
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2.1:1Fail
3.7:1AA18
5.8:1AA
2
1.3:1Fail
1.7:1Fail
2.9:1Fail
4.5:1AA
3
2.1:1Fail
1.7:1Fail
1.7:1Fail
2.7:1Fail
4
3.7:1AA18
2.9:1Fail
1.7:1Fail
1.6:1Fail
5
5.8:1AA
4.5:1AA
2.7:1Fail
1.6:1Fail

Similar palettes

More like Midnight Horizon Gaze

View all dark
Abyss Gaze
Abyssal Bioluminescent Glow
Abyssal Coral Glow
Abyssal Deep Current
Abyssal Depths
Abyssal Glow Wonders