Design > Color Theory — Part 3 of 3
The two previous posts in this series established two things: color is three-dimensional (hue sets direction, saturation sets intensity, brightness sets weight), and every color harmony reduces to the same four operations as layout (Contrast, Repetition, Alignment, Proximity). This post is about what you actually do with that.
There are two situations where this framework pays off: building a palette from scratch, and diagnosing one that is not working. I want to walk through both.
Tints and Shades Are Not Decoration — They Are Structure
When most people talk about building a palette, they think about choosing colors. But a significant part of any functional palette is not about choosing new colors at all. It is about building a family from one.
A tint is a color with brightness increased, saturation typically reduced, moving toward white. A shade is a color with brightness decreased, moving toward black. A tone is a color with saturation reduced, moving toward gray. These are movements along specific axes of the three-dimensional model, and understanding them that way changes how you use them.
In CRAP terms, tints and shades are a Repetition and Contrast strategy simultaneously. The hue repeats (you stay in the same color family), and the brightness contrasts (different values create visual hierarchy). This is why a monochromatic palette, built from tints and shades of a single hue, can carry significant visual complexity without ever introducing a second color. The contrast lives entirely in the brightness dimension, and that contrast is doing the work of hierarchy: the darkest values read as heaviest and most important, the lightest read as supporting elements.
For practical palette building, a useful starting structure is to develop your anchor color, your primary hue, and build at least three or four brightness levels from it before you introduce any other hue. Now you have a family. Now you have structure. Any other colors you add will be joining a palette that already has internal logic, and you can evaluate them by asking which CRAP dimension they are contributing.
Building a Palette from Scratch
When I start a palette now, I work through three decisions in sequence. Not simultaneously. In sequence.
The first decision is hue direction. What emotional territory does this need to occupy? Warm or cool? Activating or calming? The answer almost never produces a specific color — it produces a region of the wheel. You are narrowing the search, not making the final call.
The second decision is saturation level. How intense does this palette need to be? This is the volume question. A high-energy brand, a children’s product, a warning system: high saturation. A luxury brand, a medical context, a system asking for trust: lower saturation. Decide this for the palette as a whole, because this is your alignment axis. When you choose individual colors later, they all need to sit at roughly this saturation level. That shared saturation is what will hold the palette together.
The third decision is brightness range. What weight does this need to carry, and how much hierarchy do I need? A single-brightness palette is flat and will need contrast from somewhere else. A wide brightness range gives you hierarchy but requires care in how you use it. Decide whether you are building a palette that works at one brightness level (a tonal palette, unified and sophisticated) or across a range (which requires deliberate anchoring on the saturation axis to maintain coherence as brightness changes).
Now you can start choosing specific colors. Every candidate gets evaluated against the same three questions: does the hue fit the emotional direction? Does the saturation align with the palette’s shared intensity level? Does the brightness either fit the range you have established or intentionally contrast with it for hierarchy? A color that fails all three is not a palette member. A color that passes all three is.
Diagnosing a Palette That Is Not Working
The diagnostic use of this framework is, honestly, where I have found it most valuable, because it converts vague discomfort into a specific problem that has a specific fix.
*When a palette feels flat or forgettable:* Look at brightness first. If every color is sitting at the same mid-tone level, the palette has no depth and no hierarchy, nothing for the eye to land on as primary. You are missing brightness contrast. Introduce a lighter or darker color. Then check hue spread. Colors that are too similar in hue and also similar in saturation and brightness will blur together. You may need a single accent color that sits clearly apart.
*When a palette feels chaotic or random:* Find the repeating dimension. Run through the three axes. If every color in the palette has a different saturation, a different brightness, and a different hue, there is no structural anchor anywhere. It is not a palette, it is a collection. Start with saturation alignment. Lock the saturation values to a consistent level across all the colors. That single change will often produce immediate coherence, without touching the hues at all.
*When a palette feels safe but generic:* The problem is usually too much repetition and not enough contrast. Everything sits in the same temperature range, same saturation, same brightness. Competent but forgettable. A single accent color at a meaningfully different brightness or saturation level, introduced deliberately, will differentiate the whole palette. One color doing contrast work can change the character of an entire system.
*When a specific color is not working:* Run through the three axes one at a time. Is the hue pointing in the right emotional direction? Is the saturation level calibrated correctly for the intended intensity? Is the brightness setting the right weight for this context, and is that weight appropriate to the role this color is playing? You are not asking “what does this color mean?” You are asking which of the three axes is wrong, and specifically how it is wrong. “This red doesn’t feel right” becomes “this red is the right hue but the brightness is too high. It reads playful, and this context needs it to read authoritative. Bring the brightness down.” That is a specific, testable adjustment.
What This Changes
I want to end with an honest account of what this framework actually changed for me, because it is not what I expected.
I expected it to make my color decisions faster. It did not, at least not at first. What it did was make them more intentional. I stopped guessing and started describing. I stopped adjusting colors until they “felt right” and started adjusting specific axes toward specific goals. The decisions slowed down initially because I was asking more questions. But the results got better faster, because the adjustments were targeted.
And the teaching changed. The feedback I give now is specific enough to act on. “This red is too bright for this context” sends a student back with a direction. “This red doesn’t feel right” sends a student back to guess. The difference is whether the feedback points at a dimension or points at a mood, and mood-based feedback is almost useless in a critique because the student cannot translate it into a decision.
Twenty-five years in, I am still finding new things in these four principles. They are not a beginner framework any more than they are an advanced one. They are a working set of tools, and they work the same way on color that they work on layout, which is to say: reliably, diagnostically, and as precisely as you need them to be.
Part three of a three-part series on color theory and design. [Read Part 1: Color Is Three Things at Once.] [Read Part 2: CRAP, But Make It Color.]
For the complete research-backed framework, including the Valdez & Mehrabian (1994) and Wilms & Oberfeld (2018) studies and the full harmony type analysis, see the companion paper: “Color, Emotion, and Harmony: It All Comes Down to CRAP.”
Category: Design > Color Theory
Further Reading
- Using Color to Enhance Your Design (NN/g) — Color harmony and application in design
- CSS Color Module Level 4 (W3C) — OKLCH and modern color space specifications
- The Power of The Palette (Adobe Blog) — Hue, saturation, brightness dimensions
