What colors are in the Monochrome Paper palette?

The Monochrome Paper palette has 5 colors: #141414, #4A4A4A, #8C8C8C, #CFCFCF, #F7F7F5.

Where can I use this palette?

It's a Neutral palette — well suited to dashboards, minimal ui, corporate sites, dark-mode surfaces.

Is the Monochrome Paper palette accessible?

Its darkest and lightest colors have a contrast ratio of 17.17:1. 5 color pairs in it meet WCAG AA for text.

How do I use this palette in CSS?

Copy the CSS custom properties (:root variables) from the Export section, or grab any single hex with one click.

Can I export the Monochrome Paper palette?

Yes — export to CSS, SCSS, Tailwind config or JSON, or copy all hex codes at once.

Text #141414 Graphite Secondary #4A4A4A Outer Space Accent #8C8C8C Pewter Primary #CFCFCF Light Gray Surface #F7F7F5 White Smoke

Monochrome Paper

Minimal Portfolios & editorial 5 colors

One ink, one paper, three greys between. When there is no color to lean on, the whole design has to be carried by type and space — which is the point.

Open in generator All palettes

Text Graphite — #141414

Secondary Outer Space — #4A4A4A

Accent Pewter — #8C8C8C

Primary Light Gray — #CFCFCF

Surface White Smoke — #F7F7F5

Contrast matrix

Text on Surface 17.17 AAA

Primary on Surface 1.45 Fail

Text on Secondary 2.08 Fail

Surface on Primary 1.45 Fail

Accent on Text 5.48 AA

Ratios are WCAG 2 contrast between the roles as assigned above. AA needs 4.5:1 for body text, 3:1 for large text.

Export tokens

:root {
  --text: #141414;
  --secondary: #4A4A4A;
  --accent: #8C8C8C;
  --primary: #CFCFCF;
  --surface: #F7F7F5;
}

$monochrome-paper-text: #141414;
$monochrome-paper-secondary: #4A4A4A;
$monochrome-paper-accent: #8C8C8C;
$monochrome-paper-primary: #CFCFCF;
$monochrome-paper-surface: #F7F7F5;

// tailwind.config.js — theme.extend.colors
colors: {
  'monochrome-paper': {
    'text': '#141414',
    'secondary': '#4A4A4A',
    'accent': '#8C8C8C',
    'primary': '#CFCFCF',
    'surface': '#F7F7F5',
  },
}

{
    "monochrome-paper": {
        "text": {
            "value": "#141414",
            "type": "color"
        },
        "secondary": {
            "value": "#4A4A4A",
            "type": "color"
        },
        "accent": {
            "value": "#8C8C8C",
            "type": "color"
        },
        "primary": {
            "value": "#CFCFCF",
            "type": "color"
        },
        "surface": {
            "value": "#F7F7F5",
            "type": "color"
        }
    }
}

{
    "text": "#141414",
    "secondary": "#4A4A4A",
    "accent": "#8C8C8C",
    "primary": "#CFCFCF",
    "surface": "#F7F7F5"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#141414
#4A4A4A
#8C8C8C
#CFCFCF
#F7F7F5

Download for Procreate

How the roles work

SurfaceThe lightest color — page and card backgrounds.

TextThe darkest color — body text and high-contrast UI.

PrimaryThe most chromatic middle — buttons, links, the one color that pushes.

AccentThe second most chromatic — badges, highlights, states.

SecondaryEverything else — fills, borders, supporting surfaces.

Monochrome Paper

Contrast matrix

Export tokens

How the roles work

Related palettes