Palette

Binary Grid Hues

A crisp, monochromatic palette with a neon green accent, representing digital data grids and circuit boards.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Binary Grid Hues 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 Binary Grid Hues.

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

Data visualization

#222222#666666#BBBBBB#00FF00#000000

Palette guide

How to use Binary Grid Hues

Overview

The Binary Grid Hues palette delivers a crisp, modern aesthetic built on a strong monochromatic foundation with a striking neon accent. Featuring deep blacks like #000000 and #222222, alongside versatile greys such as #666666 and #BBBBBB, it's sharply contrasted by the vibrant #00FF00 (Lime). This palette is perfect for designers creating tech-focused, digital, or minimalist projects that require a sleek, futuristic, and highly functional look. It effectively represents data grids and circuit boards, offering a precise and impactful visual language for modern interfaces.

Best used for

Tech and software company branding
Gaming interfaces and streaming overlays
Minimalist website designs
Data visualization and dashboards
Cyber security platforms
Modern industrial product design

Suggested color roles

primary

Use #000000 as the foundational dark for backgrounds or primary containers, establishing a deep, sophisticated digital canvas.

secondary

Employ #222222 for secondary backgrounds, panels, or large text blocks, offering a slightly softer dark tone.

accent

Apply #00FF00 for critical alerts, interactive elements, loading indicators, or key highlights, creating a vibrant, digital glow.

background

Choose #222222 or #000000 for a dark mode interface, providing an immersive and focused user experience.

text

For readability on dark backgrounds, use #BBBBBB for body text. For headings or important information, #00FF00 can be used sparingly.

Accessibility notes

Ensure #BBBBBB has excellent contrast when used for text on #222222 or #000000 backgrounds.
Use #00FF00 primarily for accents or large headings; its high saturation can be challenging for small body text.
Provide sufficient contrast for #666666 when used as text on #222222; consider increasing font size.
Clearly define interactive states with distinct color changes, especially with subtle grey variations.

Recommended combinations

Digital Dark

Ideal for code editors or terminal themes, providing a stark, high-contrast environment.

#000000 · #222222 · #00FF00

Cyber Glow

Perfect for UI highlights, progress bars, or interactive elements that need to pop.

#222222 · #666666 · #00FF00

Grid Contrast

Creates a data dashboard aesthetic, with clear hierarchy and a vibrant focus point.

#BBBBBB · #000000 · #00FF00

CSS variables

:root {
  --binary-grid-hues-1: #222222;
  --binary-grid-hues-2: #666666;
  --binary-grid-hues-3: #BBBBBB;
  --binary-grid-hues-4: #00FF00;
  --binary-grid-hues-5: #000000;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "binary-grid-hues": {
        1: "#222222",
        2: "#666666",
        3: "#BBBBBB",
        4: "#00FF00",
        5: "#000000",
      }
    }
  }
}

Hex values

Color 1#222222

Color 2#666666

Color 3#BBBBBB

Color 4#00FF00

Color 5#000000

Accessibility

Contrast checker

2.8:1Fail

8.3:1AAA

11.6:1AAA

1.3:1Fail

2.8:1Fail

3:1Fail

4.2:1AA18

3.7:1AA18

8.3:1AAA

3:1Fail

1.4:1Fail

10.9:1AAA

11.6:1AAA

4.2:1AA18

1.4:1Fail

15.3:1AAA

1.3:1Fail

3.7:1AA18

10.9:1AAA

15.3:1AAA

Similar palettes

More like Binary Grid Hues

View all monochrome

Minimalist Grid Tech

Abstract Ink Flow

Architectural Grid Hues

Charcoal Whisper Scale

City Loft Minimal

City Steel Gleam