Back to palettes

Palette

Abstract City Rhythm

A dynamic, geometric interpretation of urban life, reflecting the vibrant pulse and varied structures of a metropolis.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Abstract City Rhythm 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 Abstract City Rhythm.

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

Data visualization

#1A1A1A#36454F#666666#CC0000#0066CC

Palette guide

How to use Abstract City Rhythm

Overview

The Abstract City Rhythm palette captures the dynamic pulse of urban life with a sophisticated blend of dark neutrals and vibrant accents. This scheme features a deep charcoal #1A1A1A, a calming slate gray #36454F, a versatile medium gray #666666, and striking primary accents of fiery red #CC0000 and electric blue #0066CC. Ideal for projects demanding a modern, energetic, and graphic aesthetic, it offers a strong foundation with compelling pops of color. Designers and developers can leverage its depth for impactful branding, UI elements, and digital experiences that reflect metropolitan sophistication and energy.

Best used for

  • Modern tech branding and app interfaces
  • Urban-themed websites and digital campaigns
  • Event posters and promotional materials
  • Automotive and industrial design presentations
  • Architectural visualization and portfolios
  • Graphic design projects requiring bold contrast

Suggested color roles

primary

Use #1A1A1A as a dominant background or primary branding color to establish a strong, sophisticated foundation.

secondary

Employ #36454F for secondary backgrounds, larger text blocks, or container elements to add depth without overwhelming.

accent

Apply #CC0000 for calls-to-action, alerts, or key interactive elements to draw immediate attention. #0066CC works well for links, active states, or secondary highlights, providing a cool counterpoint.

background

Utilize #1A1A1A or #36454F for dark mode interfaces. For light mode, a clean white or very light gray would make #666666, #CC0000, and #0066CC stand out effectively.

text

For dark backgrounds like #1A1A1A or #36454F, use white or a very light gray. For lighter backgrounds, #1A1A1A or a dark charcoal ensures excellent readability.

Accessibility notes

  • Ensure high contrast when placing #CC0000 or #0066CC on #1A1A1A or #36454F; check WCAG AA compliance for text.
  • Text set in #666666 requires a sufficiently light background to maintain readability, or a dark background for inverse contrast.
  • Avoid using #CC0000 and #0066CC as primary text colors on each other or similar dark hues due to potential low contrast and visual vibration.
  • Always test color combinations with accessibility tools, especially for color-blind users, given the vibrant accents.

Recommended combinations

Urban Contrast

Ideal for bold headlines and call-to-action elements on a dark, modern interface.

#1A1A1A · #CC0000 · #666666

Cool Rhythm

Perfect for sophisticated data visualizations or navigation elements, offering clear hierarchy.

#36454F · #0066CC · #1A1A1A

Dynamic Pop

Great for infographics or interactive components where a neutral base supports energetic highlights.

#666666 · #CC0000 · #0066CC

CSS variables

:root {
  --abstract-city-rhythm-1: #1A1A1A;
  --abstract-city-rhythm-2: #36454F;
  --abstract-city-rhythm-3: #666666;
  --abstract-city-rhythm-4: #CC0000;
  --abstract-city-rhythm-5: #0066CC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abstract-city-rhythm": {
        1: "#1A1A1A",
        2: "#36454F",
        3: "#666666",
        4: "#CC0000",
        5: "#0066CC",
      }
    }
  }
}

Related searches

modern urban color schemecity inspired color palettedark mode accent colorsgeometric design colorsvibrant graphic palette

Palette colors

Hex values

Color 1#1A1A1A
·
Color 2#36454F
·
Color 3#666666
·
Color 4#CC0000
·
Color 5#0066CC
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
3:1AA18
3:1Fail
3.1:1AA18
2
1.8:1Fail
1.7:1Fail
1.7:1Fail
1.8:1Fail
3
3:1AA18
1.7:1Fail
1:1Fail
1:1Fail
4
3:1Fail
1.7:1Fail
1:1Fail
1.1:1Fail
5
3.1:1AA18
1.8:1Fail
1:1Fail
1.1:1Fail

Similar palettes

More like Abstract City Rhythm

View all vibrant
Downtown Neon Rhythm
Vibrant City Pulse
Wet City Reflections
Abstract Art Strokes
Abstract Canvas Blend
Abstract Canvas Pop