Design > Color Theory — Part 2 of 3
In my first month learning to teach, I came across Robin Williams’ *The Non-Designer’s Design Book.* I was not looking for a student textbook. I was looking for a foundation, something that would help me understand why design worked before I tried to explain it to someone else. What I found was four principles that account for most of what makes a design hold together or fall apart: Contrast, Repetition, Alignment, and Proximity. Arrange them for memorability and you get CRAP, which every student figures out immediately and never forgets.
I have used that framework for twenty-five years. The reason it has stayed useful is not that it is comprehensive, it is not, but that it is diagnostic. When a design is not working, you run through the four principles and you almost always find the problem. Missing contrast makes the design invisible. Missing repetition makes it feel random. Missing alignment makes it look accidental. Missing proximity breaks the logic that tells a viewer what belongs together. These failures happen in first-semester student work and they happen in ten-year professionals’ portfolios. The principles are simple to name and genuinely difficult to maintain.
Here is what I realized after years of applying CRAP to layout and typography and thinking it was a composition tool: it is not a composition tool. It is a description of how visual relationships work. And visual relationships work the same way in color as they do in layout.
Every color harmony that has a name, every palette that holds together, every palette that falls apart, can be analyzed and built and repaired through the same four operations. It all comes down to CRAP.
C: Contrast
Contrast in color is the difference between two colors across one or more of the three dimensions from the previous post: hue, saturation, or brightness. Contrast is where visual interest lives. Without it, a palette feels flat, everything at the same level, nothing standing out.
What the three-dimensional model adds to this is precision. You can now name exactly where the contrast is happening, which changes what you can do with it.
Two complementary colors, orange and blue, contrast strongly in hue. If you keep their saturation and brightness levels similar, you get a palette that feels visually energetic but still coherent, because the contrast is deliberate and contained to one dimension. A monochromatic palette creates contrast only through brightness, using different lightness values of the same hue. Both are contrast strategies. They produce very different results. And knowing which dimension carries the contrast tells you exactly how to adjust the palette if the energy is wrong.
In a critique, this specificity changes the quality of the feedback. Instead of “this palette needs more contrast,” you can say: “this palette needs brightness contrast. Everything is sitting at the same mid-tone level and there is no visual hierarchy.” That is feedback the designer can act on immediately.
R: Repetition
Repetition is what creates harmony. When two or more colors share a value on one or more HSB dimensions, they feel like they belong together. This is the underlying mechanism behind every named harmony type, even the ones that look dramatically different from each other.
Here is the diagnostic rule that came out of this, and I consider it one of the most useful single observations I have made about color: every functional palette has at least one dimension where the colors repeat. That repeating dimension is the structural anchor. Without it, the palette is not a palette. It is a collection.
Take a complementary palette, orange and blue, colors on opposite sides of the wheel. These colors contrast strongly in hue. But if you choose an orange and a blue that share similar saturation and brightness levels, the palette will feel like they belong together. The saturation and brightness are repeating even though the hue is contrasting. That shared repetition is what holds it together.
When a palette is not working, when it feels like unrelated colors thrown next to each other rather than a designed system, the first question I ask is: what is the repeated dimension? If there is no clear answer, that is the problem.
A: Alignment
In layout, alignment means elements share a common edge or axis. In color, alignment means colors share a common value on one HSB dimension, the same position on that axis, even if they differ on the others.
The most practical form of color alignment is saturation alignment: choosing colors that all sit at a similar intensity level. When you do this across different hues, the colors look like they belong to the same family even if they span the entire wheel. This is the mechanism behind professional brand palettes that use multiple colors without feeling scattered. The hues are different. The saturation is consistent. The consistency reads as belonging together.
It is also the fix for the most common palette failure I see from students at every level. They choose colors they like individually, then wonder why the palette feels off. Almost always, the saturation levels are inconsistent. Some colors are vivid, some are muted, with no deliberate pattern to it. Aligning those saturation values across the palette produces immediate coherence, without changing any of the hues. It is a fast fix that works reliably because it is based on a structural principle rather than aesthetic guessing.
P: Proximity
Proximity operates in two ways in color simultaneously.
The first is proximity on the color wheel. Colors that sit next to each other share more perceptual territory, which makes them feel naturally related. An analogous palette, built from neighboring hues like blue, blue-green, and green, works because those colors are in proximity on the wheel. They share spectral overlap and the eye perceives them as belonging to the same family. The result is a palette that feels calm and cohesive and unified because the colors are not asking the eye to jump between very different emotional territories.
The second form is proximity within color space more broadly. Two colors at similar saturation and brightness levels, even if their hues are different, are in proximity on those dimensions. This is why saturation alignment works: aligned colors are not just consistent, they are close to each other on that axis, and the eye reads closeness as relationship.
Proximity also helps you predict one specific problem: two colors that are very close in hue but not identical, not quite different enough to read as intentional contrast but not the same. The eye cannot decide if they are supposed to be the same or different. It looks more like a mistake than a decision. That is the color equivalent of text that is almost-but-not-quite aligned, and it has the same effect on the viewer.
The table that makes this concrete:
Every harmony type maps cleanly onto these four operations. The pattern across all of them is consistent: functional palettes have at least one dimension that repeats. The harmony types that feel most stable repeat two or three dimensions. The ones that feel most energetic contrast one or two and repeat the rest.
The last row — hue contrasts, saturation contrasts, brightness contrasts, nothing repeats — is not a harmony type. It describes a collection of colors that do not form a palette. It is the most useful diagnostic row in the table because it describes exactly what a broken palette looks like from the inside: three dimensions of contrast and no anchor anywhere.
I want to be direct about what this framework does and does not do. It does not replace the standard color curriculum. You still need to understand hue relationships, the wheel, warm and cool, cultural associations, and accessibility requirements. Those are all real and necessary. What CRAP adds is a diagnostic layer that converts vague discomfort into a specific, nameable problem. Something is wrong, you run through the four principles, you find which dimension is missing its repetition or carrying the wrong contrast, and you know what to adjust.
In the third post, I want to walk through what that diagnosis actually looks like in practice, including how tints and shades fit into this framework and how to build a palette from scratch using CRAP as the structural guide.
Part two of a three-part series on color theory and design. Part one covered the three dimensions of color. Part three: building and fixing palettes with CRAP.
Category: Design > Color Theory
Further Reading
- Similarity Principle in Visual Design (NN/g) — Advanced Gestalt with perceptual/cognitive foundations
- Principle of Closure in Visual Design (NN/g) — Gestalt closure principle in design
- The Principle of Common Region (NN/g) — Visual grouping through spatial containment
