Color Compare

Put two to four colors side by side. Check codes, contrast and ideas for using them.

Calculated numbers use formulas. Editorial suggestion text is advice and a matter of taste.

Color values Calculated

Pair by pair

What the numbers mean

The contrast ratio is the WCAG 2 formula, which compares the relative brightness of two colors from 1:1 (identical) to 21:1 (black on white). Body text needs 4.5:1 for AA; large text needs 3:1. The hue difference is the angle between the two hues on the HSL wheel. The relationship label is picked from angle ranges, so it is a convenience and not a rule.

Applications and moods are editorial suggestions. They come from design habits and personal taste, and your project may call for something different. Read Contrast & Balance for more.