Palette

Cyber Cityscape

Sleek, industrial grays punctuated by a vibrant electric blue, evoking a futuristic cityscape.

coolminimal5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cyber Cityscape 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 Cyber Cityscape.

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

Data visualization

#1A1A1D#3B4254#7F8EA3#00B4D8#E0FBFC

Palette guide

How to use Cyber Cityscape

Overview

The Cyber Cityscape palette delivers a sleek, industrial aesthetic, combining sophisticated grays with a striking electric blue. #1A1A1D provides a stark, almost black base, contrasted by the vibrant #00B4D8. Mid-tones like #3B4254 and #7F8EA3 offer depth and texture, while #E0FBFC provides a crisp, near-white highlight. This palette is ideal for designers aiming for a modern, minimalist, yet dynamic look, evoking futuristic urban environments. Developers will find these hex codes perfect for creating clean, high-contrast user interfaces, strong branding, or impactful digital experiences that balance professionalism with a touch of electric energy.

Best used for

Modern tech company websites and branding
Sleek UI/UX design for web and mobile apps
Architectural visualization and urban planning
Product design for electronics or automotive
Minimalist portfolio websites
Data dashboards requiring clarity and focus

Suggested color roles

primary

#00B4D8 - A vibrant, electric blue that commands attention, perfect for calls-to-action, key icons, or brand emphasis.

secondary

#3B4254 - A deep, cool gray, offering a solid foundation for content blocks, navigation, or subtle background textures.

accent

#E0FBFC - A crisp, near-white that provides brilliant contrast for text, highlights, or clean dividing lines.

background

#1A1A1D - A very dark, charcoal gray, creating a sophisticated and immersive base for all other elements.

text

#E0FBFC - This bright, almost white hue ensures excellent readability for all text against the darkest backgrounds like #1A1A1D.

Accessibility notes

Ensure #E0FBFC text on #1A1A1D or #3B4254 backgrounds meets WCAG AA contrast requirements.
The vibrant #00B4D8 may need very dark text (e.g., black or #1A1A1D) to be legible on it.
Maintain clear visual hierarchy, as the grays are close in luminance; use #00B4D8 for critical interactive elements.
Test color pairings for text and interactive elements to ensure clear distinction for all users, including those with color blindness.

Recommended combinations

Industrial Edge

A strong, dark base with a vibrant blue accent, ideal for sleek dashboards or tech interfaces.

#1A1A1D · #3B4254 · #00B4D8

Modern Clarity

Light backgrounds with clear, readable text and a pop of electric blue for highlights or links.

#E0FBFC · #7F8EA3 · #00B4D8

Urban Grid

Creating depth and structure through layered grays, with #1A1A1D for subtle dividers or shadows.

#3B4254 · #7F8EA3 · #1A1A1D

CSS variables

:root {
  --cyber-cityscape-1: #1A1A1D;
  --cyber-cityscape-2: #3B4254;
  --cyber-cityscape-3: #7F8EA3;
  --cyber-cityscape-4: #00B4D8;
  --cyber-cityscape-5: #E0FBFC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cyber-cityscape": {
        1: "#1A1A1D",
        2: "#3B4254",
        3: "#7F8EA3",
        4: "#00B4D8",
        5: "#E0FBFC",
      }
    }
  }
}

Hex values

Color 1#1A1A1D

Color 2#3B4254

Color 3#7F8EA3

Color 4#00B4D8

Color 5#E0FBFC

Accessibility

Contrast checker

1.7:1Fail

5.2:1AA

7:1AAA

16:1AAA

1.7:1Fail

3:1AA18

4.1:1AA18

9.3:1AAA

5.2:1AA

3:1AA18

1.4:1Fail

3.1:1AA18

7:1AAA

4.1:1AA18

1.4:1Fail

2.3:1Fail

16:1AAA

9.3:1AAA

3.1:1AA18

2.3:1Fail

Similar palettes

More like Cyber Cityscape

View all cool

Digital Interface Blue

Digital Rainstorm

Sci-Fi Interface Blue

Steel Skyline Haze

Urban Glass Facade

Arctic Glacier Chill