From blank page to palette: choosing colors step by step

Short answer

A good palette doesn't start with a color wheel, but with a question: who is this for, where will it appear, and what should it make people feel? Before color, you decide the proportion of light, medium, and dark areas, because it's lightness differences, not hue, that carry readability and hierarchy. Onto this skeleton you add an anchor color, one or two colors that support it, and plenty of neutrals; at the end, the palette is converted to grayscale and tested against real content.

Step 1 — Reducing the brief to three questions

Every design job starts with a brief: a piece of text or a conversation that describes the work. A brief is often long and says almost nothing about color. The designer's first job is to reduce it to three questions.

The first question is audience: who will see the work? Their age, their expectations, what they're used to seeing in that field. The second question is context: where will the work appear? On a phone screen, in a store window, printed on newsprint, on a billboard in the sun? Every medium changes colors differently. The third question is tone: what should the work make people feel? Here it helps to pick three adjectives — for example, "warm, trustworthy, playful." More than three adjectives dilute each other.

Even when the brief suggests a color, you should read that as data, not as a constraint. When a client says "make it blue," sometimes they don't want blue itself but a feeling they associate with blue — calm, for example. The adjective list helps separate the two. A brand's long-term color strategy is a separate topic, covered in PZ-01.

Step 2 — The mood board

Once the adjectives are settled, a visual gathering stage follows. Photographs, textures, old packaging, shots from nature, street signs are brought together on a board. The goal isn't to find a design to copy, but to see which color relationships the adjectives actually live in.

A good board is examined for two things. The first is recurring color families: warm earth tones, cool blues, saturated fruit colors? The second, less noticed but more important, is its lightness structure: are the images mostly light and airy, dark and dense, or built from hard contrasts? Viewing the board in grayscale for a moment answers this second question immediately.

Step 3 — Value distribution first

This step answers the question on the lesson card: why is it a good idea to start choosing a palette with value distribution rather than with color?

Value is one of the three dimensions DT-01 defines: how close a color sits to black or to white. The part of our visual system that extracts shape, depth, and edges looks mainly at lightness differences. Neurobiologist Margaret Livingstone explains that the evolutionarily older, color-blind part of vision perceives brightness differences, motion, and depth, while the system that processes color and detail is newer. That's why value differences, more than anything else, determine what gets seen first in a design, what gets read, and what recedes.

So the first decision is how much of the page will be light, how much medium, and how much dark. For an airy piece, you might choose large light areas, a little medium tone, and very small dark accents; for a dense, serious piece, the reverse. The proportions are sketched on paper as three gray boxes. These boxes aren't color yet, but they are the palette's skeleton.

Starting from value also has a practical benefit: whatever hues you choose later, the hierarchy doesn't break. If a headline is placed in the dark value box, it will stand out whether it ends up navy or dark burgundy. Changing the hue lets you change the palette's mood without changing the skeleton. A well-known rule for sizing these areas, the 60-30-10 rule, is the subject of DT-12.

Step 4 — The anchor color

Once the skeleton is ready, the first real color is chosen: the anchor color. This is the color that carries the work's identity, the one viewers will remember. The adjective list and the mood board guide the choice; the value distribution says which value box it will sit in.

There are two traps when choosing an anchor color. The first is spreading it over too large an area: a saturated color tires the eye at large sizes and loses its effect. The second is judging it alone, on a white background. Josef Albers, who taught color courses at the Bauhaus and at Yale, built his 1963 book around exercises showing that a color is almost never seen in visual perception the way it physically is, because it changes according to the colors around it. The anchor color, too, can only be decided together with its neighbors.

Step 5 — Supporting colors and neutrals

Alongside the anchor color, you usually add one or two supporting colors. Supporting colors either soften the anchor or answer it. To soften it, you choose a color close to the anchor, from the same family; to answer it, a color far from it on the color wheel, but balanced with it in value and saturation. How geometric schemes guide this choice is covered in DT-10.

But most of the actual work is usually done by neutrals: a near-white background, a medium gray or beige, a near-black dark for text. Neutrals cover most of the page and let the anchor color breathe. Neutrals leaning slightly toward the anchor color, rather than pure black and pure white — a warm palette paired with a faintly creamy white and a dark leaning toward brown, for example — hold the palette together.

Step 6 — The grayscale test

Once the palette is built, it's placed on a real sample page or poster and converted to grayscale. The test answers two questions. Has the value skeleton drawn in Step 3 been preserved? Is the headline still the darkest or most contrasting area, does the background recede? And is there enough lightness difference between the text and the background?

