Palette

Graphic Ink Contrast

A stark and powerful visual statement, playing with extreme contrast and the absence of color.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Graphic Ink Contrast 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 Graphic Ink Contrast.

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

Data visualization

#000000#333333#666666#999999#FFFFFF

Palette guide

How to use Graphic Ink Contrast

Overview

The Graphic Ink Contrast palette is a masterclass in monochrome design, delivering a stark and powerful visual statement through extreme contrast. Comprising pure #000000 black, crisp #FFFFFF white, and perfectly balanced grays like #333333, #666666, and #999999, this palette is ideal for projects where clarity, minimalism, and strong visual hierarchy are paramount. It strips away color distractions to focus on form, typography, and content. Designers can leverage this timeless collection to create sophisticated, modern, and highly readable interfaces, print materials, or branding that exudes confidence and precision.

Best used for

Minimalist website design
High-contrast digital interfaces
Print publications and editorial layouts
Corporate branding and logos
Photography portfolios
Technical documentation and UI

Suggested color roles

primary

Use #000000 for dominant text, primary headings, or bold graphic elements, conveying strength and finality.

secondary

Apply #333333 for subheadings, secondary text, or subtle background variations to add depth without losing contrast.

accent

Employ #999999 for subtle UI elements, disabled states, or divider lines, providing a soft touch without color.

background

Utilize #FFFFFF for clean, bright backgrounds that maximize readability and create a sense of spaciousness.

text

For body text, #000000 provides the highest contrast on #FFFFFF. For secondary text on lighter grey backgrounds, #333333 or #666666 works well.

Accessibility notes

The #000000 on #FFFFFF combination offers maximum contrast, ensuring excellent readability for all users.
Ensure sufficient contrast when using #666666 or #999999 for text on any background other than pure black or white.
Avoid using #999999 for small text on #FFFFFF as it might not meet WCAG AA contrast standards.
Always test color pairings for text and interactive elements to ensure accessibility across the grayscale spectrum.

Recommended combinations

Classic Readability

Optimal for body text on a white background with strong headings and secondary information.

#FFFFFF · #000000 · #333333

Subtle Depth

Ideal for layering background elements or subtle gradients, adding dimension without color.

#333333 · #666666 · #999999

Stark UI

Use #000000 for panels, #FFFFFF for content, and #999999 for dividers or disabled states.

#000000 · #FFFFFF · #999999

CSS variables

:root {
  --graphic-ink-contrast-1: #000000;
  --graphic-ink-contrast-2: #333333;
  --graphic-ink-contrast-3: #666666;
  --graphic-ink-contrast-4: #999999;
  --graphic-ink-contrast-5: #FFFFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "graphic-ink-contrast": {
        1: "#000000",
        2: "#333333",
        3: "#666666",
        4: "#999999",
        5: "#FFFFFF",
      }
    }
  }
}

Hex values

Color 1#000000

Color 2#333333

Color 3#666666

Color 4#999999

Color 5#FFFFFF

Accessibility

Contrast checker

1.7:1Fail

3.7:1AA18

7.4:1AAA

21:1AAA

1.7:1Fail

2.2:1Fail

4.4:1AA18

12.6:1AAA

3.7:1AA18

2.2:1Fail

2:1Fail

5.7:1AA

7.4:1AAA

4.4:1AA18

2:1Fail

2.8:1Fail

21:1AAA

12.6:1AAA

5.7:1AA

2.8:1Fail

Similar palettes

More like Graphic Ink Contrast

View all monochrome

Monochrome Paper Cuts

Shadow Scale Study

Arctic Explorer Suit

Basalt Stream Pebble

Charcoal Graphite Tones

Classic Greyscale Frame