Color in Document Design

There is a version of this chapter that would spend thirty pages on color wheels, complementary pairs, split triads, and analogous harmonies. That chapter exists in many design books, and it is not without value. But it is the wrong chapter for this book, because the challenge of color in document design is not primarily one of selection. It is one of restraint. Most documents — books, reports, academic papers, most professional publications of any kind — use color so sparingly that the question of which colors to combine rarely arises. The question is simpler and harder: do you need color at all, and if so, where?

This chapter covers the theory you need to make those decisions well, then turns quickly to the practical question of how color functions in typeset documents — as a signal, as a navigational aid, as a way of reinforcing hierarchy — and how to use it in CSS for both screen and print output.

· · ·

Color theory essentials Hue, saturation, and value

Color has three independent properties, and understanding them separately is the most important thing you can do to work with color more confidently. The three are hue, saturation, and value — and they correspond roughly to what color something is, how intense that color is, and how light or dark it is.

Hue is the property most people mean when they say "color" — it is the quality that makes something red rather than blue, orange rather than green. In CSS, hue is expressed as a degree on a color wheel: 0° is red, 120° is green, 240° is blue, and all the other hues fall between them. Hue alone, without the other two properties, says little about whether a color will work in a design.

Saturation is the intensity or purity of a color — the degree to which it is a vivid, fully chromatic hue rather than a grayed or muted version of it. A fully saturated red is vivid and attention-demanding. The same hue at low saturation becomes a dusty rose, a terracotta, a blush — colors that sit quietly in a composition rather than asserting themselves. For document design, reduced saturation is almost always more appropriate than full saturation. Vivid colors fight with text; muted ones support it.

Value, also called lightness or luminosity, is how light or dark a color is, independent of its hue and saturation. A light yellow and a light purple may share a similar value even though their hues differ enormously. As covered in Chapter 2, value is the most important property for legibility — it determines how much tonal contrast exists between a text color and its background. Two colors with similar values will have poor contrast regardless of how different their hues are.

In CSS, the hsl() function makes these three properties explicit and manipulable: hsl(hue, saturation%, lightness%). Working in hsl() rather than hex codes or rgb() gives you direct control over each dimension, which makes it much easier to create consistent, related color palettes — varying only saturation to create muted and vivid versions of the same hue, or varying only lightness to create a range of tints and shades.¹

· · ·

Restraint Why less is more in typeset documents

There is a temptation, particularly when working in a medium as flexible as CSS, to use color liberally — to color headings, to introduce background tints behind sections, to use multiple accent colors for different categories of content. This temptation should be firmly resisted in document design. Not because color is bad, but because the primary job of a typeset document is to be read, and color that is not doing a specific job — signaling a relationship, marking a level of hierarchy, guiding the eye to something important — is color that is competing with the text.

Think of it this way. The page has a limited budget of visual attention. Every colored element draws from that budget. If the budget is spent on decorative color, there is less available for the things that actually need attention — the hierarchy of headings, the structure of sections, the location of key information. Restraint with color is not timidity. It is a form of respect for the reader's attention.

The most effective color palettes for document design are built around near-neutrals: off-whites, warm grays, dark browns or charcoals rather than pure black. These colors carry almost no hue information but a great deal of value information — they establish the tonal structure of the page without introducing the associative weight of a specific hue. A page built this way typically uses a near-neutral background, a dark text color softened slightly from pure black, quieter secondary tones for labels and captions, and a single restrained accent used only where it is doing specific work: markers, dividers, callouts, or navigation cues.

This is a complete color palette for a book. One background, one body text color, two or three supporting tones for secondary text, one accent. That is enough. Any more and the palette begins to compete with itself.

· · ·

Functional color Hierarchy, emphasis, and wayfinding

When color is used in documents, it should be doing one of three things: reinforcing hierarchy, providing emphasis, or aiding wayfinding. These are functional roles. If a colored element is not performing one of these functions — if it is colored because it looks nice, or because the brand guidelines specify it, or because the designer wanted to add some visual interest — it is probably doing more harm than good.

Hierarchy is the most common function. A colored heading signals a level of the document's structure. A colored running header helps the reader locate their position in a long document. Color used for hierarchy should be consistent — the same color should always mean the same structural level, and that meaning should be immediately learnable. If chapter headings are in a particular color, every chapter heading should be in that color, and nothing else should be.

Emphasis is the most commonly misused function. Color for emphasis works on the same principle as bold or italic — it signals that something is more important than the surrounding text. And like bold and italic, it loses its power when used too frequently. A single sentence colored for emphasis in a page of black text is unmissable. Ten colored sentences on the same page are just a noisy page. If you find yourself using color emphasis frequently, it is a sign that the hierarchy of the document has broken down and needs structural attention, not more colored highlights.

