📊 Color Comparison Matrix

Line up to four colors side by side: brightness, saturation, temperature, mood, contrast and harmony.

About the Color Comparison Matrix

Choosing between candidate colors is easier when you can see their properties side by side. This matrix takes up to four colors and lays out the numbers that actually drive a palette decision: how light each one is, how saturated, whether it reads warm or cool, the mood it tends to carry, how the colors contrast against each other, and what kind of harmony they form together.

What each value means

Brightness is perceived lightness on a 0–100 scale. Saturation and lightness come from the HSL model. Temperature classifies the hue as warm, cool or neutral. Mood is a short descriptor derived from hue, saturation and lightness. The pairwise contrast rows give the WCAG ratio and level for every pair, useful when colors sit next to or on top of each other.

Harmony detection

The tool inspects the spacing of the hues around the color wheel and names the relationship: analogous, complementary, triadic, tetradic or mixed. Every input color also resolves to an exact named PIGMENTUM color, so you can jump from the comparison straight to a full color page. On phones the results stack as cards; on wider screens they form a side-by-side matrix.

Who it is for

Brand and identity designers, interior and product designers, and anyone weighing up a shortlist of colors for a scheme.

Drag the R/G/B sliders or type a hex. All four colors are compared.

Pairwise contrast

Harmony:

← All tools Home