Palette

City Twilight Glow

Reflects the muted transition from day to night in an urban environment, with soft, ambient lights.

neutralcalm5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2C2C3A#5A5A6D#8D8DA0#B0B0C4#E0E0F0

Palette guide

How to use City Twilight Glow

Overview

The "City Twilight Glow" palette captures the subtle, ambient luminescence of an urban environment as day transitions to night. This sophisticated range of cool grays with a hint of purple, from the deep #2C2C3A to the near-white #E0E0F0, offers a harmonious gradient. Intermediate shades like #5A5A6D, #8D8DA0, and #B0B0C4 provide smooth transitions, making it ideal for creating depth and a serene, modern ambiance. Designers and developers can leverage this palette for elegant, calming interfaces, high-end branding, or any project requiring a modern, understated aesthetic that conveys tranquility and subtle sophistication.

Best used for

Luxury brand identity
Minimalist website design
High-tech product showcases
App interfaces (light or dark mode)
Editorial layouts
Photography portfolios

Suggested color roles

primary

#2C2C3A - A deep, anchoring charcoal-purple, excellent for main backgrounds or sophisticated headers.

secondary

#5A5A6D - A rich, cool gray-purple, providing subtle depth for secondary panels or navigation.

accent

#8D8DA0 - A versatile mid-tone gray-purple, suitable for interactive elements, borders, or subtle highlights.

background

#E0E0F0 - A very light, airy gray with a hint of lavender, serving as a clean, expansive canvas for content.

text

#2C2C3A - 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 #B0B0C4 or #E0E0F0 for text, especially on white or near-white backgrounds.
The darker shades provide good contrast for light text, but monitor readability for very small font sizes.
Use a tool to check contrast ratios between all text and background color pairs, particularly with #8D8DA0 on #5A5A6D.
Consider using bold or larger font sizes for important information if contrast is borderline.

Recommended combinations

Twilight Depth

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

#2C2C3A · #5A5A6D · #8D8DA0

Gentle Glow

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

#E0E0F0 · #B0B0C4 · #5A5A6D

Subtle Shimmer

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

#5A5A6D · #8D8DA0 · #B0B0C4

CSS variables

:root {
  --city-twilight-glow-1: #2C2C3A;
  --city-twilight-glow-2: #5A5A6D;
  --city-twilight-glow-3: #8D8DA0;
  --city-twilight-glow-4: #B0B0C4;
  --city-twilight-glow-5: #E0E0F0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "city-twilight-glow": {
        1: "#2C2C3A",
        2: "#5A5A6D",
        3: "#8D8DA0",
        4: "#B0B0C4",
        5: "#E0E0F0",
      }
    }
  }
}

Hex values

Color 1#2C2C3A

Color 2#5A5A6D

Color 3#8D8DA0

Color 4#B0B0C4

Color 5#E0E0F0

Accessibility

Contrast checker

2:1Fail

4.2:1AA18

6.4:1AA

10.5:1AAA

2:1Fail

2.1:1Fail

3.2:1AA18

5.2:1AA

4.2:1AA18

2.1:1Fail

1.5:1Fail

2.5:1Fail

6.4:1AA

3.2:1AA18

1.5:1Fail

1.6:1Fail

10.5:1AAA

5.2:1AA

2.5:1Fail

1.6:1Fail

Similar palettes

More like City Twilight Glow

View all neutral

Puddle Reflection Grey