Color Palette Design

You are making a weekend walking poster. Blue, orange and green each look attractive alone, but you do not know which should be the background or title, or what to change when they compete. A palette has a practical job: start with a purpose, choose relationships, then assign colors to actual places.

We will try six starting palettes and work through the selection and repair of a blue–orange example. Attractive swatches are useful candidates; they become a design only when used and checked in context.

Look at the whole design before its swatches

These four posters keep shapes, type and positions fixed. A is monochromatic, B follows neighboring hue families, C contrasts blue and orange, and D uses a triadic family arrangement. Choose a candidate for the event, then identify visible differences.

A relies largely on value differences. B keeps colored regions around yellow-green to blue-green. C pairs a broad blue mountain with a smaller ochre-orange circle. D assigns different roles to blue, red and yellow. Suggestions about suitability below concern these particular shapes, areas and words; they are not universal emotional laws.

Six useful starting points: what are you choosing, and why?

Arranging red, orange, yellow, green, blue and violet through neighboring transitions gives a simplified traditional hue-family circle. A selects one direction and varies value or chroma; B chooses neighbors; C chooses opposing directions; D chooses three widely spaced directions. Split-complementary selection takes two directions on either side of the base hue's opposite.

The circle suggests how near or far hue families are. It does not choose the largest area or a sufficiently dark text color. The following examples turn those relationships into usable starting palettes.

Names such as analogous and complementary mainly describe hue relationships. They do not decide lightness, chroma, area or type readability. These are palettes authored for this lesson; the hexadecimal values let you reproduce them.

“Complementary direction” describes families. After value and chroma adjustments, the colors need not be exactly 180 degrees apart in a particular application's hue coordinates. A traditional red–yellow–blue wheel also differs from an RGB wheel. Use the name to find a direction, then compare the actual result.

Build a blue–orange poster, step by step

Fix the brief first: a weekend walk needs a readable heading, mountain shapes and a smaller event accent. Keep the heading readable, the mountains distinct and orange a local emphasis. Geometry stays fixed across the three stages.

A: establish hierarchy in gray. A pale ground, dark title and mountains already separate the information. The circle stays mid-gray so vivid color does not distract from this decision. This checks structure before selecting the color character.

B: choose a main color and common ground. Set mountains to deep blue #284D68, ground to pale cream #F1E9D9, and type to darker blue-black #233849. Blue is this example’s choice for distant mountains. Cream and blue differ in value and temperature; separate dark type means the mountain color does not have to satisfy small-text contrast.

C: add an accent and check its neighbors. Make the circle ochre-orange #C87A35, separated from blue in hue family, with restrained chroma and less area than the mountains. The lighter gray-blue-green foreground #7F9CA5 stays near the main hue direction while forming a supporting layer.

Why not a dark gray circle? That could work, placing more emphasis on position and value. Why not vivid red? It is another candidate whose hue, chroma and lightness must be compared. Orange here supplies a visible blue–warm relationship; the label “complementary” does not make those decisions for you.

Every swatch now maps to a role in the design. Next, avoid changing all five at once: use small edits to locate the source of a problem.

Three plausible deviations: repair one issue at a time

Type becomes too pale

A changes only the title color. The blue–orange relationship remains, but the title blends into the pale ground. B restores only the dark title. Repair the type-to-ground contrast without unnecessarily turning the mountains black.

The accent becomes more vivid

A changes only the accent to a more vivid orange; B uses the original ochre-orange. Does it now compete with the title or mountains? Vivid is not automatically wrong: A may suit a stronger event character; B better matches this brief’s restrained local accent.

The accent area grows

A enlarges only the circle, keeping every color and other shape fixed; B restores its smaller size. A large orange circle may become the main subject or a sun. The colors stay the same while the role changes. Decide what the circle should do before shrinking it.

The interaction applies each deviation separately to the current palette. Choose a palette and one deviation; “Assign roles” restores the baseline. Grayscale can check value, but it does not replace comparison of the colored design.

Grayscale converts the role-based colors using sRGB relative luminance. It checks value, differs from preserving OKLCH L in the previous lesson, and does not measure beauty.

Why area changes the role of the same colors

The twelve-cell experiment isolates area. Geometry and three encoded colors remain fixed; only the colors assigned to existing regions change.

Ochre occupies one cell in the first version and may act as a local accent. At six cells it contributes a broad color field. Swapping blue-gray and ochre shows that “accent” is a use, not an inborn property of a hue. The cell ratios are experimental conditions, not a recipe for every image.

Three common failures and a first repair

For ordinary web text, WCAG 2.2 AA generally requires at least 4.5:1 contrast; qualifying large text generally requires 3:1, with specific size conditions. This is a text readability check, not a beauty score for a palette or poster. Use words, shapes or patterns alongside color when identifying categories. W3C: minimum text contrast

A second brief: why not copy the poster onto a page?

The poster’s colored mountains are its main content. A tea page already contains a green illustration and needs room for type and an entry point. Additional color should support that existing information; a useful blue–orange poster does not justify copying its areas and intensity unchanged. Make the next judgment before opening the explanation.

Transfer to a tea page: keep the existing illustration

The green leaf illustration is fixed. Readers should see the illustration and heading, then find the purchase entry. A has a competing large orange entry; B reduces it and uses dark green; C adds a warmer cream ground. Compare A→B and B→C separately: which repairs competition, and which mainly changes the overall color direction?

Two transfer checks

Situation one: You need a restrained tea information page whose photographs already contain abundant green. Which starting approach could you choose, and why?

Situation two: Small orange text on a blue region is hard to read. Does that prove complementary palettes cannot work?

Try your own task: state the use, choose a main family, add a low-chroma ground and candidate accent, then explain their areas and positions. Keep an alternative and compare the trade-offs. That process moves you from naming palette types to making reasoned combinations.

Further exploration: Adobe: apply four palette types to posters and the Adobe color wheel. These tools suggest candidates; the six palettes, drawings and specific analyses here are original teaching examples.