All Work( Case Study · 2026 )

colors.codes

A named home for all 16.7 million sRGB colors, from infinite canvas to Chrome side panel.

The colors.codes canvas: an infinite grid of color swatches from orange to green, each labeled with its hex, with the intro card reading Every color has a name.
Project
colors.codes
Kind
Self-initiated product, .codes imprint No. 01
Scope
Product, design, engineering, extension
Stack
Next.js 15, React 19, TypeScript, Tailwind; MV3 side panel
Status
Live, open by default
( The Brief )

Every color,
addressable.

colors.codes is the flagship of the .codes imprint: a library of all 16,777,216 colors in sRGB. Each one carries a real, deterministic name from the studio's naming engine, no random strings, and lives at a permanent URL with palette, tints, shades, harmonies, and contrast. Open by default: no account, no paywall.

The thesis is editorial rather than utilitarian: a specimen book, not a hex generator. The canvas is the front door. Pan an infinite tiled grid of every color, click a swatch to open its page, save what you love, and share anything as a URL that never changes.

JDP Studio designed and built the whole surface: the Next.js 15 web app with its OKLCH-aware tools, the naming engine itself, and a Manifest V3 Chrome side-panel extension, live on the Chrome Web Store, that turns any browser tab into a color workstation.

( The Work )

What
shipped.

The infinite colors.codes canvas mid-pan, showing a field of orange, yellow, and green swatches with hex labels and the minimap in the corner.
01

An infinite canvas of everything.

The front door is a pannable, zoomable grid of all 16.7 million colors. Drag, scroll, pinch, click: every swatch shows its hex, a minimap keeps you oriented in color space, and any swatch opens into its own page. It is a library you wander, not a form you fill in.

The permanent page for #C4491A, named Unyielding Oranje, set full-bleed in the color itself with vibrant and orange chips, HSL values, and copy, save, palette, and export actions.
02

Every hex, named and addressable.

The naming engine gives each color a real, deterministic name: #C4491A is Unyielding Oranje on every device, forever. Its permanent page carries family and mood chips, HSL readouts, notes, and one-tap copy, save, add-to-palette, and export. Share the URL and the other person sees exactly your color.

The colors.codes palette builder: up to 12 hexes, hit space to shuffle, lock slots to keep them, with the note that the URL is the palette.
03

The URL is the palette.

The palette builder holds up to twelve hexes. Hit space to shuffle, lock the slots worth keeping, start from a curated sample. The whole palette serializes into the address bar, so sharing a palette is pasting a link, with nothing uploaded and no account involved.

The Tailwind color generator building an eleven-shade bg-brand-50 to bg-brand-950 ramp from #ff5470, with OKLCH values per shade and a perceptual color-space toggle.
04

Any hex to a Tailwind ramp.

The Tailwind generator turns any base color into a complete 50-to-950 scale, perceptual OKLCH by default with a classic HSL mode alongside, previewed across common UI in light and dark, and exported straight into a Tailwind config. Eleven shades, each with its hex and OKLCH value ready to copy.

The colors.codes extension page: Every page is a palette, describing the Chrome side-panel workspace where picked colors arrive already named.
05

Every page is a palette.

The Chrome extension docks as a side panel, a workspace rather than a single-shot popup. It stays open while you browse, accumulates a session of picks, and every color arrives already named, ready to copy, save, or build into a palette. Twelve tools on one surface, none of them opening a new tab, none asking for an account.

The colors.codes listing on the Chrome Web Store with its Add to Chrome install button.
06

Live on the Chrome Web Store.

The extension ships as a Manifest V3 side panel built with React 19 and strict TypeScript, published and active on the Chrome Web Store. Install it and the library follows you into every tab.

( Craft Details )

The small
things.

A deterministic naming engine

Sixteen point seven million names, none of them random. The same hex resolves to the same name on every device, every time, which is what makes a color shareable as language and not just as a value.

OKLCH under everything

Palettes, ramps, and scales are computed in perceptual OKLCH first, with classic modes alongside. What looks evenly spaced is evenly spaced.

Open by default

No account, no paywall, no upload. Every color, palette, and scale lives at a permanent URL that anyone can open.

One core, many surfaces

A shared TypeScript core drives the web app and the MV3 side panel, so the canvas, the tools, and the extension all speak the same color language.

The colors.codes canvas on a phone.The Unyielding Oranje color page on a phone.
The canvas and every color page hold their structure in hand.

Ready for
the next step?

No sales pitch. No pressure. Tell us about your project.