Wayfinding is color used to help the reader navigate a long or complex document. Chapter tabs in a reference book, color-coded section headers in a technical manual, colored rules that indicate the level of a heading in a multi-level document — these are wayfinding applications. They are most useful in documents where the reader is likely to move non-linearly, jumping between sections rather than reading from cover to cover. For a linear book or report, wayfinding color is usually unnecessary.

· · ·

Color in CSS for print What works and what doesn't

Designing for print via Paged.js introduces considerations that do not exist in screen-only work. Color that looks consistent and controlled on screen can behave differently in print, for reasons that are worth understanding before you commit to a color scheme for a document intended to be printed.

The most important practical consideration is the difference between screen color (RGB, additive) and print color (CMYK, subtractive). Screen colors are created by emitting light; print colors are created by absorbing it. Colors that look identical on screen can print differently, particularly vivid saturated colors and colors near the edges of the sRGB gamut. For documents printed commercially, some printers and workflows will convert your RGB colors to CMYK at the output stage, and the conversion is not always predictable — certain vivid blues and greens in particular can shift noticeably.

The practical response is straightforward: for documents intended for professional printing, work with muted, desaturated colors rather than vivid ones. Desaturated colors convert from RGB to CMYK more predictably and reliably than vivid ones. The near-neutral palette described earlier in this chapter is not just an aesthetic preference — it is also more technically robust for print output.

For documents printed on desktop printers, or distributed digitally as PDFs for screen reading, this consideration is less critical. Screen PDFs will render in RGB as designed. Desktop printer output varies so widely by device that precise color prediction is not possible in any case.

In CSS, print-specific color adjustments can be made using the @media print rule or, within a Paged.js document, by targeting the @page context. This allows you to define one color scheme for screen preview and a slightly adjusted one for print output — useful if your screen palette includes any vivid colors that you want to desaturate slightly for print.²

One specific issue deserves attention: background colors in print. By default, most browsers and Paged.js suppress background colors and images when printing, to save ink. If your document uses background colors as design elements — tinted section headers, colored callout boxes — you will need to add the CSS property print-color-adjust: exact (or its prefixed variant -webkit-print-color-adjust: exact) to ensure those backgrounds are rendered in the print output. Without it, your carefully designed tinted boxes will appear as plain white rectangles in the PDF.

· · ·

Building a document color palette A practical method

With the theory and the constraints in place, here is a practical method for building a color palette for a typeset document — one that is simple enough to execute in an afternoon and robust enough to produce professional results.

Start with the background. For most documents, this is a near-white: either pure white, or a very slightly warm or cool off-white. Pure white is clinical and high-contrast; a warm off-white is gentler and more appropriate for long-form reading. The background color should have a lightness of 95% or above in hsl(). Keep its saturation below 10% — just enough to give it a temperature, not enough to call it a color.

Then establish the body text color. This should be dark but not pure black. Pure black on white is the highest possible contrast, which sounds like a good thing but can produce a harshness that makes long passages tiring to read. A very dark warm gray — something around hsl(30, 10%, 12%) — softens this slightly while maintaining more than sufficient contrast for legibility. If your background has a warm temperature, match it in the text color by using a slightly warm hue.

Add two or three supporting tones for secondary text, labels, captions, and rules. These should be variations of the same hue as the body text, varying in lightness — roughly 30%, 55%, and 80% lightness covering the range from dark secondary to near-invisible rule. Keep the saturation consistent with the body text color.

Finally, choose one accent color. This is the only place where a definite hue enters the palette. Choose it based on the character of the document — a warm amber for something literary, a cool slate blue for something technical, a quiet sage green for something environmental. Keep its saturation moderate: vivid enough to be clearly different from the neutrals, not so vivid that it overwhelms them. Test it as a small element against the body text to ensure it has sufficient contrast.

That is your palette. Resist the urge to add a second accent. If the first accent is not doing everything you need color to do, the problem is usually structural — the document needs better hierarchy, not more color.

· · ·

Color is the last of the fundamental design topics, and with it Part One is complete. We have covered perception, form, contrast, composition, the organizing principles, and now color. Everything that follows — the chapters on typography, grid, layout, and Paged.js — builds on these foundations. The principles do not disappear; they become the lens through which every technical decision is evaluated.

Part Two begins with type. Not with CSS properties and font stacks — those come a little later — but with the letterform itself: what it is, how it works, and why it matters that you understand it before you start setting it on a page.