Color Temperature Analyzer

You've got a hex code and you're trying to figure out whether it'll feel warm and inviting or cool and clinical on the page. Designers throw around terms like "warm gray" and "cool red" without much rigor, and a swatch picker doesn't tell you which side of the color wheel you actually landed on.

Drop a color in and you'll get its hue angle, the warm/cool/neutral classification, and a quick read on the temperature shift relative to neutral. The line between categories sits roughly at hue 0 and 180 — reds, oranges, and yellows pull warm; greens through blues to violets read cool; the transitions are where it gets interesting and where most pastels live.

The mechanism is straightforward HSL math. Your hex code gets converted to RGB, RGB gets mapped onto the HSL wheel, and the hue value (0 to 360 degrees) is what determines the temperature read. Hues from roughly 0 to 60 degrees (reds, oranges, yellows) are warm. Hues from 180 to 240 (cyans, blues) are coolest. The transitions — 60 to 120 (yellow-green to green) and 240 to 300 (blue-violet to magenta) — are mixed zones where saturation and lightness start to matter more than hue alone. Pure greens at hue 120 sit awkwardly between warm and cool because they read differently depending on whether they lean yellow or blue. The same applies to magentas around 300.

A worked example: drop in #FFE4B5 (the named CSS color "moccasin"). The hue lands around 39 degrees, saturation is high, lightness is high. Result: warm, distinctly so — it reads as a warm cream. Now drop in #B5E4FF, which is the same color reflected across the wheel. Hue around 204, same saturation and lightness. Result: cool, distinctly so. The two colors have identical "weight" but opposite temperatures.

Where this analysis breaks down is at very low saturation. A near-gray like #807F80 has a hue value that the math will return, but the perceptual difference between "warm gray" and "cool gray" at that saturation is so subtle that the classification is more theoretical than practical. Print and physical pigments add another layer — CMYK mixing produces temperature shifts that don't correspond cleanly to RGB hue angles, so a screen-warm color might print cooler if the inks are mixed in unexpected ratios. Treat the result as a starting point for screen work and verify physical output with proofs.