Building a Color Distance Calculator Nobody Asked For (And That's Okay)
I built a color distance calculator for a podcast joke that happens once every 100 episodes. A fun Svelte webapp using the Eyedropper API to compare colors.
Sometimes the best projects are the ones that solve problems nobody has. Or rather, problems that exactly one person has, once in a while, on a podcast.
I built Hue Far Apart after listening to too many episodes of the Distractible podcast. If you're not familiar, it's a comedy podcast where the hosts play games and compete for points. At the end of each episode, they spin a wheel to award bonus points, and one of those wheel options is beautifully absurd: "who's shirt is closer to their background?"
When this lands, Mark has to eyeball the colors and manually calculate which host's shirt is closer to their background color. He's doing color distance calculations by hand. On a podcast. For points that don't matter.
And I thought: "This is ridiculous. I should make a tool for this."
The Result
Hue Far Apart is a simple webapp that lets you:
- Pick two colors from your screen using the Eyedropper API
- Calculate the Euclidean distance between them in RGB color space
- Feel very official about comparing shirt colors to backgrounds
It's built with Svelte because I wanted to try something quick and fun, and the Eyedropper API makes it surprisingly smooth to use.
Will Anyone Use This?
Probably not. Mark and the Distractible crew might not even know it exists. I posted about it on r/distractible Subreddit and got some nice feedback from fellow fans, which was cool.
But honestly? That's not really the point.
The point was spending a weekend building something silly and functional. The point was learning more about color spaces and browser APIs. The point was that when that wheel option ever comes up again, I can smugly think "I made a tool for that" while Mark continues to do mental math like a caveman.
Sometimes you build things just because they're fun to build. This was one of those things.
Check it out: hue-far-apart.website
Source code: GitHub