Back to palettes

Palette

Cybernetic City Grid

Stark blacks, grays, and electric blues conjure a futuristic city grid at night.

darkdark5 colors
More dark 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#333333#66CCFF#CCFFFF#006699

Palette guide

How to use Cybernetic City Grid

Overview

The Cybernetic City Grid palette is a striking combination of dark, grounding tones and vibrant, electric blues, reminiscent of a futuristic urban nightscape. It features pure black (#000000) and a deep charcoal (#333333) as its foundation, introducing a dynamic light blue (#66CCFF), a luminous near-white cyan (#CCFFFF), and a rich, deep cyan-blue (#006699). This palette offers designers and developers a robust framework for creating interfaces and branding that are both sophisticated and energetic, perfectly capturing the stark beauty and digital glow of a high-tech metropolis after dark.

Best used for

  • Dark-themed websites and mobile applications
  • Sci-fi game interfaces and asset design
  • Corporate branding for technology companies
  • Event promotions for electronic music or tech expos
  • Digital signage and interactive displays
  • Architectural visualizations of modern buildings

Suggested color roles

primary

Use #006699 (Deep Cyan-Blue) for main calls-to-action, primary navigation, or significant headings, offering a strong, clear presence.

secondary

Apply #66CCFF (Light Blue) for secondary interactive elements, hover states, or important sub-headings, providing good contrast.

accent

Reserve #CCFFFF (Luminous Cyan) for subtle highlights, indicators, or small decorative elements that need to appear bright and ethereal.

background

Utilize #000000 (Pure Black) as the foundational dark canvas, providing maximum contrast and making the blues truly glow.

text

Pair #CCFFFF (Luminous Cyan) or #66CCFF (Light Blue) on dark backgrounds; use near-white for general body text.

Accessibility notes

  • Ensure #66CCFF and #CCFFFF have sufficient contrast when used as text on #000000 or #333333. Both should pass.
  • Avoid using #006699 for small text on #333333 as the contrast might be borderline for some.
  • Pure black #000000 is an excellent background for lighter text colors like #CCFFFF or white to ensure high readability.
  • Consider larger font sizes or bolding for critical information when using mid-tone blues on darker backgrounds.

Recommended combinations

Night Grid

A dark base with a subtle gray for structure and a deep blue for significant elements, like a city map at night.

#000000 · #333333 · #006699

Digital Light

Excellent for glowing UI elements, with the light blue for main content and the luminous cyan for highlights/hover states.

#000000 · #66CCFF · #CCFFFF

Future Architecture

Use for layered designs, with gray as a base, deep blue for structure, and light blue for illuminated details.

#333333 · #006699 · #66CCFF

CSS variables

:root {
  --cybernetic-city-grid-1: #000000;
  --cybernetic-city-grid-2: #333333;
  --cybernetic-city-grid-3: #66CCFF;
  --cybernetic-city-grid-4: #CCFFFF;
  --cybernetic-city-grid-5: #006699;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cybernetic-city-grid": {
        1: "#000000",
        2: "#333333",
        3: "#66CCFF",
        4: "#CCFFFF",
        5: "#006699",
      }
    }
  }
}

Related searches

dark tech blue palettecyber city night colorsfuturistic UI bluedigital grid color schememodern dark mode blues

Palette colors

Hex values

Color 1#000000
·
Color 2#333333
·
Color 3#66CCFF
·
Color 4#CCFFFF
·
Color 5#006699
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
11.6:1AAA
19.3:1AAA
3.4:1AA18
2
1.7:1Fail
7:1AAA
11.6:1AAA
2:1Fail
3
11.6:1AAA
7:1AAA
1.7:1Fail
3.5:1AA18
4
19.3:1AAA
11.6:1AAA
1.7:1Fail
5.7:1AA
5
3.4:1AA18
2:1Fail
3.5:1AA18
5.7:1AA

Similar palettes

More like Cybernetic City Grid

View all dark
Glitch System Interface
Midnight City Glitch
Midnight Urban Bloom
Midnight Urban Glow
Midnight Urban Pulse
Noir Alley Nocturne