Back to palettes

Palette

Starlight City Glow

Deep blues and steely grays mimicking the city lights under a starlit sky.

darkelegant5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Starlight City Glow 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 Starlight City Glow.

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

Data visualization

#0F1626#2A3A4C#4F6478#889AB0#C7D1DC

Palette guide

How to use Starlight City Glow

Overview

The Starlight City Glow palette offers a sophisticated blend of deep blues and steely grays, perfect for designs seeking a modern, elegant, and contemplative aesthetic. Anchored by the profound `#0F1626`, it transitions through the grounding `#2A3A4C` and the versatile `#4F6478`. These colors evoke the calm of a city night under a starlit sky, providing a strong foundation for digital interfaces, branding, and sophisticated print materials. Developers will find these hues create a coherent, premium feel, while designers can leverage the progression from dark to light, culminating in the soft `#C7D1DC` and inviting `#889AB0`, for depth and visual hierarchy.

Best used for

  • Corporate websites and branding
  • High-end technology interfaces and dashboards
  • Luxury product or service presentations
  • Dark mode themes for web and mobile apps
  • Editorial design for sophisticated content
  • Architectural and urban planning visualizations

Suggested color roles

primary

Use `#0F1626` as the foundational deep blue for large headers, main backgrounds, or dominant brand elements to establish a strong, elegant presence.

secondary

Employ `#2A3A4C` for secondary panels, card backgrounds, or navigation elements, offering a slightly softer but still profound supporting color.

accent

Apply `#4F6478` for subtle accents such as interactive states, borders, or iconography where a refined highlight is needed without being overly bright.

background

Utilize `#0F1626` for a truly immersive, dark background, or `#2A3A4C` for a slightly less intense dark base in content-heavy sections.

text

Pair `#C7D1DC` for primary body text on darker backgrounds to ensure excellent readability. For supporting text or subtle hints, `#889AB0` can be effective. Consider a very dark charcoal for text on `#C7D1DC` if it acts as a background.

Accessibility notes

  • The contrast between `#0F1626` and `#C7D1DC` is excellent for large text and ensures high readability.
  • Be cautious when using `#4F6478` for small text on `#2A3A4C` backgrounds; always check contrast ratios to meet WCAG standards.
  • Ensure interactive elements using `#889AB0` on backgrounds like `#4F6478` have sufficient contrast for both normal and hover/focus states.
  • For any purely color-coded information, always provide alternative text or visual cues to assist users with color vision deficiencies.

Recommended combinations

Deep Contrast

Ideal for main headings and body text on a dark background, with a mid-tone accent for interactive elements.

#0F1626 · #C7D1DC · #4F6478

Layered Interface

Excellent for card-based layouts or dashboards, providing depth with distinct background and foreground elements.

#2A3A4C · #889AB0 · #C7D1DC

Subtle Depth

Use for a monochromatic feel with subtle variations, effective for background gradients or section dividers.

#0F1626 · #2A3A4C · #4F6478

CSS variables

:root {
  --starlight-city-glow-1: #0F1626;
  --starlight-city-glow-2: #2A3A4C;
  --starlight-city-glow-3: #4F6478;
  --starlight-city-glow-4: #889AB0;
  --starlight-city-glow-5: #C7D1DC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "starlight-city-glow": {
        1: "#0F1626",
        2: "#2A3A4C",
        3: "#4F6478",
        4: "#889AB0",
        5: "#C7D1DC",
      }
    }
  }
}

Related searches

dark blue gray color schememodern elegant palettesophisticated night mode colorsurban blue design inspirationcorporate dark theme colors

Palette colors

Hex values

Color 1#0F1626
·
Color 2#2A3A4C
·
Color 3#4F6478
·
Color 4#889AB0
·
Color 5#C7D1DC
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.9:1Fail
6.3:1AA
11.7:1AAA
2
1.6:1Fail
1.9:1Fail
4:1AA18
7.5:1AAA
3
2.9:1Fail
1.9:1Fail
2.1:1Fail
4:1AA18
4
6.3:1AA
4:1AA18
2.1:1Fail
1.9:1Fail
5
11.7:1AAA
7.5:1AAA
4:1AA18
1.9:1Fail

Similar palettes

More like Starlight City Glow

View all dark
Midnight Celestial Bloom
Midnight Horizon Gleam
Midnight Velvet Starry
Velvet Starry Night
Celestial Starry Veil
City Neon Rain