Palette

Monochrome Pixel Flow

A dynamic blend of greyscale with an electric pop, reminiscent of digital screens and energetic code.

monochromeenergetic5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Monochrome Pixel Flow 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 Monochrome Pixel Flow.

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

Data visualization

#1C1C1C#36454F#708090#00FF00#F8F8F8

Palette guide

How to use Monochrome Pixel Flow

Overview

The Monochrome Pixel Flow palette offers a dynamic blend of greyscale with an electric pop of #00FF00, reminiscent of digital screens and energetic code. Featuring deep #1C1C1C, cool dark #36454F, mid-tone #708090, and bright #F8F8F8, this collection captures a modern tech aesthetic. Designers and developers will find it invaluable for creating engaging and futuristic digital experiences. The vibrant green accent provides a compelling focal point against the sophisticated cool greys, making it perfect for interfaces that demand attention and convey innovation and high energy.

Best used for

Tech branding and startups
Gaming interfaces and dashboards
Futuristic UI/UX design
Digital product design
Energetic marketing materials
Code editors and developer tools

Suggested color roles

primary

Utilize #36454F as a dark, cool primary base for main panels or content areas, conveying a tech-inspired feel.

secondary

Apply #708090 for lighter, supporting cool grey elements, subheadings, or subtle background textures.

accent

Employ #00FF00 as a vibrant, energetic highlight for interactive elements, status indicators, or key calls-to-action.

background

Choose #F8F8F8 as a clean, bright canvas, allowing the greys and neon accent to stand out sharply.

text

Opt for #1C1C1C for body text on lighter backgrounds to ensure clear contrast and a modern, crisp appearance.

Accessibility notes

Ensure #1C1C1C text on #F8F8F8 backgrounds meets WCAG AA/AAA contrast ratios.
The vibrant #00FF00 should be used judiciously for small interactive elements or icons, as large areas can be intense.
Avoid using #708090 for small text on #F8F8F8 due to potential low contrast.
Provide clear hover and focus states, possibly using #00FF00, for all interactive components.

Recommended combinations

Tech Contrast

Excellent for high-impact landing pages or dashboards, combining a bright background, dark text, and a vivid accent.

#F8F8F8 · #1C1C1C · #00FF00

Digital Gradient

Creates a modern, layered effect for sections or cards, with a dark base, cool grey mid-tone, and a neon highlight.

#36454F · #708090 · #00FF00

Dark Mode Accent

Forms a strong dark background with light text and a vibrant green accent, ideal for dark UI themes or gaming interfaces.

#1C1C1C · #F8F8F8 · #00FF00

CSS variables

:root {
  --monochrome-pixel-flow-1: #1C1C1C;
  --monochrome-pixel-flow-2: #36454F;
  --monochrome-pixel-flow-3: #708090;
  --monochrome-pixel-flow-4: #00FF00;
  --monochrome-pixel-flow-5: #F8F8F8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "monochrome-pixel-flow": {
        1: "#1C1C1C",
        2: "#36454F",
        3: "#708090",
        4: "#00FF00",
        5: "#F8F8F8",
      }
    }
  }
}

Hex values

Color 1#1C1C1C

Color 2#36454F

Color 3#708090

Color 4#00FF00

Color 5#F8F8F8

Accessibility

Contrast checker

1.7:1Fail

4.2:1AA18

12.4:1AAA

16:1AAA

1.7:1Fail

2.4:1Fail

7.2:1AAA

9.3:1AAA

4.2:1AA18

2.4:1Fail

3:1Fail

3.8:1AA18