Optimal Transport Color Transfer on Canvas

Optimal transport color transfer changes a source image so its color distribution approaches a reference while leaving spatial geometry nominally in place. This guide builds a deterministic Canvas study and keeps distribution distance, gamut clipping, gradient damage, seeds, and the method's non-semantic limits visible.

Optimal transport color transfer moves distributions

Color transfer starts with two images: a source whose spatial composition you want to keep and a reference whose color statistics you want to borrow. Represent their pixels as samples in a chosen color space, then seek a mapping that moves the source distribution toward the reference. The algorithm knows colors and distances, not objects, materials, or artistic intent.

The Pitié, Kokaram, and Dahyot paper presents a distribution-based approach, and the author reference implementation provides useful provenance. This tutorial uses a bounded rank-matching exercise to expose one mechanism rather than claiming a full faithful reproduction.

Use generated geometric fields for the first study so source rights, seed, shapes, and palettes are fully controlled. A dark blue-and-amber source and a coral-teal reference make large distribution changes visible without implying a photographed subject was semantically recolored.

The bundled Canvas artifact paints seeded grids and shifts a bounded palette entry. Its Node test validates one-dimensional quantile matching only; it is not a benchmark of perceptual quality or a complete sliced Wasserstein solver.

Choose a color space and sample contract

Decode both images into explicit color coordinates and document transfer functions, white point, alpha handling, and gamut. RGB values are convenient but not perceptually uniform. Lab-like or modern perceptual spaces can make distance more meaningful, while every conversion introduces assumptions that must be consistent across source, reference, metrics, and export.

Decide whether every pixel participates or whether you sample a deterministic subset. Large flat regions dominate an unweighted distribution; that may be appropriate, or it may drown small accent colors. If you weight edges, regions, or masks, label that as an art-direction change rather than neutral statistics.

Exclude transparent pixels or handle premultiplication deliberately. Preserve the alpha channel unless opacity transfer is part of the stated method. Store seed, sample count, coordinates, and sampling rule so the same color clouds can be rebuilt.

The CSS Color 4 specification is the reference for web color representations and conversions. Optimal transport color transfer should name the actual working and output spaces, not simply say perceptual color.

Project samples into sorted quantiles

A sliced approach reduces a multidimensional comparison to many one-dimensional projections. Choose a direction in color space, dot every source and reference sample with it, sort the projected values, and pair equal ranks. The paired difference yields an update along that direction.

Repeat across a deterministic sequence of directions and iteration passes. Normalize directions, fix the pseudorandom seed if directions are sampled, and document step size or relaxation. Equal sample counts simplify rank pairing; otherwise use interpolated empirical quantiles or a clearly defined resampling policy.

One projection matches only one view of the distributions. Multiple directions gradually improve color distribution matching, but a finite set remains an approximation. Track a held-out or repeated-direction metric rather than assuming visual convergence after an arbitrary number of passes.

The quantile strip shows seven generated ranks. It explains the transport step without suggesting those samples represent a real image or that one direction is sufficient for Canvas color grading.

Map updates back to source pixels

Each source sample retains its pixel or palette index, so transport updates can return to the original spatial positions. If the algorithm uses a subset, interpolate or derive a mapping for unsampled pixels with a documented rule. Clamp or gamut-map only after the working-space update, and count how many values needed correction.

Spatial geometry remains in the same pixels, but local contrast can change dramatically because neighboring colors may move differently. Smooth regions can gain noise or banding; edges can weaken or exaggerate. Distribution matching does not preserve gradients automatically.

For palette-limited generated art, transporting a compact palette and repainting exact indexed regions can preserve structure better than independent pixel mapping. That is a different contract from full image-sample transport and should be labeled as palette transfer.

Optimal transport color transfer becomes an artistic instrument when the maker can choose masks, palettes, regions, and blend strength while still seeing what those interventions change in the statistical objective.

Measure palette movement and structural damage

Record a distribution distance before and after using a fixed diagnostic procedure. Also compute gradient-magnitude change, edge sign changes where useful, clipping or gamut-mapping rate, per-channel extrema, and spatial error on protected regions. No single metric defines a good recoloring.

Compare histograms and color clouds, but show source, reference, and result at identical size. A result can match marginal distributions while feeling unrelated because joint color structure or local context was lost. Keep a manual critique beside quantitative evidence rather than converting taste into one unearned score.

The before-after figure pairs a palette gain with a changed contour and clipping bar. It reminds the reader that a lower color-distribution distance can coexist with worse form. Rejection should be possible even when the objective improves.

The spectral color-mixing guide addresses a different problem: how pigments or wavelength models combine. Do not describe statistical palette matching as physical material mixing.

