Back to palettes

Palette

City Rooftop Twilight

A deep, muted palette inspired by the subtle blues and grays of a city skyline at the quiet moment of twilight.

darkcalm5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how City Rooftop Twilight 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 City Rooftop Twilight.

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

Data visualization

#1F2E3A#3A4E5C#5C6E7D#7C8D9E#AABBDD

Palette guide

How to use City Rooftop Twilight

Overview

The "City Rooftop Twilight" palette captures the serene, deep blues and grays of an urban skyline at dusk. Ranging from a profound, anchoring blue-black #1F2E3A to a softer, ethereal light blue-gray #AABBDD, this palette provides a harmonious, cool gradient. Intermediate shades like #3A4E5C, #5C6E7D, and #7C8D9E offer smooth transitions, making it ideal for creating depth and a sophisticated ambiance. Designers and developers can utilize this palette for elegant dark mode interfaces, high-end branding, or any project requiring a calm, introspective, and modern aesthetic that conveys depth and quiet sophistication.

Best used for

  • Luxury brand websites
  • Dark mode UI/UX design
  • Architectural visualization
  • High-tech product interfaces
  • Editorial layouts for sophisticated content
  • Photography portfolio sites

Suggested color roles

primary

#1F2E3A - A deep, foundational blue-black, excellent for main backgrounds or strong headers.

secondary

#3A4E5C - A rich, dark blue-gray, providing subtle contrast for secondary panels or navigation.

accent

#5C6E7D - A versatile mid-tone blue-gray, suitable for interactive elements, borders, or subtle highlights.

background

#AABBDD - A very light, airy blue-gray, offering a clean, expansive canvas for content in a lighter theme.

text

#1F2E3A - For highly readable body text on lighter backgrounds, or a crisp white for headers on dark elements.

Accessibility notes

  • Ensure sufficient contrast when using lighter shades like #7C8D9E or #AABBDD for text on similar light backgrounds.
  • Darker colors like #1F2E3A provide excellent contrast for light text (e.g., white), enhancing readability.
  • Avoid using mid-tones for small text on closely related mid-tone backgrounds, as this can reduce legibility.
  • Utilize clear visual cues beyond color, such as underlines for links or bolding for emphasis, especially across the lighter shades.

Recommended combinations

Deep Twilight

Ideal for dark mode applications, creating visual hierarchy and sophisticated layering.

#1F2E3A · #3A4E5C · #5C6E7D

Subtle Horizon

Excellent for light mode applications, using the lightest for background and darker shades for secondary elements and text.

#AABBDD · #7C8D9E · #3A4E5C

Calm Reflection

Use for delicate borders, hover effects, or to add slight dimensionality to elements without harsh contrast.

#5C6E7D · #7C8D9E · #AABBDD

CSS variables

:root {
  --city-rooftop-twilight-1: #1F2E3A;
  --city-rooftop-twilight-2: #3A4E5C;
  --city-rooftop-twilight-3: #5C6E7D;
  --city-rooftop-twilight-4: #7C8D9E;
  --city-rooftop-twilight-5: #AABBDD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "city-rooftop-twilight": {
        1: "#1F2E3A",
        2: "#3A4E5C",
        3: "#5C6E7D",
        4: "#7C8D9E",
        5: "#AABBDD",
      }
    }
  }
}

Related searches

dark blue gray palettetwilight city colorssophisticated UI paletteurban night aestheticcalm architecture colors

Palette colors

Hex values

Color 1#1F2E3A
·
Color 2#3A4E5C
·
Color 3#5C6E7D
·
Color 4#7C8D9E
·
Color 5#AABBDD
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.6:1Fail
4.1:1AA18
7.2:1AAA
2
1.6:1Fail
1.6:1Fail
2.5:1Fail
4.5:1AA18
3
2.6:1Fail
1.6:1Fail
1.5:1Fail
2.7:1Fail
4
4.1:1AA18
2.5:1Fail
1.5:1Fail
1.8:1Fail
5
7.2:1AAA
4.5:1AA18
2.7:1Fail
1.8:1Fail

Similar palettes

More like City Rooftop Twilight

View all dark
Midnight Indigo Reverie
Moonless Lake Reflection
Moonlit Sakura Garden
Starry Night Veil
Urban Espresso Break
Abyssal Bloom Depths