Color Harmony Tool — Compare HSL Hue Angles
Compare two HEX colors against a chosen HSL hue relationship and angular tolerance, with hue, saturation and lightness differences.
Check a specific hue relationship between two digital colors. Enter two HEX codes, select an HSL angle, and choose how far the second color may deviate from that angle. The result compares geometry on a digital color wheel; it does not declare a design beautiful, balanced or readable.
How to use this tool
- Enter two opaque three- or six-digit HEX colors.
- Choose the hue relationship you want to test.
- Set an angular tolerance from zero to 30 degrees.
- Read the angle result alongside the separate saturation and lightness differences.
Formula
Separation = min(|h₁ − h₂|, 360 − |h₁ − h₂|); angular difference = |separation − target|
Hue is derived from sRGB using HSL. Targets are 180 degrees for a complementary pair, 120 for two triad members, 90 for neighboring square-tetrad members, and a chosen 30-degree analogous reference. The tolerance applies only to hue.
Example
Red #FF0000 has hue 0 degrees and cyan #00FFFF has hue 180 degrees. Their shortest separation is 180 degrees, exactly matching the complementary target even with zero tolerance. Their HSL saturation and lightness differences are both zero.
Frequently asked questions
Does a match guarantee readable text?
No. Text contrast depends on relative luminance and the foreground/background combination. A hue-angle match is a different calculation and cannot replace a contrast check.
Why is gray reported as undefined?
Equal red, green and blue channels have no chromatic direction. Gray, black and white therefore cannot establish a meaningful hue angle, even though software may store a placeholder hue.
Must analogous colors be 30 degrees apart?
No. Nearby hues are a design convention rather than one fixed tolerance. This checker uses an explicit 30-degree target so its result is reproducible; the analogous finder lets you choose the spacing.
Sources
Last updated: 2026-10-30