The colour on this site is computed

A site that argues numbers should come from the thing they describe cannot open with a gradient somebody liked. So the panel on the front page is solved rather than drawn, and this is what it solves.

The material

An oyster cannot expel what gets inside it, so it coats the intruder in aragonite tablets about half a micron thick, laid in offset courses with roughly thirty nanometres of protein between them. The literature calls the arrangement brick-and-mortar, which is why the hero is offset courses of quadrilaterals and not a Voronoi diagram.

Nacre has no pigment. The colour is interference, so the hue is a direct read of how thick the tablets are.

Reflectance, then colour

Light reflects off every interface in the stack and arrives back out of step with itself. The standard way to solve that is the characteristic matrix method: each layer contributes a two-by-two complex matrix, the stack is their product, and the reflectance falls out of the result with the indices of the surrounding media.

const delta = (2 * Math.PI * n * t) / lambdaNm;
// [[cos d, i sin d / n], [i n sin d, cos d]], multiplied through the stack

That gives reflectance per wavelength. Turning a spectrum into three bytes is the CIE 1931 observer — the colour matching functions, here as the multi-lobe Gaussian fit from Wyman, Sloan and Shirley, which is within about one percent of the tabulated data and costs nine lines instead of a spreadsheet. Integrate, convert to sRGB, gamma-encode.

One detail decides whether the whole thing is trustworthy: normalise each channel by its own integral and then map onto sRGB’s white point, so a flat reflector comes out exactly #FFFFFF. Without that step there is a warm cast on everything, and you can no longer tell which of the colours on screen are interference and which are a bug.

Why six layers and not a hundred

The first version used twelve bilayers, and the chart it produced was a comb of spikes so narrow that the curve read as noise. That was not a rendering problem, it was an honesty problem: a deep stack rings at very narrow wavelengths, and integrating those resonances at any practical step size aliases them. The colour that comes out is then an artefact of the step size rather than a property of the stack.

Six bilayers, integrated at two nanometres, is a depth whose fringes are wide enough to be sampled correctly. It also happens to be closer to the physics: in a real shell the tablets are not perfectly parallel and light scatters out of the coherent path within a few layers, so a small effective stack is what the eye is actually shown.

Two lessons from the lattice

Jittering each tablet independently opened white slivers between them, and the panel read as cracked paint. The fix is that a course boundary has to be one continuous function of x that both the row above and the row below sample — neighbours land on the same value, and there is nothing to leak through.

The other lesson was about variation. Giving each tablet its own hue jitter produced television static. A tablet that is a different brightness still reads as the same shell; one that is a different hue reads as noise. So the hue comes from two octaves of smooth noise that neighbouring tablets share, and the per-tablet term is luminance only, at about three percent.

The pointer is not decoration

Moving the pointer tilts the shell, and the whole field walks toward blue. The optical path through a film is 2 n d cos(theta), so a tablet seen off-axis reflects as if it were thinner. Refraction into aragonite is Snell’s law, which is why the effect is subtle rather than a disco: an index of 1.68 bends most of the tilt straight back out. The readout prints the angle it is using, so the claim is checkable rather than atmospheric.

Constants, with sources: n(aragonite) 1.680, ordinary ray in the visible; n(conchiolin) 1.435; tablets 400–500 nm; conchiolin 30 nm. Change the thickness and the colour moves the way a real pearl’s does, because it is the same equation — which is the only reason it was worth computing instead of picking.