If two colors turn into the same gray in grayscale, that's a warning sign. It means the eye will have to rely on hue alone to tell them apart; a reader with color vision deficiency, a black-and-white photocopy, or a phone screen in bright sunlight can erase that difference. The numerical measurement of text contrast is the subject of UX-06; the grayscale test, by contrast, shows the whole page's structure at a glance.

Example — the children's library reading festival

A district children's library wants a poster, social media graphics, and a printed brochure for its summer reading festival. The brief is reduced to three questions. Audience: children ages six to twelve and their families. Context: a poster at the library entrance, a phone screen, and a brochure printed on cheap paper. Tone: "cheerful, inviting, safe."

The mood board has watermelon slices, old book covers, swings in the park, and crayons. In grayscale, the board turns out to be made up mostly of light and medium values, with dark values appearing only in small details. The value distribution is set up accordingly: a large light background, colored shapes at medium value, and a small dark area for the headline and text.

A warm coral is chosen as the anchor color; it sits in the medium value box. Pine green is added as the supporting color — it answers the coral but, being darker, can also carry the headlines. The neutrals are a creamy white and a dark chocolate brown.

The poster will use photos of children with different skin tones. The designer also tests the palette against these photos and notices a problem: the coral background drops to almost the same value as medium and warm skin tones in grayscale, so these children's faces blend into the background. The fix is to put a creamy white frame behind the photos and use coral in shapes and accents rather than behind the photo. This way, both a light-skinned child's face and a dark-skinned child's face separate from the background with equal clarity.

Finally, the brochure is printed on cheap paper, and the paper is found to fade the colors a little. Because the value skeleton is solid, the hierarchy doesn't break; the headline still reads clearly.

Common misconception

Summary

1. The palette starts with the brief's three questions — audience, context, and tone; the three adjectives chosen for tone guide the mood board.
2. Before color, you decide the proportion of light, medium, and dark areas; because value, not hue, carries hierarchy and readability, this skeleton protects every decision that follows.
3. The anchor color is chosen together with its neighbors, supporting colors and plenty of neutrals are added; at the end, the palette is tested in grayscale and with real content, including photos of different skin tones.

Test yourself

1. (Easy) Which three questions should a brief be reduced to?
2. (Easy) What is the anchor color?
3. (Medium) Why is it a good idea to start choosing a palette with value distribution rather than with color?
4. (Medium) Why is it a warning sign when two colors turn into the same gray in the grayscale test?
5. (Hard) In the library poster example, what problem did the coral background create, and how was it solved?
6. (Hard) When a client says "make it blue," how should the designer read that request?

Answers

1. Audience, context, and tone: who will see the work, where will it appear, and what should it make people feel ("Step 1 — Reducing the brief to three questions").
2. The main color that carries a palette's identity and against which the other colors are chosen ("Step 4 — The anchor color").
3. Our visual system extracts shape, depth, and edges mainly from lightness differences; that's why value, not hue, carries hierarchy and readability. If the value skeleton is built first, the hierarchy doesn't break even if the hues chosen later change ("Step 3 — Value distribution first").
4. It shows that telling the two colors apart relies on hue alone; color vision deficiency, a black-and-white print, or a screen in bright light can erase that difference ("Step 6 — The grayscale test").
5. Because coral dropped to the same value as medium and warm skin tones in grayscale, some children's faces blended into the background. By placing a creamy white frame behind the photos and using coral only in shapes, every skin tone was separated from the background equally ("Example — the children's library reading festival").
6. The designer should read the request as data and draw out the feeling the client associates with blue — calm or trust, for example — by asking about it; sometimes what's wanted isn't the color, but that feeling ("Step 1 — Reducing the brief to three questions").

Sources

• Albers, J., Interaction of Color, Yale University Press, 1963.
• Livingstone, M., Vision and Art: The Biology of Seeing, Harry N. Abrams, 2002.
• W3C, "Web Content Accessibility Guidelines (WCAG) 2.2," W3C Recommendation, December 12, 2024.

Next step

GT-03 turns this lesson's value skeleton into a reading order: it covers directing where the eye goes first on a page with a single accent color, how large calm areas make that accent stand out more, and testing a design by squinting or blurring it. GT-04 carries the same steps to the scale of a brand: it covers competitor analysis, matching or deliberately breaking from industry color codes, and making a palette work both digitally and in print.