Palette

City Night Canvas

Capturing the somber, reflective tones of a bustling city under the cover of night.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2C3E50#4A606C#7F8C8D#BCCBD6#1A2832

Palette guide

How to use City Night Canvas

Overview

The "City Night Canvas" palette captures the somber, reflective tones of a bustling city under the cover of night, offering a sophisticated range of cool darks and muted grays. Featuring a deep #1A2832, a robust #2C3E50, a versatile #4A606C, a balanced #7F8C8D, and a lighter #BCCBD6, this palette is perfect for designs that aim for a mysterious, elegant, or understated mood. Designers can leverage these tones to create immersive dark mode interfaces, sophisticated branding, and digital experiences that evoke urban sophistication. Developers will find these hex codes straightforward for implementing clean UI elements, subtle gradients, and robust typographic hierarchies, making it ideal for corporate, tech, or artistic applications.

Best used for

Luxury brand dark mode themes
High-end editorial websites
Professional tech dashboards
Urban photography showcases
Mystery novel or film promotions
Abstract art gallery platforms

Suggested color roles

primary

#2C3E50 - A deep, cool blue-grey, excellent for primary content areas, strong headings, or main brand elements, establishing a sophisticated tone.

secondary

#4A606C - A versatile mid-tone, suitable for subheadings, secondary content blocks, or background sections, adding depth and visual interest.

accent

#7F8C8D - A balanced grey, ideal for subtle highlights, borders, or hover states, providing gentle contrast without overpowering the darker tones.

background

#1A2832 - The deepest shade, serving as a rich, dark canvas that allows lighter elements to emerge and creates an immersive experience.

text

#BCCBD6 - A light, cool grey, optimal for primary body text against #1A2832 or #2C3E50, ensuring excellent readability and a harmonious aesthetic.

Accessibility notes

Ensure high contrast for #BCCBD6 text on #1A2832 or #2C3E50 backgrounds to meet WCAG AA standards.
Avoid using #7F8C8D for small text on #4A606C, as contrast may be insufficient.
Provide clear non-color-based indicators for interactive elements, as the dark palette can sometimes obscure subtle color changes.
For critical information, consider using a pure white text against the darkest backgrounds for maximum readability.

Recommended combinations

Deep Urban Night

Ideal for creating immersive dark mode interfaces, setting a mysterious and elegant mood for digital platforms.

#1A2832 · #2C3E50 · #4A606C

Reflective Surface

Perfect for subtle gradients, background textures, or layered UI elements that need a sense of depth.

#4A606C · #7F8C8D · #BCCBD6

Sophisticated Contrast

Great for establishing clear visual hierarchy in web applications, guiding users through content with elegance.

#2C3E50 · #7F8C8D · #BCCBD6

CSS variables

:root {
  --city-night-canvas-1: #2C3E50;
  --city-night-canvas-2: #4A606C;
  --city-night-canvas-3: #7F8C8D;
  --city-night-canvas-4: #BCCBD6;
  --city-night-canvas-5: #1A2832;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "city-night-canvas": {
        1: "#2C3E50",
        2: "#4A606C",
        3: "#7F8C8D",
        4: "#BCCBD6",
        5: "#1A2832",
      }
    }
  }
}

Hex values

Color 1#2C3E50

Color 2#4A606C

Color 3#7F8C8D

Color 4#BCCBD6

Color 5#1A2832

Accessibility

Contrast checker

1.7:1Fail

3.2:1AA18

6.6:1AA

1.4:1Fail

1.7:1Fail

1.9:1Fail

4:1AA18

2.3:1Fail