Palette

Cybernetic Gridscape

A high-contrast palette with electric hues, capturing the essence of a digital urban future.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#00FFFF#00FF00#333333#000000#BF00FF

Palette guide

How to use Cybernetic Gridscape

Overview

The Cybernetic Gridscape palette delivers a high-contrast, electric aesthetic, perfectly capturing the essence of a digital urban future. It grounds vibrant neon cyan (#00FFFF) and intense green (#00FF00) against a stark foundation of pure black (#000000) and deep charcoal (#333333). A powerful electric purple (#BF00FF) adds another layer of futuristic energy. This palette is designed for designers and developers to create bold, dynamic, and modern visual experiences, evoking glowing data streams, interconnected networks, and the sleek, high-tech vibe of a digital grid.

Best used for

Sci-fi game UIs and futuristic maps
Digital art and abstract motion graphics
Tech conference branding and presentations
Dark mode interfaces for creative tools
Esports team logos and streaming overlays
Fashion campaigns with a modern, edgy appeal

Suggested color roles

primary

Use #00FFFF (Electric Cyan) for main interactive elements, key highlights, or branding that needs to convey precision and digital clarity.

secondary

Apply #00FF00 (Vibrant Green) for secondary calls-to-action, success indicators, or to delineate different data streams.

accent

Reserve #BF00FF (Electric Purple) for warnings, critical alerts, or dramatic visual flair, providing a strong, energetic pop.

background

Utilize #000000 (Pure Black) as the foundational dark canvas, offering infinite depth and making the neon colors truly burst.

text

Pair #00FFFF (Electric Cyan) or #00FF00 (Vibrant Green) for headings; use white for general body text on dark backgrounds.

Accessibility notes

Ensure high contrast for text; #00FFFF and #00FF00 on #000000 are generally good. Check #BF00FF on #000000 for smaller text.
Avoid using #BF00FF and #00FF00 in close proximity for critical information if color is the sole differentiator, due to potential for color blindness issues.
Pure black #000000 is an ideal background for light text, like #00FFFF or white, ensuring optimal readability.
For critical information, always provide alternative visual cues (icons, underlines) in addition to color.

Recommended combinations

Digital Grid

A dark background with charcoal for subtle grid lines and electric cyan for active connections or data flow.

#000000 · #333333 · #00FFFF

Neon Network

Combine these three neons for dynamic animations, loading indicators, or energetic transitions, representing network activity.

#00FFFF · #00FF00 · #BF00FF

Future Console

Use for UI elements, with black as the base, green for display elements, and purple for interactive controls.

#000000 · #00FF00 · #BF00FF

CSS variables

:root {
  --cybernetic-gridscape-1: #00FFFF;
  --cybernetic-gridscape-2: #00FF00;
  --cybernetic-gridscape-3: #333333;
  --cybernetic-gridscape-4: #000000;
  --cybernetic-gridscape-5: #BF00FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cybernetic-gridscape": {
        1: "#00FFFF",
        2: "#00FF00",
        3: "#333333",
        4: "#000000",
        5: "#BF00FF",
      }
    }
  }
}

Hex values

Color 1#00FFFF

Color 2#00FF00

Color 3#333333

Color 4#000000

Color 5#BF00FF

Accessibility

Contrast checker

1.1:1Fail

10.1:1AAA

16.7:1AAA

3.6:1AA18

1.1:1Fail

9.2:1AAA

15.3:1AAA

3.3:1AA18

10.1:1AAA

9.2:1AAA

1.7:1Fail

2.8:1Fail

16.7:1AAA

15.3:1AAA

1.7:1Fail

4.7:1AA

3.6:1AA18

3.3:1AA18

2.8:1Fail

4.7:1AA

Similar palettes

More like Cybernetic Gridscape

View all vibrant

Cybernetic Vista Glow