Palette

City Twilight Gloom

Muted, cool grays reflecting the calm but somber transition from day to night in an urban landscape.

cooldark5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3D4853#5A6D7F#8BA0B3#2B353E#758899

Palette guide

How to use City Twilight Gloom

Overview

The "City Twilight Gloom" palette captures the somber yet sophisticated transition from day to night in an urban setting. It features deep, muted blue-grays, ranging from the profound #2B353E to the lighter #8BA0B3. Intermediate shades like #3D4853, #5A6D7F, and #758899 provide a harmonious gradient, making it ideal for creating depth and a contemplative ambiance. Designers and developers can utilize this palette for elegant dark mode interfaces, minimalist branding, or any project requiring a calm, introspective, and modern aesthetic that conveys depth and quiet sophistication with a hint of melancholy.

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

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

secondary

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

accent

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

background

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

text

#2B353E - 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 #758899 or #8BA0B3 for text on similar light backgrounds.
Darker colors like #2B353E 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 Contemplation

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

#2B353E · #3D4853 · #5A6D7F

Muted Horizon

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

#8BA0B3 · #758899 · #3D4853

Gloom Accent

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

#5A6D7F · #758899 · #8BA0B3

CSS variables

:root {
  --city-twilight-gloom-1: #3D4853;
  --city-twilight-gloom-2: #5A6D7F;
  --city-twilight-gloom-3: #8BA0B3;
  --city-twilight-gloom-4: #2B353E;
  --city-twilight-gloom-5: #758899;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "city-twilight-gloom": {
        1: "#3D4853",
        2: "#5A6D7F",
        3: "#8BA0B3",
        4: "#2B353E",
        5: "#758899",
      }
    }
  }
}

Hex values

Color 1#3D4853

Color 2#5A6D7F

Color 3#8BA0B3

Color 4#2B353E

Color 5#758899

Accessibility

Contrast checker

1.7:1Fail

3.5:1AA18

1.3:1Fail

2.5:1Fail

1.7:1Fail

2:1Fail

2.3:1Fail

1.5:1Fail

3.5:1AA18

2:1Fail

4.6:1AA

1.4:1Fail

1.3:1Fail

2.3:1Fail

4.6:1AA

3.4:1AA18

2.5:1Fail

1.5:1Fail

1.4:1Fail

3.4:1AA18

Similar palettes

More like City Twilight Gloom

View all cool

Coastal Tempest Gloom

Rainy City Reflections

Stormy Coast Drift

Stormy Coast Lighthouse

Stormy Coastal Bluff

Stormy Nordic Coast