Palette

Cybernetic City Grid

Sharp greens and deep blues intersect with metallic greys, embodying a futuristic city's digital core.

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

#00FF00#0000CD#8A2BE2#C0C0C0#1C1C1C

Palette guide

How to use Cybernetic City Grid

Overview

The Cybernetic City Grid palette (#2) masterfully blends vibrant, electric hues with deep, foundational darks and cool grays, embodying a futuristic urban landscape. It features a striking neon green (#00FF00), a deep royal blue (#0000CD), and an enigmatic blue-violet (#8A2BE2), all anchored by a metallic silver-gray (#C0C0C0) and a profound dark charcoal (#1C1C1C). This palette provides a dynamic visual language for designers and developers seeking to evoke a high-tech city's digital core, where sharp lines and electric pulses define the environment. It's energetic, bold, and highly adaptable for cutting-edge projects.

Best used for

Sci-fi film titles and promotional materials
Modern architectural visualizations
Urban-themed video game environments
Tech company branding and digital campaigns
Event graphics for music festivals or tech expos
Fashion and apparel designs with a futuristic edge

Suggested color roles

primary

Use #00FF00 (Neon Green) for key calls-to-action, active indicators, or data points that require immediate attention.

secondary

Apply #0000CD (Royal Blue) for important headings, navigation elements, or to establish a deep, stable visual anchor.

accent

Reserve #8A2BE2 (Blue-Violet) for unique highlights, interactive elements, or to add a distinctive, mysterious glow.

background

Utilize #1C1C1C (Dark Charcoal) as the primary dark canvas, providing a solid, deep base that allows the vibrant colors to pop.

text

Pair #C0C0C0 (Metallic Silver) or #00FF00 (Neon Green) for headings; use white for general body text on dark backgrounds.

Accessibility notes

Ensure strong contrast for text: #C0C0C0 on #1C1C1C is generally good, but check #00FF00 or #8A2BE2 on #1C1C1C for smaller text.
Avoid using #0000CD and #8A2BE2 for critical information that relies solely on color differentiation, due to their similar dark values.
Use #1C1C1C as a background for lighter text colors like #C0C0C0 or white to ensure high readability.
Be mindful of color blindness; supplement color cues with icons or patterns for important UI elements.

Recommended combinations

Digital Skyline

A dark background with green for digital lines and blue for structural highlights, mimicking a city at night.

#1C1C1C · #00FF00 · #0000CD

Data Stream

Use for dashboards, with the dark base, violet for data emphasis, and silver for metrics.

#1C1C1C · #8A2BE2 · #C0C0C0

Urban Pulse

Combine these vibrant hues for dynamic transitions, energy indicators, or abstract art.

#00FF00 · #0000CD · #8A2BE2

CSS variables

:root {
  --cybernetic-city-grid-2-1: #00FF00;
  --cybernetic-city-grid-2-2: #0000CD;
  --cybernetic-city-grid-2-3: #8A2BE2;
  --cybernetic-city-grid-2-4: #C0C0C0;
  --cybernetic-city-grid-2-5: #1C1C1C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cybernetic-city-grid-2": {
        1: "#00FF00",
        2: "#0000CD",
        3: "#8A2BE2",
        4: "#C0C0C0",
        5: "#1C1C1C",
      }
    }
  }
}

Hex values

Color 1#00FF00

Color 2#0000CD

Color 3#8A2BE2

Color 4#C0C0C0

Color 5#1C1C1C

Accessibility

Contrast checker

8.1:1AAA

4.3:1AA18

1.3:1Fail

12.4:1AAA

8.1:1AAA

1.9:1Fail

6.1:1AA

1.5:1Fail