Palette

Wet City Reflections

The blurred, streaky reflections of neon signs on a rain-slicked city street at night.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Wet City Reflections 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 Wet City Reflections.

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

Data visualization

#343A40#2B6CB0#D64545#F7DF1E#121212

Palette guide

How to use Wet City Reflections

Overview

The 'Wet City Reflections' palette captures the energetic glow of urban nights, featuring a striking combination of deep, moody tones and vibrant, neon-like accents. With a foundation of #121212 and #343A40, it provides a sophisticated dark canvas. Bright pops like the electric blue #2B6CB0, the bold red #D64545, and the luminous yellow #F7DF1E evoke the blurred lights of a rain-slicked street. This palette is ideal for designers and developers aiming to create modern, dynamic interfaces or branding that feels both edgy and alive, perfect for projects requiring a sense of urban sophistication and high energy.

Best used for

Modern digital interfaces and dashboards
Gaming UI and branding
Event promotion and nightlife branding
Tech startup websites and apps
Motion graphics and animated sequences
Urban fashion or streetwear branding

Suggested color roles

primary

Utilize #121212 as a dominant background or base for a deep, immersive dark mode experience, setting a strong, modern tone.

secondary

Employ #343A40 for secondary backgrounds, borders, or subtle divisions, providing depth without overwhelming the primary dark.

accent

Apply #2B6CB0 for interactive elements like buttons and links, #D64545 for alerts or calls-to-action, and #F7DF1E for highlights or warnings, ensuring high visibility.

background

Primarily use #121212 or #343A40 to establish a dark, sophisticated backdrop that allows the vibrant accents to truly pop.

text

For optimal readability, use a light text color like pure white or a very light grey on dark backgrounds such as #121212 or #343A40. Consider #343A40 for secondary text on a lighter background if needed, though this palette thrives on dark themes.

Accessibility notes

Ensure sufficient contrast for text: light text on #121212 or #343A40 backgrounds will generally pass WCAG AAA.
Use #2B6CB0, #D64545, and #F7DF1E as accents, verifying they meet contrast standards against their respective backgrounds.
Avoid using only color to convey critical information, especially with #D64545 (red) as it can be problematic for color-blind users.
The vibrancy of #F7DF1E may require darker text (e.g., #121212) when used as a background to maintain readability.

Recommended combinations

Urban Night

A powerful combination for dark-themed interfaces, using blue for primary actions and yellow for critical highlights.

#121212 · #2B6CB0 · #F7DF1E

Street Glow

Ideal for a slightly softer dark background with strong, contrasting red and blue accents for attention-grabbing elements.

#343A40 · #D64545 · #2B6CB0

Neon Flare

Utilize the bright yellow as a background with dark text and a vibrant red for key calls-to-action, creating high impact.

#F7DF1E · #121212 · #D64545

CSS variables

:root {
  --wet-city-reflections-1: #343A40;
  --wet-city-reflections-2: #2B6CB0;
  --wet-city-reflections-3: #D64545;
  --wet-city-reflections-4: #F7DF1E;
  --wet-city-reflections-5: #121212;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "wet-city-reflections": {
        1: "#343A40",
        2: "#2B6CB0",
        3: "#D64545",
        4: "#F7DF1E",
        5: "#121212",
      }
    }
  }
}

Hex values

Color 1#343A40

Color 2#2B6CB0

Color 3#D64545

Color 4#F7DF1E

Color 5#121212

Accessibility

Contrast checker

2.1:1Fail

2.6:1Fail

8.5:1AAA

1.6:1Fail

2.1:1Fail

1.2:1Fail

4:1AA18

3.5:1AA18

2.6:1Fail

1.2:1Fail

3.2:1AA18

4.3:1AA18

8.5:1AAA

4:1AA18

3.2:1AA18

13.9:1AAA

1.6:1Fail

3.5:1AA18

4.3:1AA18

13.9:1AAA

Similar palettes

More like Wet City Reflections