Palette

Cybernetic City Grid

A futuristic palette of deep blacks and glowing blues, inspired by the sleek lines of a cybernetic city grid.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cybernetic City Grid 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 Cybernetic City Grid.

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

Data visualization

#000000#001F3F#004080#0080FF#00FFFF

Palette guide

How to use Cybernetic City Grid

Overview

The Cybernetic City Grid palette (#3) is a sophisticated, progressive gradient of blues, ranging from absolute black (#000000) to an electrifying cyan (#00FFFF). This palette, featuring deep navy (#001F3F), rich sapphire (#004080), and vibrant electric blue (#0080FF), captures the sleek lines and glowing interfaces of a complex digital matrix. It's ideal for designers and developers aiming for a professional, high-tech, and immersive aesthetic. The gradual shift in blue intensity provides excellent opportunities for creating depth, hierarchy, and a distinct futuristic mood that is both powerful and refined.

Best used for

Corporate tech branding and websites
Data visualization dashboards
Science fiction UI elements and displays
Virtual reality environments and applications
Digital security software interfaces
Modern architectural presentations

Suggested color roles

primary

Use #0080FF (Electric Blue) for main interactive elements, calls-to-action, or to highlight key information, providing a vibrant focal point.

secondary

Apply #004080 (Rich Sapphire) for secondary navigation, section headers, or to provide a deeper blue contrast against lighter elements.

accent

Reserve #00FFFF (Electric Cyan) for subtle glows, hover effects, or small, critical alerts that need to cut through the darker blues.

background

Utilize #000000 (Pure Black) as the ultimate dark canvas, offering infinite depth and making the blues appear to glow intensely.

text

Pair #00FFFF (Electric Cyan) or #0080FF (Electric Blue) for headings; use white for general body text on dark backgrounds.

Accessibility notes

Ensure sufficient contrast for text: #0080FF or #00FFFF on #000000 will generally pass. Check #004080 on #001F3F.
Avoid using #001F3F and #004080 for primary interactive elements if they are close in value, as differentiation might be difficult.
Pure black #000000 is an excellent background for lighter blue text like #0080FF or white to ensure high readability.
For users with vision impairments, avoid relying solely on subtle blue shifts for conveying critical information.

Recommended combinations

Digital Depths

Create layered backgrounds or subtle depth for complex interfaces, moving from darkest to slightly lighter.

#000000 · #001F3F · #004080

Interface Glow

Ideal for UI elements where #000000 is the background, #0080FF for main content, and #00FFFF for active states/highlights.

#000000 · #0080FF · #00FFFF

Data Flow

Use for progressive data visualizations, showing increasing intensity or hierarchy within a blue spectrum.

#001F3F · #004080 · #0080FF

CSS variables

:root {
  --cybernetic-city-grid-3-1: #000000;
  --cybernetic-city-grid-3-2: #001F3F;
  --cybernetic-city-grid-3-3: #004080;
  --cybernetic-city-grid-3-4: #0080FF;
  --cybernetic-city-grid-3-5: #00FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cybernetic-city-grid-3": {
        1: "#000000",
        2: "#001F3F",
        3: "#004080",
        4: "#0080FF",
        5: "#00FFFF",
      }
    }
  }
}

Hex values

Color 1#000000

Color 2#001F3F

Color 3#004080

Color 4#0080FF

Color 5#00FFFF

Accessibility

Contrast checker

1.3:1Fail

2:1Fail

5.5:1AA

16.7:1AAA

1.3:1Fail

1.6:1Fail

4.4:1AA18

13.2:1AAA

2:1Fail

1.6:1Fail

2.7:1Fail

8.2:1AAA

5.5:1AA

4.4:1AA18

2.7:1Fail

3:1AA18

16.7:1AAA

13.2:1AAA

8.2:1AAA

3:1AA18

Similar palettes

More like Cybernetic City Grid

View all vibrant

Digital Dawn

Cyber Glitch Array

Cybernetic Matrix Blue

Electric Circuit Buzz

Electric Circuit Surge

Electro Pulse Grid