Palette

Starry Night

A gradient from deep twilight to luminous sky blues, capturing the vast mystery of a clear, starry night.

DarkDark5 colors

More Dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Starry Night 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.

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

Data visualization

#0F0F2D#2C3E50#4682B4#6A5ACD#87CEEB

Palette guide

How to use Starry Night

Overview

The Starry Night palette offers a gradient of deep, mysterious blues, perfect for evoking the vastness of a cosmic sky. Featuring a profound primary dark blue, #0F0F2D, alongside rich mid-tones like #2C3E50 and #4682B4, it creates an immersive atmosphere. Accents of #6A5ACD and the luminous #87CEEB bring a sense of distant starlight or celestial glow. This collection is ideal for designers and developers aiming to craft designs with a sophisticated, ethereal, or contemplative mood, providing excellent depth and contrast for both digital and print applications. Its dark foundation allows brighter elements to truly pop, capturing the essence of a serene, star-dusted night.

Best used for

Luxury brand websites and apps
Night mode user interfaces
Astronomy or space-themed educational content
Mystical or fantasy art and illustrations
Event branding for evening galas or concerts
Dark-themed game environments

Suggested color roles

primary

Utilize #0F0F2D as the foundational color for large backgrounds or primary structural elements to establish a deep, immersive feel.

secondary

Employ #2C3E50 and #4682B4 for secondary sections, navigation menus, or prominent content blocks, providing depth without overwhelming.

accent

Reserve #6A5ACD and #87CEEB for interactive elements, highlights, icons, or subtle gradients to simulate starlight or distant nebulae.

background

The darkest shade, #0F0F2D, serves as an excellent background, providing a canvas for lighter elements to shine, embodying a true night sky.

text

For optimal readability, use #87CEEB or a pure white on the darker backgrounds. On lighter blues like #4682B4, a dark charcoal or black is recommended.

Accessibility notes

Ensure sufficient contrast when pairing lighter blues like #87CEEB with darker backgrounds such as #0F0F2D.
Avoid using #2C3E50 and #4682B4 for small text on similarly dark backgrounds without careful contrast checks.
Use a robust contrast checker for all text and interactive elements to meet WCAG AA or AAA standards.
Consider providing alternative text styles (e.g., bold or larger font sizes) for important information in mid-tone colors.

Recommended combinations

Cosmic Depth

Excellent for immersive backgrounds with contrasting, luminous text or key UI elements.

#0F0F2D · #2C3E50 · #87CEEB

Twilight Glow

Ideal for softer gradients or layered elements, with the darkest shade providing a strong base.

#4682B4 · #6A5ACD · #0F0F2D

Starlight Accent

Perfect for highlighting interactive components or adding a touch of celestial sparkle against a deep secondary color.

#2C3E50 · #87CEEB · #6A5ACD

CSS variables

:root {
  --starry-night-1: #0F0F2D;
  --starry-night-2: #2C3E50;
  --starry-night-3: #4682B4;
  --starry-night-4: #6A5ACD;
  --starry-night-5: #87CEEB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "starry-night": {
        1: "#0F0F2D",
        2: "#2C3E50",
        3: "#4682B4",
        4: "#6A5ACD",
        5: "#87CEEB",
      }
    }
  }
}

Hex values

Color 1#0F0F2D

Color 2#2C3E50

Color 3#4682B4

Color 4#6A5ACD

Color 5#87CEEB

Accessibility

Contrast checker

1.7:1Fail

4.5:1AA

3.5:1AA18

10.7:1AAA

1.7:1Fail

2.7:1Fail

2.1:1Fail

6.3:1AA

4.5:1AA

2.7:1Fail

1.3:1Fail

2.4:1Fail

3.5:1AA18

2.1:1Fail

1.3:1Fail

3:1AA18

10.7:1AAA

6.3:1AA

2.4:1Fail

3:1AA18

Similar palettes

More like Starry Night

View all Dark

Midnight Urban Blues

Winter Arctic Midnight

Abyssal Bioluminescence

Abyssal Seaweed Garden

Deep Forest Murmur

Midnight Forest Whisper