A gradient is a path

A gradient is specified by its ends. That is how every design tool, every stylesheet and every plotting library asks for one, and it is not enough information to draw it.

The claim #

A blend is a route, not a pair. The two endpoints fix where it starts and stops; everything between is decided by a choice of space that is almost never stated, is different in a browser, a renderer and a design tool, and moves the middle of an ordinary gradient by more than thirty units of colour difference.

Three separate things move with that choice, and they move independently:

• Where the middle is. For a blue-to-yellow blend the halfway colours differ by up to ΔE00 37.2, which is many times any tolerance in industry.
• How much the middle desaturates. Every route dips towards grey; the depth of the dip varies from 66 to 83 chroma units on the same pair.
• How evenly the steps are spaced. No route is even under the difference formula everybody quotes, including both spaces sold on being perceptually uniform.

Four routes #

The four spaces here are not a survey of the literature; they are what actually draws gradients.

Encoded sRGB — interpolating the code values as stored. This is what a browser’s linear-gradient did for its first two decades and what most image editors still do by default.

Linear light — undoing the transfer function first, blending, and re-encoding. This is what a renderer does, because it is the only one of the four that corresponds to physically adding light.

CIELAB — blending in the space colour differences are measured in.

Oklab — blending in the newer perceptual space, which is what several current design tools offer.

They are all defensible and they all answer slightly different questions. What none of them is, is the blend.

The dip #

Every route between two colours on opposite sides of grey passes near grey, and the amount matters more than the fact.

The measure here is how far the path’s chroma falls below the straight line joining the endpoints’ chromas. For the blue-to-yellow pair:

Linear light dips furthest, which surprises people who have been told it is the physically correct choice. It is physically correct — it is what happens when two lights are mixed — and mixing a blue light with a yellow light really does give something close to white. A gradient between two surface colours is not a mixture of two lights, and the physically correct operation is answering a question nobody asked.

The pair matters as much as the space. A magenta-to-cyan blend, whose endpoints are on the same side of the neutral axis, dips by only 5.3 in encoded sRGB and 23.8 in CIELAB — and the ordering has reversed. There is no space that always dips least.

Even steps are not what any space delivers #

A perceptual space is supposed to make equal coordinate steps look equally different. Measuring that directly on a blend, in ΔE00:

The second column is the ratio between the largest and smallest step; the third is the same ratio taken between the ninth and second deciles, which ignores the ends. Both are quoted because the first is fragile — on a ramp that starts at black it is decided by a single step where CIELAB’s toe and CIEDE2000’s lightness weighting both compress hard.

The perceptual spaces are better and they are not good: a step in the body of an Oklab blend is still twice as large at one place as another, measured by the formula that was fitted to say how large a difference looks.

There is one exact result in this essay and it is the control. A CIELAB blend is perfectly even under ΔE76 — largest step over smallest is 1.0000000000000053 — because ΔE76 is the Euclidean distance in the space the blend is a straight line in. That number is what says the machinery works; the interesting ratios above are what happens when the metric is not the one the space was built for.

Every space is exactly even under its own ruler #

The control in that section is doing more work than it is credited with, and reading it as a result rather than as a check turns the step table into a different kind of statement.

A blend is a straight line sampled at equal parameter. So in any rectangular space, the Euclidean distance between consecutive samples is identical by construction — a CIELAB blend is exactly even under ΔE76 because ΔE76 is Euclidean in CIELAB, and an Oklab blend is exactly even under Euclidean Oklab distance for precisely the same reason, and an encoded-sRGB blend is exactly even under Euclidean distance in code values. All four routes are perfect, each judged by the ruler it was drawn with.

Which means the step table is not measuring how even the four blends are. It is measuring how far each space is from the space the ruler belongs to, and the ruler here is ΔE00 — a weighted correction applied to distances in CIELAB. Read that way the ordering stops being surprising:

The two perceptual spaces come first because the ruler is a perceptual space. That is not a rigged comparison — CIELAB and Oklab really are better here, and the two non-perceptual routes really are worse — but it does mean the gap between the top two is uninformative. Oklab beating CIELAB by 2.2 to 2.5, under a metric built on top of CIELAB, is well inside the range that a change of ruler could reverse.

