All projects
Web · 2026
Pick a colour, then walk through the public-domain art that shares it: 70,722 works from the Met and the Cleveland Museum of Art.
- Role
- Design & development
- Platform
- Web
Color Walk
Overview
The problem
Museum open-access APIs let you search by title, artist or department, but never by colour. Neither the Met nor the Cleveland Museum of Art stores a colour field, and the one museum API that does blocks its images from being embedded anywhere else.
The solution
An offline pipeline crawls both CC0 collections, measures the dominant and secondary colours of every thumbnail, and writes a static, paged colour index. The site reads only its own JSON, with no backend and no third-party API at runtime, while the images stream straight from the museums.
Features
What it does
Hue wheel and tone slider
Drag around the wheel and along the lightness axis; the gallery re-sorts by colour distance, and thin hues borrow from their neighbours so nothing looks empty.
A ring shaped by the collection
On wide screens the landing page is the wheel itself: each work sits at its hue, and crowded hues spill inwards so density reads as depth.
Deep zoom and colour twins
Open any work full screen with deep zoom, its other colours as links, and its nearest-colour twin from the other museum.
Walk between two colours
A 20-step route from one hue to another, one work per step; gaps in the collection show as a lurch instead of being hidden.
Games and a daily challenge
Spot the darker work or guess the tone, plus a daily challenge seeded from the date, so every visitor plays the same rounds without a server.
More ways in
Paint a 3×3 colour grid, look up the colours of a word, or drop in your own image, measured in the browser with the same algorithm as the index.
How it works
From museum API to colour wheel
- 01
Crawl
Pulls records and thumbnails from both museum APIs at a polite pace, resuming from a local cache after any interruption.
- 02
Filter
Keeps only works flagged public domain or CC0, with image hosts on an allowlist and every field length-capped.
- 03
Measure
Shrinks each thumbnail, drops canvas, varnish and frame pixels, and bins the rest into 24 saturation-weighted hues.
- 04
Publish
Writes 24 hue buckets in 600-work pages; the app fetches a page only when you scroll to it.
Highlights
Engineering notes
A crawler that survives a firewall
The Met blocks after about 75 quick requests, so the crawler paces itself, backs off, time-boxes runs and reports whether it is running, stalled or silent.
70,722 works, small requests
128,799 index entries across 269 static files; each page is about 330 KB and is fetched at most once per visit.
Colour maths that wraps around
Circular hue means and distances, with the same palette extraction running in Node and in the browser.
Strict by default
A tight Content Security Policy, self-hosted fonts, no analytics or cookies, and about 255 Vitest tests.
Under the hood
Stack & timeline
- React 19
- Vite
- TypeScript
- Tailwind CSS
- Node.js
- sharp
- OpenSeadragon
- Vitest
- Vercel
Day 4
Word colours, a hardened crawler and the final index of 70,722 works.
Day 3
Walks, games, the daily challenge, colour twins and per-hue share pages.
Day 2
Tone axis, favourites, paged buckets, a resumable crawl and colour from your own image.
Day 1
Colour index pipeline, hue wheel, masonry gallery and deep zoom.
Gallery
A closer look
Color Walk
Color Walk
Color Walk
Color Walk
