Gamut Map User Guide
A complete workflow guide for the colorimetry gamut mapping lab: CIELAB L* slices, RGB color spaces, mapping methods, probe analysis, Delta E checks, boundary and volume comparison, batch mapping, exports, share URLs, and Library saves.
Overview
Gamut Map helps you see what happens when colors move between sRGB, Display P3, Rec.2020, Adobe RGB, and ProPhoto RGB. The Lab tab draws fixed-lightness CIELAB slices for the source and mapped target, the Boundary tab compares gamut boundaries and volume, and the Export tab exports images and maps batches of HEX colors. It is designed for education, design QA, ICC workflow planning, and wide-gamut handoff notes.
1. Workspace Layout
+Gamut Map is a tabbed research page. The first tab is the live tool; the remaining tabs are Boundary (gamut boundaries up the lightness axis and CIELAB Monte Carlo volume), Methods (what each mapping method does), Data (the datasets behind every figure), Export, and Reference, which holds the standards, formulas, citations, and research notes.
- Lab: base color, L* slice, source and target spaces, mapping method, sampling, overlays, Delta E playground, source canvas, mapped canvas, stats, probe, and before/after view.
- Export: source PNG export, mapped PNG export, JSON export, share URL, and batch gamut mapping.
- Standards: summaries for sRGB, Display P3, Rec.2020, Adobe RGB, ProPhoto RGB, ICC rendering intents, Delta E formulae, and CIELAB.
- Formulas: math notes for color space matrices, gamut mapping intents, boundary slicing, Monte Carlo volume, and Halton sampling.
- Citations: source standards and research citations for color spaces, gamut mapping algorithms, Delta E, and sampling.
- Research notes: practical notes on rendering intents, gamut boundary shape, area versus volume, and production workflow.
2. Core controls
+- Base color: choose a HEX color, use the native color picker, or click Random. The info panel reports Lab, LCh, and source/target in-gamut status.
- L* slice: selects the CIELAB lightness cross-section from 5 to 95. Low values inspect shadows, mid values show large gamut differences, and high values inspect highlights.
- Source space: the space the input colors are interpreted in.
- Target space: the destination gamut used for mapped output.
- Supported spaces: sRGB / Rec.709, Display P3, Rec.2020, Adobe RGB, and ProPhoto RGB.
- Swap Source and Target: reverses the conversion direction and refreshes the slices.
- Compression strength: sets how far chroma compression moves an out-of-gamut color, from 0 (keeps the original chroma and leaves it to the final clip) to 1 (lands exactly on the target boundary). The default is 0.9.
3. Mapping methods
+- Chroma compression: reduces LCh chroma along the same hue direction until the color fits in the target gamut. Use it when preserving overall relationships matters more than exact channel values.
- Clip in target RGB: converts into the target space and clips channels to the displayable 0 to 1 range. Use it for logos, spot-like colors, or when in-gamut colors should remain unchanged.
- Uniform RGB scale: scales target RGB values toward a displayable range. Use it for charts, dashboards, and vivid graphics where punch matters.
- Adapt white, then clip: applies Bradford white-point adaptation from source to target white and then clips. Use it for white point comparison.
- Method caveat: these are this lab's own methods, not ICC rendering intents. Production ICC conversions can include vendor tables, device profiles, black point compensation, and measured profile data.
4. Sampling and overlays
+- Resolution: controls slice sampling density from 60 by 60 to 512 by 512. Higher values improve detail and cost more rendering time.
- Uniform grid: deterministic rectangular sampling. It is predictable and good for screenshots.
- Stratified: jitters samples within cells, which can reduce visible grid artifacts but can vary between refreshes.
- Halton: uses a low-discrepancy base 2 and base 3 sequence for smoother coverage at lower sample counts.
- Adaptive edge refinement: stored in state and the UI for future refinement experiments. The current render path is controlled by resolution and sampler choice.
- Mark out-of-gamut: draws the target boundary on the source slice so you can see where source colors exceed the target gamut.
- Show base color: places the selected base color on the Lab slice.
- Hue tick lines: draws radial tick guides every 30 degrees.
- Gamut boundary outlines: draws source and target boundary contours.
- Axes and labels: keeps the a* and b* context visible on the slice canvases.
5. Result Views and Probe
+- Source Slice: shows the CIELAB a*b* disk at the selected L* for the source gamut. Only in-source-gamut points are filled.
- Mapped to Target: shows the same source slice after target-gamut mapping with the selected mapping method.
- Stats: reports L*, source boundary area, target boundary area, source-to-target ratio, intent, sampler, and resolution.
- Probe Point: click either slice canvas to inspect a Lab a*b* point, LCh values, display HEX preview, and source/target in-gamut status.
- Before / After: maps 12 test colors and displays input/output swatches for the active source, target, and intent.
- Visual warning: the slice is displayed through sRGB for browser preview, so very wide gamut colors can be visually clipped on non-wide-gamut displays.
6. Delta E Playground
+- Color A and B: choose two HEX values with color pickers or text inputs.
- Delta E 2000: default metric and usually the best choice for perceptual difference notes.
- Delta E 94: useful for older print and graphic arts comparisons.
- Delta E 76: simple Euclidean Lab distance, useful for quick debugging and legacy comparison.
- Quality label: the result labels the difference Imperceptible, Barely perceptible, Noticeable, Significant, or Very different based on the Delta E 2000 value.
7. Actions and batch mapping
+- Export Source PNG: downloads the source slice canvas.
- Export Mapped PNG: downloads the mapped target slice canvas.
- Export JSON: downloads the active source space, target space, intent, strength, L*, resolution, sampler, and timestamp.
- Share URL: encodes source, target, intent, L*, resolution, sampler, strength, and base HEX as query parameters.
- Boundary slices: the Boundary tab draws the gamut boundary at L* 20, 40, 65, 80, and 90 for the spaces you pick.
- Measure the five: in the Boundary tab, runs a Monte Carlo CIELAB volume estimate for all five spaces with 5,000 to 200,000 samples (20,000 by default) and shows each result with its standard error.
- Batch Gamut Mapping: paste HEX values separated by lines or commas. The tool maps up to 50 valid colors and reports input, output, out-of-gamut status, Delta E 2000, and Lab values.
8. Export, share, and library
+- PNG exports: best for design review, documentation, issue comments, and explaining a specific L* slice.
- JSON config: best for recording the current comparison setup.
- Share URL: best for sending a reproducible view of the current controls. It does not store batch input text.
- Library save: the Library binding captures the first available tool canvas as a Gamut map snapshot. If no canvas is available, it saves a form preset.
- Restore: saved presets are restored through the generic form restore path, and the page also exposes a direct state restore API for richer integrations.
9. Recommended workflows
+- sRGB to Display P3 UI review: set source to sRGB, target to P3, inspect L* 50 to 70, and use the base color marker for key brand colors.
- P3 to sRGB fallback: set source to P3, target to sRGB, compare chroma compression and clip in target RGB, then batch-map risky palette colors.
- Print-aware conversion study: compare Adobe RGB and ProPhoto RGB against sRGB or P3, and use the D50/D65 warning in notes when ProPhoto is involved.
- Wider container comparison: use the Boundary tab's slices and Measure the five to explain why Rec.2020 area does not guarantee all perceptual colors are equally available at every L*.
- Delta E handoff: use the Delta E playground for two-color comparisons and Batch Gamut Mapping for palette-level reporting.
10. Troubleshooting
+- Rendering feels slow: lower the resolution slider, switch from stratified to grid, or wait for high-resolution canvases to finish.
- Boundaries look different after refresh: stratified sampling includes random jitter. Use grid or Halton for more stable screenshots.
- Batch ignores a row: the row must be a valid 3-digit or 6-digit HEX color. Invalid entries are skipped.
- Share URL does not include batch colors: share URLs encode the main controls and base HEX only.
- Adaptive edge refinement seems subtle: the current renderer stores the control but does not add a separate adaptive refinement pass.
- Wide-gamut colors look clipped: the browser preview is sRGB-rendered unless the display and browser fully support wide-gamut output. Use the numeric output for decisions.