So “which space should a gradient be drawn in” is not a well-posed question until somebody names the ruler, and every candidate ruler is itself one of the answers. That circularity is the reason the advice in this field is a matter of taste dressed as a technical claim.

The grey ramp, where it gets strange #

The simplest gradient anybody draws is black to white, and it is the one where the spaces disagree most violently:

Two things there are worth unpicking.

The encoded-sRGB ramp is a disaster by any measure, and this is already an essay on this site: code 128 is not half of white, so a ramp drawn in code values spends most of its length in the dark.

Oklab’s 56 is an endpoint effect and its 2.79 is the honest number. An Oklab blend puts equal steps in something close to the cube root of luminance; CIELAB’s lightness has a linear toe below about a hundredth of white, so near black the two disagree about what equal means, and ΔE00’s weighting magnifies the disagreement into one very small first step. Read from the middle, Oklab is a perfectly reasonable ramp. Read from the ends, it is 56 — which is a fact about two conventions near zero and not about how a gradient looks.

That distinction is why both columns are reported everywhere in this essay, and it is the kind of thing a single summary number hides.

What the pictures cannot show #

A row of swatches is not a gradient. The figures here are drawn as discrete steps so that each sample can be tested against the display’s gamut and hatched if it is unreachable, which is this site’s standing rule. A real gradient is continuous, its bands are the artefact of a quantiser rather than of a diagram, and whether the joins between steps are visible is a question about the eye’s spatial response rather than about any of the four spaces.

Nothing here shows the gradient as it will be seen. The reader’s display has its own transfer function, its own primaries and its own white; every swatch is computed for sRGB and verified reachable in sRGB, and a wide-gamut screen showing the same page is showing four slightly different routes.

And the measurements are pairwise. Every ratio above compares two adjacent samples in isolation, which is the arrangement colour-difference formulae are worst at: adjacent patches are the easiest case for an observer and the hardest for a formula fitted on separated ones.

What a gradient asks of the space it is drawn in #

It is worth separating two properties that get bundled together as “perceptual uniformity”, because a blend needs both and they are different requirements.

Local uniformity — equal coordinate steps look equally different — is what the step table measures, and it is a statement about the metric tensor being close to the identity everywhere.

Straightness of a hue — a line between two colours of the same hue stays that hue — is a statement about the shape of the surfaces the space carries, and neither CIELAB nor Oklab is perfect at it: CIELAB’s blues bend towards purple as they lighten, which is the single most complained-about property of the space and is visible in any blue-to-white blend drawn in it.

A blend can be badly wrong in either way independently, which is why “use a perceptual space” is not advice so much as a family of choices with different failure modes.

What was computed, and how #

The routes. Each space supplies a pair of maps, XYZ to coordinates and back. A blend is a straight line in the coordinates, sampled at sixteen equal steps, taken back to XYZ and drawn.

The measurements. Chroma is $\sqrt{a^{*2} + b^{*2}}$ in CIELAB against D65; the dip is the largest amount by which the path’s chroma falls below the straight line joining the endpoints’ chromas. Steps are ΔE00 between consecutive samples. The midpoint gap is ΔE00 between the halfway colours of two routes.

The gamut. Every sample is tested, and a colour the display cannot show is hatched rather than clipped, as everywhere on this site. For the pairs drawn here nothing leaves the gamut — both perceptual routes stay inside because both endpoints are inside and the spaces are convex enough over this range — but that is a property of these endpoints, not a general one, and a blend between two saturated in-gamut colours in CIELAB can leave it in the middle.

And the control. assertALabBlendIsEvenUnderItsOwnMetric requires a CIELAB blend’s ΔE76 steps to be equal to within 10⁻⁹. Everything else here is a ratio that is not one, and a ratio that is not one means nothing unless something in the same machinery comes out exactly one when it should.

A blue-to-gold ramp is the gradient a designer is most likely to draw, and the four routes disagree about its middle by more than any contract allows.

