Palette

Abstract Grid Pattern

A bold, high-contrast monochrome scheme playing with deep blacks, mid-grays, and crisp whites.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Abstract Grid Pattern 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 Abstract Grid Pattern.

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

Data visualization

#000000#36454F#808080#D3D3D3#FFFFFF

Palette guide

How to use Abstract Grid Pattern

Overview

The Abstract Grid Pattern palette is a bold, high-contrast monochrome scheme designed for minimalist and modern aesthetics. Featuring pure Black (#000000), a deep Charcoal Gray (#36454F), a balanced Medium Gray (#808080), a light Silver Gray (#D3D3D3), and crisp White (#FFFFFF), this collection offers striking clarity and timeless sophistication. Designers and developers can leverage these foundational hues to create clean user interfaces, elegant branding, or impactful editorial layouts. Its focus on strong contrast and subtle tonal shifts makes it ideal for projects that aim for a refined, understated yet powerful visual presence, ensuring excellent readability and a distinctly contemporary feel across all applications.

Best used for

Minimalist website and app UI/UX
Modern corporate branding and logos
High-contrast editorial layouts and print media
Abstract photography and digital art backdrops
Architectural visualization and interior design
Data visualization requiring clarity and precision

Suggested color roles

primary

#000000 (Black) - Use this pure black for dominant text, strong outlines, or as a powerful background to create high impact and define structure.

secondary

#36454F (Charcoal Gray) - An excellent choice for secondary text, subtle shadows, or background elements that require depth without being stark black.

accent

#FFFFFF (White) - Essential for crisp backgrounds, primary content areas, or as a strong contrasting highlight against darker tones to ensure clarity.

background

Utilize #FFFFFF (White) for clean, expansive canvases or #000000 (Black) for dramatic, sophisticated backdrops that make lighter elements pop.

text

For optimal readability, use #000000 (Black) or #36454F (Charcoal Gray) on lighter backgrounds, and #FFFFFF (White) or #D3D3D3 (Silver Gray) on darker backgrounds.

Accessibility notes

The high contrast between black and white is generally excellent for accessibility, but ensure adequate contrast for gray text on gray backgrounds.
Always verify contrast ratios for all text and interactive elements to meet WCAG AA or AAA standards, especially with mid-tones like #808080.
Ensure interactive elements are clearly distinguishable, perhaps by using borders or hover states, as color alone offers limited cues in monochrome.
Avoid using #D3D3D3 (Silver Gray) for small text on a white background, as it may lack sufficient contrast for readability.

Recommended combinations

Classic Contrast

Fundamental for high-readability text, strong headings, and clean UI components, providing maximum clarity.

#000000 · #FFFFFF · #36454F

Subtle Depth

Ideal for creating subtle visual hierarchy, background layers, or ghost buttons, offering gentle tonal variation.

#36454F · #808080 · #D3D3D3

Minimalist Grid

Perfect for minimalist layouts, grid lines, or dividing elements where clean separation and structure are paramount.

#FFFFFF · #000000 · #808080

CSS variables

:root {
  --abstract-grid-pattern-1: #000000;
  --abstract-grid-pattern-2: #36454F;
  --abstract-grid-pattern-3: #808080;
  --abstract-grid-pattern-4: #D3D3D3;
  --abstract-grid-pattern-5: #FFFFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abstract-grid-pattern": {
        1: "#000000",
        2: "#36454F",
        3: "#808080",
        4: "#D3D3D3",
        5: "#FFFFFF",
      }
    }
  }
}

Hex values

Color 1#000000

Color 2#36454F

Color 3#808080

Color 4#D3D3D3

Color 5#FFFFFF

Accessibility

Contrast checker

2.1:1Fail

5.3:1AA

14:1AAA

21:1AAA

2.1:1Fail

2.5:1Fail

6.6:1AA

9.9:1AAA

5.3:1AA

2.5:1Fail

2.6:1Fail

3.9:1AA18

14:1AAA

6.6:1AA

2.6:1Fail

1.5:1Fail

21:1AAA

9.9:1AAA

3.9:1AA18

1.5:1Fail

Similar palettes

More like Abstract Grid Pattern

View all monochrome

Monochrome Ink Wash

Monochrome Linearity

Minimalist Urban Echo

Art Gallery Minimal

City Grid Graphite

City Loft Grey