---
title: A Colour Grader Where Distance Was the Whole Idea
description: Pick a colour, transform every nearby colour as a function of distance. A proof-of-concept grader I built to try one interaction idea.
date: 2026-04-30
projectPeriod: 'June 2018'
thumbnail:
  src: ./_assets/photo-colour-grader.jpg
  alt: Colour grading interface with tonal controls and an edited preview.
tags: ['graphics', 'web', 'tools']
role: Interface and image processing author
stack: ['JavaScript', 'Canvas', 'Image processing']
outcome: A working proof-of-concept grader and an interaction model I'd still defend
audience: technical
links: []
---

In June 2018 I got tired of every grader I tried making me think in masks. I wanted to point at "this orange" in a photo from one of my [walks](/articles/photo-site-generator/), nudge it, and have the neighbouring reds and yellows come along by however much made sense. Distance in colour space, not a brush. So I built the proof.

The UI was a colour wheel where you'd click to drop a marker, drag to move it, click anywhere to add another. Each marker had its own settings; transformations fell off smoothly with distance from the picked colour. No masks, ever.

I never built it into a real tool. The idea still feels right: distance in colour space is the natural unit for prose-style editing of an image. If I returned to it, I'd reach for WebGL instead of canvas. The interaction only earns its keep if the preview is live on a real photo, and canvas couldn't get there.
