Back to palettes

Palette

City Twilight Mist

A cool, somber gradient capturing the hazy, blue-grey essence of a city at twilight.

monochromedark5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1E2833#3C4753#5A6673#788593#96A4B3

Palette guide

How to use City Twilight Mist

Overview

The "City Twilight Mist" palette captures the hazy, blue-grey essence of an urban landscape at dusk, evoking a cool and somber atmosphere. This monochrome gradient ranges from a deep, anchoring blue-black #1E2833 to a softer, ethereal light blue-gray #96A4B3. Intermediate shades like #3C4753, #5A6673, and #788593 provide smooth transitions, making it ideal for creating depth and a contemplative ambiance. Designers and developers can utilize this palette for elegant dark mode interfaces, moody branding, or any project requiring a calm, introspective, and modern aesthetic that conveys depth and quiet sophistication with a hint of mystery.

Best used for

  • Dark mode web applications
  • Editorial design for thoughtful content
  • Luxury brand identity (subtle)
  • Architectural firm websites
  • Environmental platforms
  • Photography portfolios (moody)

Suggested color roles

primary

#1E2833 - The deepest blue-gray, providing a strong, elegant backdrop for main content and headers.

secondary

#3C4753 - A slightly lighter dark blue-gray, offering subtle contrast for secondary panels or navigation.

accent

#788593 - A balanced mid-tone blue-gray, suitable for interactive elements, borders, or subtle highlights.

background

#96A4B3 - A lighter, airy blue-gray, providing a clean, expansive canvas for content in a brighter theme.

text

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

Accessibility notes

  • Ensure sufficient contrast when using lighter shades like #788593 or #96A4B3 for text on similar light backgrounds.
  • Darker colors like #1E2833 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

Misty Depth

Ideal for dark mode applications, creating visual hierarchy and a sense of robust depth.

#1E2833 · #3C4753 · #5A6673

Hazy Horizon

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

#96A4B3 · #788593 · #3C4753

Twilight Accent

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

#5A6673 · #788593 · #96A4B3

CSS variables

:root {
  --city-twilight-mist-1: #1E2833;
  --city-twilight-mist-2: #3C4753;
  --city-twilight-mist-3: #5A6673;
  --city-twilight-mist-4: #788593;
  --city-twilight-mist-5: #96A4B3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "city-twilight-mist": {
        1: "#1E2833",
        2: "#3C4753",
        3: "#5A6673",
        4: "#788593",
        5: "#96A4B3",
      }
    }
  }
}

Related searches

moody blue gray palettetwilight urban colorsdark minimalist UIsophisticated grey bluecalm architecture colors

Palette colors

Hex values

Color 1#1E2833
·
Color 2#3C4753
·
Color 3#5A6673
·
Color 4#788593
·
Color 5#96A4B3
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.5:1Fail
4:1AA18
5.9:1AA
2
1.6:1Fail
1.6:1Fail
2.5:1Fail
3.7:1AA18
3
2.5:1Fail
1.6:1Fail
1.6:1Fail
2.3:1Fail
4
4:1AA18
2.5:1Fail
1.6:1Fail
1.5:1Fail
5
5.9:1AA
3.7:1AA18
2.3:1Fail
1.5:1Fail

Similar palettes

More like City Twilight Mist

View all monochrome
Monochrome City Fog
Rainy City Reflections
Charcoal Smoke Hues
Foggy London Alley
Gothic Cathedral Stone
Gothic Stone Hearth