Palette

Monochrome Paper Cuts

A stark yet sophisticated monochrome study, exploring the interplay of light and shadow.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Monochrome Paper Cuts 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 Paper Cuts.

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

Data visualization

#000000#333333#666666#999999#CCCCCC

Palette guide

How to use Monochrome Paper Cuts

Overview

The Monochrome Paper Cuts palette offers a stark yet sophisticated monochrome study, exploring the interplay of light and shadow. Featuring pure black #000000, deep grey #333333, versatile #666666, lighter #999999, and soft #CCCCCC, this collection creates a strong visual hierarchy. It's an excellent resource for designers and developers aiming for a modern, minimalist aesthetic that emphasizes clean lines and sharp contrasts. The palette evokes a sense of crafted precision, making it ideal for projects where clarity, structure, and a bold yet refined visual impact are desired.

Best used for

Graphic design and print layouts
Minimalist branding and logos
Art portfolios and exhibitions
Architectural rendering visuals
Clean web and app interfaces
Editorial design with strong typography

Suggested color roles

primary

Utilize #666666 as a versatile primary color for main content or subtle 'shadow' effects, providing a balanced mid-tone.

secondary

Apply #333333 for deeper supporting elements, subheadings, or to create a sense of depth and layering.

accent

Employ #000000 for sharp accents, critical calls-to-action, or crisp outlines, mimicking precise paper cuts.

background

Choose #CCCCCC as a light, neutral background, reminiscent of fine paper, providing a clean canvas.

text

Use #000000 for body text on lighter backgrounds to ensure exceptional readability and a crisp, professional finish.

Accessibility notes

Ensure #000000 text on #CCCCCC backgrounds meets WCAG AA/AAA contrast ratios for optimal legibility.
Be cautious when using #999999 for small text on #CCCCCC, as it may not provide sufficient contrast.
Provide clear visual focus indicators for interactive elements using #000000 or #333333.
Use sufficient line height and letter spacing for text to enhance readability, especially with stark contrasts.

Recommended combinations

Sharp Contrast

Ideal for core content, providing excellent readability with a light background, pure black text, and a mid-tone for hierarchy.

#CCCCCC · #000000 · #666666

Layered Depth

Creates a sophisticated, layered effect for UI elements or graphic compositions, mimicking overlapping 'paper cuts'.

#999999 · #666666 · #333333

Subtle Texture

Suitable for creating a dark base with lighter elements, adding subtle texture and visual interest to a section.

#333333 · #999999 · #CCCCCC

CSS variables

:root {
  --monochrome-paper-cuts-1: #000000;
  --monochrome-paper-cuts-2: #333333;
  --monochrome-paper-cuts-3: #666666;
  --monochrome-paper-cuts-4: #999999;
  --monochrome-paper-cuts-5: #CCCCCC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "monochrome-paper-cuts": {
        1: "#000000",
        2: "#333333",
        3: "#666666",
        4: "#999999",
        5: "#CCCCCC",
      }
    }
  }
}

Hex values

Color 1#000000

Color 2#333333

Color 3#666666

Color 4#999999

Color 5#CCCCCC

Accessibility

Contrast checker

1.7:1Fail

3.7:1AA18

7.4:1AAA

13.1:1AAA

1.7:1Fail

2.2:1Fail

4.4:1AA18

7.9:1AAA

3.7:1AA18

2.2:1Fail

2:1Fail

3.6:1AA18

7.4:1AAA

4.4:1AA18

2:1Fail

1.8:1Fail

13.1:1AAA

7.9:1AAA

3.6:1AA18

1.8:1Fail

Similar palettes

More like Monochrome Paper Cuts

Architectural Grid Hues

Arctic Explorer Suit