Where the model stops #

Only four spaces. CAM16-UCS would be a fifth and a good one, and it is absent for a mechanical reason worth recording: the blending machinery would have had to import the appearance model, which imports the space conversions, which would then import the blending machinery back — a cycle. The generator can be handed a custom space and the essay does not use one.

No hue interpolation. Every route here is a straight line in a rectangular space. Blending in a polar space — going round the hue circle rather than across it — is a fifth family of answers and the one that avoids the dip entirely, at the cost of visiting hues neither endpoint has. Nothing here computes it.

One tolerance and one adaptation. Everything is measured under D65 with full adaptation, on large uniform patches. A gradient is not a large uniform patch: its steps are adjacent, which is the arrangement colour differences are hardest to judge in and the one every formula was not fitted on.

And the endpoints are inside the gamut. The interesting practical case — a blend between two colours a display cannot show — is a gamut-mapping problem as much as an interpolation problem, and that has its own essay.

The generalisation #

The shape here is one this site keeps meeting: an operation defined on two objects is not defined by the two objects.

A blend needs a space. A colour needs an observer and a display. A separation needs a black-generation policy. A colour temperature needs a distance off the locus. In every case the missing argument has a conventional default, the default is different in different tools, and nothing in the artefact records which was used.

The practical rule for gradients is short and it is not “use a perceptual space”. It is: say which space, and check the middle. A blend is a picture with two labelled ends and a large unlabelled interior, and the interior is what a reader actually looks at.

Who found it, and when #

Interpolating in encoded values rather than in light is as old as digital imaging, and the complaint about it is nearly as old — the correct treatment of gamma in resampling and compositing was argued through the 1980s and 1990s and lost in most consumer software until very recently.

CIELAB dates from 1976 and was designed for differences rather than for interpolation, which is why using it as a blending space is a borrowing rather than an intended use. Oklab is Björn Ottosson’s, published in 2020, fitted to be better behaved than CIELAB for exactly this kind of work — and the measurements above are a fair statement of how much better: substantially, in the body of a gradient, and not to the point of evenness.

The most consequential recent change is that browsers now let a gradient name its interpolation space. That turns a hidden default into a stated argument, which is the whole of what this essay would ask for.

What would break the circle #

There is a way out and this site already owns the pieces of it, which is worth stating plainly because it converts a matter of taste into a measurement somebody could make.

The circularity exists because every ruler on offer is a space, and every space is even under itself. An independent ruler would have to come from measurements of people rather than from a coordinate system — and that is what MacAdam’s ellipses are: the size and shape of a just-noticeable difference at twenty-five places, measured on observers, owing nothing to CIELAB or Oklab or anything else.

The uniformity figure above is already that measurement carried into a space and asked how round and how equal the ellipses come out. What has not been done is to run a blend against it: take the path each of the four routes traces, and measure each step not in ΔE00 but in how many just-noticeable differences it crosses, using the local ellipse at each point along the way. That number is a count of thresholds rather than a distance in anybody’s coordinates, no space is even under it by construction, and it would rank the four without asking any of them to hold the ruler.

It would also be a genuinely uncertain experiment, which is why it is worth doing rather than merely worth describing. The ellipses are twenty-five measurements at one lightness, so interpolating a field from them is a modelling choice with its own defensible variants; and the data are threshold data while a gradient’s steps are plainly suprathreshold, which is the mismatch a whole essay on this site is about. Both objections are real. Neither of them is circular, and that is the entire improvement.

Where this goes next #

The obvious extension is the polar one: blending through hue rather than across it, which removes the dip and introduces a different problem — a route that passes through colours neither end contains, and a choice of which way round the circle to go.

The sharper one is spatial. Every measurement here treats the gradient as a sequence of independent patches, and a gradient is the one object where that is least true: its steps are adjacent, its bands are wide, and whether it looks smooth is decided by the eye’s own spatial filtering rather than by any pairwise difference. Two of this phase’s essays measure that, and joining them to this one would turn “which space” into a question with a measurable answer rather than four defensible ones.