The Color Psychology Map is my number one tool for building color palettes with a clear visual hierarchy. You can use it when designing or upgrading color systems — especially when you’re under pressure to balance many competing demands across your brand, existing design standards, accessibility requirements, emotional goals, and behavioral psychology objectives.
How the Map Works
The Color Psychology Map has two parts: greys at the bottom and colors at the top. Both follow the same ballpark pattern, moving from the least to the most arousing as you move up. Arousal levels jump around quite a bit across the spectrum, so think of this as a bigger-picture map rather than a perfectly linear scale.
In the greys, when you build on whites with dark contrast, you’ll be in the zone of positive, comfortable emotions with a strong ability to draw the user’s eye.
The top color chart follows the wavelength from 400–700 nanometers. It doesn’t include non-spectral colors, so there are no browns, pinks, or red-violets — but add them if they make sense for your system.
A few parts of the spectrum stand out for attention. The cool blue zone is a good space for positive feelings with decent salience and a comforting general-purpose feel. Blue-green — turquoise — is particularly strong for drawing attention while still carrying comforting associations. The hot colors are better for grabbing attention and raising salience overall. Since reds carry negative emotional and cognitive associations, I reserve them for high-priority, mission-critical moments — threats, obstacles, and pressure motivators.
Calibrating a Color Hierarchy
I use the map as a literal hierarchy. Cranking up the salience means moving closer to red at the top; turning it down means moving toward the cool colors at the bottom, and then down into the grey zone.
Since colors don’t follow a perfect linear progression from low to high arousal, we normally force them into a visual hierarchy — tweaking shade, saturation, and other properties until red dominates all other colors, green outranks blue, and all accent colors draw more attention than the greys.
How We Build Color Systems
At the Behavioral Design Academy, I normally build color systems with Rena, our Creative and UX Director — who happens to be my sister.
We prefer to start with a white background, add grayscale structures, and then layer accent colors on top. For the greyscale palette, I build on a black, white, and grey structure with a solid aesthetic feel. Then I work on finding accent colors that have distinct contrasts, appropriate emotional associations, and symbolic meanings — using the Color Psychology Map to think through the competing design goals and challenges.
Once we rough out the color system, Rena uses AA and AAA contrast ratio tools to calibrate the palette and test its performance under various design conditions. It’s a lot of work — but done well, you’ll have a robust color system that serves you for years.
Accessible Colors
My default traffic-light-inspired color palette is a problem for some color-blind users. The worldwide familiarity with traffic-light colors makes it an attractive cognitive shortcut — but an insensitive choice for a meaningful portion of your audience.
The Color Psychology Map helps you spot where your palette is least accessible. The most prevalent color-blindness zone covers red-green, affecting 7–10% of men. Many forms of color blindness cluster in this area, making it a genuine danger zone worth planning around.
Once you know where your problems exist, you can do something about them — reducing the number of colors in that zone, ascribing fewer cognitive associations to those colors, and supplementing with contrast ratios, symbols, or iconography so the same information reaches users who can’t rely on color alone.
Accessibility isn’t a box to check at the end of a project. It’s a design constraint that shapes your decisions from the start — and the Color Psychology Map is one of the tools that helps you keep it in view throughout the process.