colors.codes — every one of the 16.7M hex codes gets its…
0 reactions
colors.codes — every one of the 16.7M hex codes gets its own URL, name, and unfurl card
Spent the last few weeks on this: https://colors.codes
An infinite pannable/zoomable grid of every color, where every hex has its own addressable page with a real name, mood, palette, tints, shades, and harmonies.
The interesting technical problem was procedural naming. My first pass had only 13 hue buckets × 5 tone slots × 3 saturation modifiers = \~195 total possible names, so neighboring cells on the canvas were hitting identical names constantly. I fixed it by keeping a bucket-based semantic base (Ruby, Crimson, Merlot) and appending a descriptor chosen by a deterministic hash of the RGB bytes with the descriptor pool varying by saturation band:
\- Vibrant (s > 85): Pulse, Flare, Spark, Plasma, Flame, Laser, Halo, Neon
\- Texture (25 < s ≤ 85): Velvet, Silk, Mirror, Glass, Petal, Quartz, Opal, Pearl
\- Muted (s ≤ 25): Haze, Mist, Chalk, Ash, Dusk, Linen, Fog, Smoke
That pushes the name space from \~195 to \~1,040 unique combinations and makes every RGB byte change shift the descriptor, so neighbors no longer collide.
Stack: Next.js 16 App Router, React 19, Tailwind, ISR. Sitemap covers \~3K pre-rendered URLs (curated + popular procedural hexes), rest render on-demand. Per-color OG images via next/og so every shared link unfurls as a 1200×630 swatch card with the color, name, and hex.
#programming #technology #dev
source
Spent the last few weeks on this: https://colors.codes
An infinite pannable/zoomable grid of every color, where every hex has its own addressable page with a real name, mood, palette, tints, shades, and harmonies.
The interesting technical problem was procedural naming. My first pass had only 13 hue buckets × 5 tone slots × 3 saturation modifiers = \~195 total possible names, so neighboring cells on the canvas were hitting identical names constantly. I fixed it by keeping a bucket-based semantic base (Ruby, Crimson, Merlot) and appending a descriptor chosen by a deterministic hash of the RGB bytes with the descriptor pool varying by saturation band:
\- Vibrant (s > 85): Pulse, Flare, Spark, Plasma, Flame, Laser, Halo, Neon
\- Texture (25 < s ≤ 85): Velvet, Silk, Mirror, Glass, Petal, Quartz, Opal, Pearl
\- Muted (s ≤ 25): Haze, Mist, Chalk, Ash, Dusk, Linen, Fog, Smoke
That pushes the name space from \~195 to \~1,040 unique combinations and makes every RGB byte change shift the descriptor, so neighbors no longer collide.
Stack: Next.js 16 App Router, React 19, Tailwind, ISR. Sitemap covers \~3K pre-rendered URLs (curated + popular procedural hexes), rest render on-demand. Per-color OG images via next/og so every shared link unfurls as a 1200×630 swatch card with the color, name, and hex.
#programming #technology #dev
source
| 3,000 mlx | |
| 3 | |
| 0 |