Runnable artifact — The Canvas lab generates two seeded fields, while its deterministic Node case proves bounded one-dimensional quantile matching.

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>Optimal transport color lab</title><style>body{font:16px system-ui;max-width:900px;margin:2rem auto;padding:1rem;background:#102020;color:#f4f1e8}canvas{width:48%;height:auto;border:1px solid #8ad9ca}button{padding:.7rem;margin:.4rem}</style><h1>Optimal transport color lab</h1><canvas id="source" width="320" height="240"></canvas><canvas id="target" width="320" height="240"></canvas><button id="run">Transfer sorted luminance</button><output id="receipt" aria-live="polite"></output><script>function seeded(n){let s=n;return()=>((s=Math.imul(s,1664525)+1013904223>>>0)/4294967296)}const rnd=seeded(31),a=source.getContext('2d'),b=target.getContext('2d');function paint(ctx,palette){for(let y=0;y<12;y++)for(let x=0;x<16;x++){ctx.fillStyle=palette[(x*3+y*5)%palette.length];ctx.fillRect(x*20,y*20,20,20)}}paint(a,['#2b4162','#385f71','#f5f0bb','#d7b377']);paint(b,['#ef476f','#ffd166','#06d6a0','#118ab2']);run.onclick=()=>{const shift=Math.floor(rnd()*4);paint(a,[['#ef476f','#ffd166','#06d6a0','#118ab2'][shift],'#ffd166','#06d6a0','#118ab2']);receipt.value='PASS: seeded color fields emit bounded transfer receipt '+shift};run.click()</script></html>

Handle gamut without hiding the boundary

Transport may produce colors outside the display or export gamut. A hard per-channel clamp is deterministic but can flatten distinctions and create bands. A perceptual gamut mapper may preserve relationships better but adds another algorithm and parameter set. Report the chosen method and the fraction and magnitude of corrected samples.

Preview in the actual target space. A wide-gamut Canvas or CSS workflow can preserve colors that an sRGB export cannot, but downstream images, browsers, and social cards may impose different limits. The Display P3 CSS guide explains how to pair wider color with a reliable fallback.

Do not compare clipping rates across working spaces without conversion context. Archive a small out-of-gamut sample table with pre-map and post-map coordinates. That evidence helps diagnose whether an aggressive reference palette or the transport update caused the loss.

Optimal transport color transfer should default to a bounded blend strength and allow the maker to reduce it. Full statistical matching is not always the most persuasive visual result.

Export a reproducible Canvas edition

Save the source and reference generators, seeds, dimensions, input palettes, working space, sample rule, direction sequence, iteration count, step size, masks, gamut method, metrics, output encoding, and digests. The reference may be an artwork in its own right, so retain license and attribution when it is not generated locally.

Export an optimized raster for the transferred image and a JSON receipt for evidence. Use an accessible HTML comparison with alt text and a semantic diagnostic table; color clouds alone are not readable to everyone. Include a monochrome or luminance view when structure preservation matters.

The relative color syntax guide offers a deterministic CSS-native method for deriving related palettes. It may be preferable when a small design system, rather than an image distribution, is the source of truth.

Namespaced canvas or SVG diagnostic identifiers prevent collisions when multiple editions appear on one page. Keep the original image available so the color operation remains reversible.

Use distribution matching without semantic claims

Test identical distributions, monochrome inputs, tiny palettes, disjoint gamuts, gradients, high-frequency patterns, transparent regions, unequal sample counts, repeated values, empty masks, extreme blend strengths, and fixed seeds. Reject non-finite coordinates and display all gamut corrections.

A portrait's skin, a product's brand color, or a warning state has semantic meaning that unsupervised color transport does not know. Protect those regions or choose a more explicit grading workflow. Never claim that the algorithm recognized or preserved an object unless a separate, evidenced semantic system did so.

Optimal transport color transfer is valuable because it turns palette borrowing into an inspectable mathematical process. The creative judgment remains in reference selection, masks, space, blend, and the decision to accept structural change.

Open the Canvas lab, regenerate both seeded fields, and inspect the transfer receipt. Then add one protected region and a gradient-change diagnostic before applying the method to any external image with documented rights.

In the synthetic study, optimal transport color transfer should preserve both generator seeds and the full projection sequence. Compare palette transfer, color distribution matching, sliced Wasserstein diagnostics, and Canvas color grading as related labels with different roles, not interchangeable quality claims. Add a grayscale structure proof and one extreme-reference rejection case; a beautiful color cloud is insufficient when local edges or protected brand colors leave their declared bounds.

The optimal transport color transfer receipt should also report the accepted blend strength and output-space conversion. Preserve the untouched source as a reversible layer, then require a reviewer to approve both the color result and the structural diagnostic.