Greyscale conversion, and the two colours that become one grey

What actually happens

Greyscale conversion maps colour to lightness, and lightness is a single number, so any two colours of similar lightness converge on the same grey no matter how different they looked. A mid red and a mid green sit at almost the same lightness, so a chart that distinguished two series by red and green becomes a chart with two identical series. This is not an edge case: most internal documents are printed on monochrome devices, and a document that only works in colour is a document that mostly does not work. The fix is not to avoid colour, it is to make sure colour is never the only thing carrying a distinction.

Where this API stands on colour

This API renders HTML to PDF, and the colour in the output is the colour in your CSS, which is RGB. There is no colour-space option, no CMYK mode, no ICC embedding, no ink-limit control and no greyscale conversion. Two options touch colour at all and neither changes a colour value: print_background, which is on by default here and off by default in most renderers, decides whether backgrounds and background images are painted at all, and media decides whether your print stylesheet applies. Anything that converts this document into inks happens after the render, in a tool you choose, and that is where the decisions on this page are enforced.

The decisions that avoid it

Reasons rather than a description of the code. Each of these is a choice with a wrong answer, and the wrong answer usually looks correct on a screen.

• Carry every distinction with a second, non-colour signal: a pattern, a dash, a marker shape, a border weight, or a label.
• Where two things must be told apart by tone alone, separate them by lightness rather than by hue. Two colours are distinguishable in greyscale if and only if their lightness differs.
• Design in greyscale first for anything that will mostly be printed monochrome, then add colour as reinforcement. It is much harder to remove colour from a design than to add it.
• Do not rely on a light coloured tint to indicate a state. It converts to a pale grey that is easily mistaken for the paper.
• Check the actual conversion rather than reasoning about it. Perceived lightness is not something people estimate accurately from a screen.
• Where a document is genuinely colour-critical, say so on it, so somebody about to photocopy it knows what they will lose.

In the stylesheet

Where the decision is expressible in CSS, this is what it looks like. Where it is not, the snippet says so rather than inventing a property.

/* Colours chosen so their lightness differs, not just their hue.
   Each also carries a second signal so the distinction survives
   conversion entirely. */

.series-a {
  --line: #1d1812;                 /* dark */
  stroke: var(--line);
  stroke-dasharray: none;          /* solid */
}
.series-b {
  --line: #8a8578;                 /* clearly lighter */
  stroke: var(--line);
  stroke-dasharray: 6 4;           /* and dashed */
}

/* A quick way to see what a monochrome device will do, in the
   browser, before printing anything. */
.greyscale-preview { filter: grayscale(1); }

What people do instead

Picking series colours from a palette because they look distinct. Distinctness on screen is a hue judgement and greyscale conversion throws hue away. Two colours that look completely different can be the same grey, and the palette gives you no warning.

How to find out rather than assume

Apply a greyscale filter in the browser and look at the result, then photocopy an actual print because a copier's conversion is harsher than the browser's. Anything you can no longer tell apart in either is carrying its meaning in colour alone.

Frequently asked

Related colour and ink topics

The topics that cause each other, then the rest of the same group.