Back to palettes

Palette

Celestial Deep Blue

A gradient of deep blues found in the endless expanse of the night sky, dotted with distant stars.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Celestial Deep Blue 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 Celestial Deep Blue.

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

Data visualization

#0F0F2D#1E1E4F#2C2C6A#3B3B8B#4949A6

Palette guide

How to use Celestial Deep Blue

Overview

The Celestial Deep Blue palette presents a gradient of deep blues found in the endless expanse of the night sky, dotted with distant stars. It features a profound, almost black #0F0F2D, transitioning through increasingly rich and vibrant blues like #1E1E4F, #2C2C6A, #3B3B8B, and #4949A6. This dark and mysterious collection is ideal for designers and developers aiming for a sophisticated, professional, and immersive aesthetic. It's perfect for conveying depth, trustworthiness, and understated elegance in corporate branding, dark mode UI, or any project requiring a strong, stable visual identity.

Best used for

  • Dark mode application UI
  • Corporate and professional websites
  • Luxury tech product branding
  • Astronomical or space-related content
  • Elegant data visualization
  • Secure and reliable service platforms

Suggested color roles

primary

#0F0F2D - The deepest, almost black, ideal for expansive backgrounds, headers, or main structural elements, providing a strong, immersive foundation.

secondary

#1E1E4F - Use for subheadings, navigation bars, or darker content panels, offering a rich navy that adds depth.

accent

#4949A6 - The brightest blue in the palette, perfect for subtle highlights, interactive elements, or to draw attention.

background

#0F0F2D - Creates an immersive dark canvas, allowing the other blues to create subtle depth and texture.

text

White or a very light gray - The palette lacks a sufficiently light color for primary text on dark backgrounds; white offers optimal contrast.

Accessibility notes

  • Ensure white text on #0F0F2D or #1E1E4F background meets WCAG AAA contrast ratio.
  • The blues within the palette are quite close; avoid using them for text on adjacent shades (e.g., #2C2C6A text on #3B3B8B).
  • For body text, stick to white or very light gray on darker backgrounds for optimal legibility.
  • Use #4949A6 for interactive elements, ensuring its contrast against its immediate background.

Recommended combinations

Midnight Gradient

Deepest blue for base, mid-blue for content, and brighter blue for subtle accents.

#0F0F2D · #2C2C6A · #4949A6

Cosmic Depths

Rich navy for main elements, a vibrant blue for secondary, and deep black-blue for grounding.

#1E1E4F · #3B3B8B · #0F0F2D

Starry Night

Strong dark background with a bright blue accent and a mid-blue for layered content.

#0F0F2D · #4949A6 · #2C2C6A

CSS variables

:root {
  --celestial-deep-blue-1: #0F0F2D;
  --celestial-deep-blue-2: #1E1E4F;
  --celestial-deep-blue-3: #2C2C6A;
  --celestial-deep-blue-4: #3B3B8B;
  --celestial-deep-blue-5: #4949A6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-deep-blue": {
        1: "#0F0F2D",
        2: "#1E1E4F",
        3: "#2C2C6A",
        4: "#3B3B8B",
        5: "#4949A6",
      }
    }
  }
}

Related searches

deep navy color palettedark mode blue schemecelestial night sky colorsprofessional blue gradientmysterious dark aesthetic

Palette colors

Hex values

Color 1#0F0F2D
·
Color 2#1E1E4F
·
Color 3#2C2C6A
·
Color 4#3B3B8B
·
Color 5#4949A6
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.5:1Fail
1.9:1Fail
2.5:1Fail
2
1.2:1Fail
1.2:1Fail
1.6:1Fail
2.1:1Fail
3
1.5:1Fail
1.2:1Fail
1.3:1Fail
1.7:1Fail
4
1.9:1Fail
1.6:1Fail
1.3:1Fail
1.3:1Fail
5
2.5:1Fail
2.1:1Fail
1.7:1Fail
1.3:1Fail

Similar palettes

More like Celestial Deep Blue

View all dark