Hue Spectrum
Relative Luminance (Y)
Chroma Profile (C*)
Perceptual Continuity (ΔE00)
Colour Temperature Profile
RGB Channel Distribution
WCAG Contrast (vs White)
CIE 1931 Chromaticity
Documentation
Start with the plain-language primer, then go as deep as you need
ChromaGrid generates, visualises and analyses discrete sets of colours. You choose a sampling strategy over a colour space, and the tool renders the result as a 2D chip grid, a dedicated full-resolution Image view, a 3D point cloud, or a set of colorimetric charts.
It is built primarily as a teaching and study instrument: the abstractions that make colour science hard to learn — gamut boundaries, perceptual non-uniformity, the difference between luminance and lightness — become things you can rotate, filter and measure. Designers and researchers use the same engine for palette construction and for auditing real colour data.
The central idea
Colour is not a flat list of hex codes — it is a multidimensional space. Building a coherent, perceptually even palette needs both mathematical rigour and something you can actually look at. Switching between 2D chip grids, a dedicated high-speed Image viewport, 3D point clouds and statistical charts turns abstract colour mathematics into a tangible object you can inspect.
What it is for
Deconstruct colour spaces
See how colours sit and interact inside classical spaces (RGB, HSL, HSV), perceptual ones (CIELAB, OKLCH) and physical ones (the visible spectrum) — and why moving between them changes what "evenly spaced" means.
Generate structured systems
Produce mathematically precise colour distributions for design systems, data visualisation and generative work, with the spacing chosen deliberately rather than by eye.
Analyse and filter gamuts
Tune Contrast, Hue Shift, Saturation, Brightness, Levels (Black/White points), and Tint blending with live mode previews across 2D, Image, and 3D viewports.
What it gives you
-
Multidimensional visualisation Switch between a 2D grid, a dedicated Image view for pixel-accurate source image previewing, an interactive 3D point cloud plotting colours at true coordinates, and analytics charts — all on the same set.
-
Live Image & Palette Filters Fine-tune Contrast, Hue Shift, Saturation, Brightness, dual-slider Black & White Levels, and Color Tint blending with sub-16ms pixelated rendering.
-
Perceptual uniformity Modern perceptual spaces (CIELAB, OKLCH) alongside the legacy ones, so you can see directly how much closer they sit to human vision.
-
Data-driven extraction Upload an image to profile its colour and pull out a representative palette using 64³ lattice binning, ranked by frequency.
-
Accessibility and inclusivity Validate palettes against protan, deutan, tritan and achromatopsia simulation with adjustable severity, plus WCAG contrast across the whole set at once.
-
Runs entirely in the browser HTML5 Canvas and WebGL render thousands of chips interactively. Nothing is uploaded, nothing is installed, and any image you open stays on your machine.
If the rest of this documentation looks intimidating, read this section first. It explains what the app is doing using no equations at all. Everything else is detail on top of these six ideas.
A colour is a position, not a name
We normally name colours — "red", "sky blue". Computers place them instead. Give three numbers, get one exact colour. Because it takes three numbers, colours live in a three-dimensional space, like points in a room rather than names in a list.
Try it: open the 3D view. Every dot is one colour, floating at its own position.
There is more than one way to describe a position
You can describe where you are by street address, by GPS coordinates, or by "three doors down from the bakery". All correct, all different systems. Colour spaces are the same idea: RGB, HSL, CIELAB and OKLCH are different addressing systems for the same colours.
Some are convenient for machines (RGB matches how a screen makes light). Some are convenient for people (HSL separates hue from brightness). Some are built to match how we see (CIELAB, OKLCH).
Try it: in the 3D view, switch Colour Space and watch the same colours rearrange.
Equal steps in maths are not equal steps to the eye
This is the single most important idea here. If you ask a computer for ten evenly spaced colours, it gives you ten mathematically even steps — but they will not look evenly spaced. Some jumps appear large, others almost invisible.
Our eyes are far more sensitive to some changes than others, especially in greens and blues. Spaces like CIELAB and OKLCH were invented specifically to fix this: in those spaces, equal numbers really do look like equal steps.
Try it: in Analytics, look at the Perceptual Continuity chart with HSL lattice selected, then with CIELAB lattice. A bumpy line means the steps look uneven; a flat line means they look even.
Your screen cannot show every colour
The set of colours a device can produce is called its gamut. It is smaller than what your eye can see — noticeably so. Vivid turquoises, deep violets and pure spectral colours simply have no screen equivalent.
When a colour falls outside the gamut, something has to give: it gets pushed to the nearest available colour, usually losing vividness. This is why a printed photo rarely matches the screen exactly.
Try it: the CIE 1931 chart shows a horseshoe (everything visible) with a triangle inside it (what sRGB can show). The gap is what you are missing.
"Bright" means several different things
Everyday language has one word where colour science needs three. Luminance is the physical amount of light. Lightness is how bright it looks, which is not the same thing. Luma is a shortcut used in video that resembles both but equals neither.
A useful example: pure yellow and pure blue can be set to the same "50%" in HSL, yet the yellow looks dramatically brighter. Nothing is broken — our eyes are simply much more sensitive to yellow-green light.
Try it: sort by Relative Luminance, then by Luma, and notice the orders differ.
Not everyone sees colour the same way
Roughly one man in twelve has some form of colour vision deficiency. Most commonly, reds and greens become hard to tell apart. If a chart or interface uses colour alone to carry meaning, those users lose the meaning entirely.
The fix is not to avoid colour, but to make sure colour is never the only signal — add shape, position, labels or differences in lightness.
Try it: set Vision Simulation to Deutan and see which of your colours collapse together.
Live Viewports & Image Tuning
ChromaGrid organizes its workspace into dedicated viewports: 2D Grid, Image, 3D Cube, Analytics, and Help. When uploading a photo or fine-tuning filters (Contrast, Hue, Saturation, Brightness, Levels, and Tint), the standalone Image view gives you crisp pixel-hard feedback instantly without slowing down spatial 2D and 3D rendering.
Try it: switch to the Image view tab and drag the Contrast or Levels sliders in the sidebar.
Comfortable with those six? Open Core Concepts for the same ideas with the actual terminology and numbers. Each concept there starts in plain language too, with the technical detail tucked behind a toggle — so you can go as deep as you need and no deeper.
If this is your first time in ChromaGrid, work through these four steps in order. Each one introduces one idea.
- Generate a set or extract from an image. Leave the defaults and look at the 2D Grid. Choose Image-Based Extraction under Sampling Method to upload a source image. Switch to the dedicated Image view tab to inspect the source image with crisp pixel-hard rendering.
- Tune Image & Palette Filters. Open the Filters & Simulation section in the sidebar. Adjust Contrast, Hue Shift, Saturation, Brightness, dual-slider Black/White Levels, or Tint blending. Filter adjustments update live across all viewports.
- See the shape of the space. Switch to 3D Cube. The same colours are now plotted at their coordinates. Change Colour Space from HSL to LAB: notice that the tidy HSL cylinder becomes a lopsided blob. That irregular solid is the real sRGB gamut; the cylinder was a convenient fiction.
- Measure it & simulate vision. Open Analytics to check ΔE00 perceptual distance. Set Vision Simulation to Deutan or Protan to test accessibility.
Generate 512 colours with HSL lattice, then with CIELAB lattice, and compare the ΔE00 charts. HSL will show large spikes — equal steps in HSL are not equal steps in perception. This single comparison motivates the entire existence of CIELAB and OKLCH more effectively than a derivation does.
Perceptual Uniformity
Ask for ten evenly spaced colours and you get ten mathematically even steps — but they will not look evenly spaced. Some jumps seem huge, others nearly invisible. A "perceptually uniform" space fixes this: equal numbers finally mean equal-looking changes.
RGB and HSL are not uniform. CIELAB and OKLCH very nearly are, which is why they are worth the extra complexity.
Technical detail
RGB and HSL are non-linear with respect to human vision, so Euclidean distance in those spaces is a poor predictor of perceived difference. CIELAB and OKLCH are constructed so that Euclidean distance approximates perceived difference for a standard observer under reference conditions.
The approximation is imperfect. CIELAB has known hue non-linearity, most visibly a blue-to-purple shift when lightening blues; OKLCH was designed specifically to correct it. Neither space is uniform for large colour differences, which is precisely why CIEDE2000 adds weighting functions on top of CIELAB rather than relying on raw distance.
Tristimulus Theory (XYZ)
Your eye has three kinds of colour sensor, tuned roughly to long, medium and short wavelengths. Everything you perceive as colour is your brain comparing three numbers from those sensors.
That is why colour is three-dimensional — and why three numbers are enough to specify any colour. XYZ is the scientific reference version of those three numbers; every other space here is a re-packaging of it.
Technical detail
The CIE 1931 XYZ space models the response of the L, M and S cones through a set of colour-matching functions derived from matching experiments over a 2° field. Y is defined to carry luminance, so the photopic V(λ) curve is built into it directly; X and Z together fix chromaticity.
XYZ is device-independent and serves as the connecting space for all conversions in the app: sRGB → linear RGB → XYZ → CIELAB, and so on. The 1931 functions have documented deficiencies in the blue region and apply strictly to small fields; the 1964 10° observer suits large-field work but is not implemented here.
Delta E (ΔE) & Colour Difference
ΔE is a single number answering "how different do these two colours look?" Around 1 means you would only notice the difference side by side. Around 5 is obvious. Above 10 they read as separate colours.
It is useful because "quite similar" is not something you can put in a specification, and ΔE is.
The original CIE76 formula is plain Euclidean distance in CIELAB. Its just-noticeable difference is approximately 2.3, not 1.0, and it badly over-weights differences among saturated colours.
ChromaGrid's Analytics view therefore reports CIEDE2000 (ΔE00) — the current CIE recommendation (CIE 142:2001 / ISO 11664-6), which adds lightness, chroma and hue weighting functions plus a rotation term for the blue region. For ΔE00 the JND is approximately 1.0, and that threshold is drawn on the chart. CIE76 remains available in the API as calculateDeltaE for comparison.
MacAdam Ellipses
In the 1940s David MacAdam asked people to say when two colours started to look different. He drew the boundary around each colour where the difference became noticeable — and found the boundaries were wildly different sizes.
In the greens they were enormous: you can move a long way and see no change. In the blues they were tiny: a small move is obvious. That single experiment proved the standard colour chart does not match human vision, and motivated everything that followed.
Technical detail
A MacAdam ellipse encloses the colours indistinguishable from its centre to an average observer, plotted on the CIE 1931 chromaticity diagram. Their size and orientation vary by roughly an order of magnitude across the diagram — large and elongated in the greens, small in the blues.
A perceptually uniform space is, in effect, one that transforms these ellipses toward circles of equal radius. CIELAB and OKLCH approach that goal without fully reaching it, which is why ΔE00 retains chroma and hue weighting terms and a rotation term specifically for the blue region.
Lightness, Luminance, Luma
Three quantities that are constantly confused. They are not interchangeable, and substituting one for another is among the most common errors in colour code.
- Relative luminance Y Photometric
- Linear in light energy, weighted by the photopic V(λ) curve. Computed with the ITU-R BT.709 coefficients (0.2126 / 0.7152 / 0.0722) on linearised sRGB. This is the quantity WCAG contrast is built on.
- Lightness L* Perceptual
- Roughly the cube root of Y. Middle grey sits at L* ≈ 50 but at only Y ≈ 0.18 — which is why a luminance ramp looks bottom-heavy compared with how the eye reads it.
- Luma Y′ Not luminance
- A video-engineering shortcut computed on gamma-encoded signals (BT.601 uses 0.299 / 0.587 / 0.114). Despite the similar name and symbol it is a different quantity, and must not be substituted for Y.
Analytics labels the luminance chart Y for exactly this reason.
Correlated Colour Temperature (CCT)
Heat a piece of metal and it glows red, then orange, then white, then bluish. Colour temperature borrows that scale: a "warm" 2700 K bulb is orange-ish, a "cool" 6500 K one is blue-ish.
Confusingly, higher numbers mean cooler-looking light. The number describes the temperature of the glowing object, not the mood of the light.
Formally, CCT is the temperature of the blackbody radiator whose chromaticity is closest to the stimulus. ChromaGrid uses McCamy's (1992) cubic approximation.
Crucially, CCT is only meaningful near the Planckian locus. A saturated green has no correlated colour temperature — but McCamy's polynomial will still return a plausible-looking number for it. ChromaGrid therefore also computes Duv, the signed distance from the locus in CIE 1960 UCS, and reports what proportion of your palette is close enough (|Duv| < 0.05) for the figure to mean anything. Read the "Near locus" statistic before trusting the average.
HSL's 50% Lightness is not middle grey, and the reason is luminance, not the Helmholtz-Kohlrausch effect. Pure green at L=50% has Y ≈ 0.72; pure blue at L=50% has Y ≈ 0.07 — a tenfold difference — because the photopic response peaks near 555 nm. H-K is a separate phenomenon: at equal luminance, more saturated colours look brighter. The two are routinely conflated.
Real-Time Image & Palette Filtering
Functional Description: Fine-tunes palette colors and uploaded source images via Contrast, Hue Shift, Saturation, Brightness, dual-slider Black & White Levels, and Tint blending controls.
Scientific Principle: Applies floating-point per-pixel transformations in sRGB and HSL space. Contrast uses standard sRGB S-curves, Levels maps black and white clipping points, and Tint blends targeted RGB values via linear alpha composition. Filter transformations carry through directly to generated palettes, 3D point clouds, and high-resolution image downloads.
Dedicated Image Viewport
Functional Description: Provides a standalone viewport mode for inspecting uploaded source images with live filter transformations applied.
Implementation: Renders via HTML5 Canvas with hard-pixel crisp edge rendering (`image-rendering: pixelated; imageSmoothingEnabled = false`) and sub-16ms `requestAnimationFrame` updates. Computation is isolated to the Image view, keeping 2D grid and 3D rendering loops completely unblocked.
3D Point Cloud Visualisation
Functional Description: Maps discrete colour samples as coordinates in a 3D Cartesian or Cylindrical coordinate system.
Scientific Principle: Visualisation of colour gamuts as geometric solids (e.g., the HSL double-cone or RGB cube). Implementation leverages Three.js for real-time WebGL rendering with support for spatial binning and frequency-based point scaling.
Colour Vision Deficiency Simulation
Functional Description: Renders the grid and point cloud as they would appear to an observer with protan, deutan or tritan deficiency, or with achromatopsia. A severity control interpolates between normal trichromacy (0%) and full dichromacy (100%), modelling anomalous trichromacy in between.
Method: The physiologically-based shift matrices of Machado, Oliveira & Fernandes (2009), applied in linear RGB. This detail matters: the same matrices are widely circulated in SVG snippets that apply them to gamma-encoded values, which produces visibly wrong results. Achromatopsia collapses to CIE relative luminance rather than BT.601 luma, for the reason given under Luminance, Lightness, Luma.
Limitations: This is simulation, not daltonization — ChromaGrid does not recolour palettes to compensate for deficiency. The models describe the mean observer of each category; individual variation is considerable. Simulation affects the on-screen preview only and does not alter exported files.
Spectral Domain Mapping
Functional Description: Synthesises colours from monochromatic wavelengths across the visible range (380–780 nm).
Method: Each wavelength is converted to CIE XYZ by linear interpolation of the CIE 1931 2° colour-matching functions (tabulated at 5 nm), then to linear sRGB, then gamut-mapped by adding achromatic light until no component is negative, then normalised and gamma-encoded.
Limitations: Almost every spectral colour lies outside the sRGB gamut — the spectral locus is a curve, sRGB is a triangle inscribed within it. The desaturation step is therefore a deliberate compromise: hue direction is preserved, purity is not. What you see approximates the hue of monochromatic light; no sRGB display can reproduce its actual appearance.
3D Point & Lattice Shape Geometries
Functional Description: Generates structured color sets along 3D spatial volumes and surface shells including Lattices, Cubes, Pyramids, Spherical Globes, Volumetric MRI Slice Atlases, Cylinders, Cones, Torus/Donuts, Hyperboloids, Möbius Strips, and 3D DNA Helices.
Scientific Principle: Distributes sample coordinates across parametric 3D manifolds prior to color domain transformation. Surface shell options expose interior gamut hollows, while volume sampling generates solid color clouds. Axis orientation controls (Pitch, Yaw, Roll, Diagonal, Inverted) rotate the sampling manifold relative to primary axes.
Multi-Domain Sampling Spaces
Functional Description: Selects which mathematical coordinate space is sampled to generate colors: sRGB, HSL, HSV, CIELAB, OKLCH, CIE XYZ, or YCbCr.
Scientific Principle: Sampling in perceptually uniform spaces (CIELAB, OKLCH) produces evenly spaced color sets, whereas sampling in sRGB or HSL introduces perceptual clustering due to non-uniform space metrics. Out-of-gamut domain coordinates are rejected against sRGB boundaries.
Dual Camera Projection Modes
Functional Description: Toggles 3D scene rendering between Perspective (foreshortened natural depth) and Orthogonal (parallel isometric projection without depth distortion).
Application: Perspective mode delivers intuitive 3D spatial depth cues during interactive orbits, while Orthogonal mode allows precise coordinate measurements and planar alignment checks across color spaces.
Gamut-Aware Saturation & Offset Tuning
Functional Description: Provides Gamut-Aware Saturation, Linear Saturation Offset, Vibrance, and dual-slider Black/White Levels controls.
Scientific Principle: Gamut-Aware Saturation non-linearly scales chroma within local sRGB boundaries to prevent out-of-gamut clipping and premature boundary saturation collapse. Linear Saturation Offset applies direct additive chroma shifts across code values.
| Model | Type | Characteristics & Application |
|---|---|---|
| CIE XYZ | Tristimulus | The master reference space based on human biological cone responses. Serves as the mathematical bridge between all other colour spaces. |
| sRGB | Additive | Standard for digital displays. Non-perceptual, gamma-corrected model for web and digital media. |
| CIELAB | Perceptual | Device-independent space defined by L* (Lightness), a* (Green-Red), and b* (Blue-Yellow). |
| OKLCH | Polar | Modern evolution of CIELAB. Corrects hue shifts (particularly in blue) and offers superior hue linearity. |
| CMYK | Subtractive | Process model for ink reproduction. ChromaGrid computes the naive algebraic CMYK (K = 1 − max(R,G,B)), which is device-independent arithmetic, not a printing profile. Real separations require an ICC profile for the specific press, ink set and substrate. Use these values for illustration, never for production. |
| HSV/HSL | Cylindrical | Mathematical transformations of RGB designed for human-friendly interface controls, though visually non-linear. |
An ICC profile does not add colour, and it does not physically change your screen. It defines what a set of RGB values means — for a particular colour space, or for a particular device.
Consider a pixel holding R = 200, G = 50, B = 50. Those three numbers do not, on their own, specify a visible colour. What you see depends entirely on whether they are interpreted as sRGB, Adobe RGB, Display P3 or ProPhoto RGB — the same triplet lands on a different physical colour in each. The profile is what tells colour-managed software which interpretation to apply.
The embedded image profile
Attached to the file itself. It answers one question: what colour space were these numbers written in?
Without it the file is untagged, and software has to guess — almost always by assuming sRGB. When the guess is wrong, the image is displayed with the wrong meaning applied to correct numbers.
The monitor profile
Describes how your particular display actually reproduces colour — usually built by measuring it with a colorimeter.
- Red, green and blue primaries
- White point
- Gamma / tonal response
- Achievable gamut
- Deviations from neutral grey
How the two are used together
A colour-management system needs both. It reads the image profile to establish what the numbers mean, converts into a device-independent reference, then reads the monitor profile to work out which numbers this display needs in order to produce that colour:
- 1Image RGB valuesThe numbers stored in the file.
- 2Image ICC profileEstablishes what those numbers mean.
- 3Device-independent colourAn absolute coordinate — CIE XYZ or CIELAB.
- 4Monitor ICC profileDescribes what this display actually does.
- 5Corrected display RGB valuesWhat is finally sent to the panel.
Does it change the colours, or only the values?
It changes the values. The point of changing them is to keep the colour the same.
Because your monitor's red, green and blue behaviour is not perfectly standard, the graphics system compensates on the way to the panel:
200, 50, 50
194, 55, 48
Different numbers, in order to arrive at the same perceived colour. Illustrative figures — the real correction depends on your measured display.
Assign versus convert
This is where most confusion lives, and the two operations are close to opposites.
| Operation | Pixel values | What actually happens |
|---|---|---|
| Assign profile Reinterpret |
Unchanged | Changes how the existing numbers are interpreted. Appearance can shift dramatically. Assigning Adobe RGB to an untagged file that was really sRGB makes it read as over-saturated and hue-shifted — the pixels never moved, only their meaning did. Use it to correct a wrong or missing tag. |
| Convert to profile Re-encode |
Changed | Rewrites the numbers so the appearance survives the move to another space. Adobe RGB → sRGB alters every pixel value, with the aim of keeping the visible colour as close as the destination gamut permits. Colours outside that gamut cannot survive intact; the rendering intent decides how they are handled. |
What a profile cannot do
- It cannot exceed the physical gamut. A monitor profile improves accuracy within what the panel can already produce. It will not turn an sRGB display into a Display P3 or Adobe RGB one — colours outside the hardware's reach are mapped to the nearest reproducible ones, not conjured.
- It only works if the software honours it. Applications that ignore ICC profiles push image values straight to the screen with no conversion. That is why one photo can look correct in Photoshop or a colour-managed browser and visibly wrong in an unmanaged viewer on the same machine.
- It cannot fix an unstable display. A profile is a snapshot of measured behaviour. Panels drift with age and warm-up, so profiles need periodic re-measurement to stay true.
An ICC profile gives meaning to colour values, and colour-management software may change those values so that the displayed colour comes out right.
ChromaGrid is not colour-managed. It reads no ICC profile from an uploaded image and embeds none in its exports, it does not know your display's primaries, and it assumes sRGB throughout. Two consequences follow. An uploaded wide-gamut photograph is analysed as though its numbers were sRGB, so the extracted coordinates are wrong for that file — convert it to sRGB before uploading. And on a wide-gamut display without correct system-level management, the chips you see on screen are not the colours the numbers describe.
Interpreting Analytics
The Analytics View provides histograms and continuity charts. A smooth ΔE curve indicates a perceptually fluid gradient, while "spikes" suggest high contrast steps. The Hue Spectrum chart reveals gaps in chromatic coverage, essential for verifying the "completeness" of a generated gamut.
Perceptual Coding & Gamma
Human sensitivity to luminance is strongly compressive. Weber-Fechner proposed a logarithmic relation; Stevens' power law (sensation ∝ intensity≈0.33 for brightness) fits the data better, and is why CIELAB's L* uses a cube root.
A historical caution worth passing on to students: sRGB's ≈2.2 transfer function was not designed for perceptual coding. It was inherited from the electron-gun response of CRT displays. That it also happens to distribute 8-bit code values close to perceptually evenly — allocating more precision to darks, where we discriminate best — is a fortunate coincidence that was then deliberately preserved in later standards.
The "blue shift" in CIELAB means that as blue colours are lightened, they mathematically trend toward purple. OKLCH was specifically designed to correct this, making it superior for generating UI colour ramps.
Concrete workflows, ordered by audience. Each states the goal, the steps, and how to read the result — including where the method stops being reliable.
Teaching & study
Demonstrating perceptual non-uniformity
Show why CIELAB and OKLCH exist.
- Generate 512 colours with HSL lattice, sort by Relative Luminance, open Analytics and note the ΔE00 curve.
- Switch the algorithm to CIELAB lattice, keeping everything else fixed. Compare.
Reading it: HSL produces large spikes — equal coordinate steps give wildly unequal perceived steps. LAB is far flatter. One comparison motivates the whole field more effectively than a derivation.
The gamut is a solid, not a cube
Replace the tidy mental model with the real shape.
- Generate 4096 colours with sRGB lattice and open the 3D view.
- Switch Colour Space from HSL to LAB and rotate. Enable LAB Gamut Outline.
Reading it: the cylinder becomes a lopsided solid, widest at mid-lightness and pinching to points at black and white. Available chroma depends on both hue and lightness — yellows reach much further than blues.
Why spectral colours cannot be shown
Make gamut limits concrete rather than abstract.
- Choose Visible Spectrum with 400 colours.
- Open Analytics and find the CIE 1931 chart.
Reading it: the palette traces the spectral locus while the sRGB triangle sits well inside it. Every colour shown has been desaturated to fit — the hue is approximated, the purity is not reproducible on any sRGB display.
Design & front-end
Building an evenly spaced UI ramp
Steps that look equally spaced, not just measure equally spaced.
- Use OKLCH lattice, or Monochromatic with your brand colour as the base.
- Sort by Relative Luminance, then check ΔE00 in Analytics.
- Adjust the count until the curve sits flat and above the JND line.
- Export as JSON for your design tokens.
Reading it: a flat curve near ΔE00 ≈ 1–3 means neighbouring steps are evenly and just-distinguishably spaced. Values below 1 mean two steps nobody can tell apart.
Auditing a palette for accessibility
Check that colour-encoded meaning survives real vision.
- Generate or extract your palette.
- Set Vision Simulation to Deutan, then Protan, then Tritan, sweeping severity from 0 to 100%.
- Check the WCAG Contrast chart for legibility against white.
Reading it: colours that converge under simulation cannot carry meaning on their own — pair them with shape, position or a label. Note that contrast depends only on luminance, so two very different hues can be equally illegible.
Extracting a palette from imagery
Derive a scheme from a photograph or artwork.
- Choose Image-Based Extraction and upload the image.
- Set the target count to the palette size you want — swatches are ranked by pixel population, so truncation keeps the dominant colours.
- View in 3D with Spatial Binning to see how the colours cluster.
Reading it: a tight cluster means a colour-cast or limited image; a spread cloud means a varied one. Frequency ranking reflects area, not visual importance — a large dull background will outrank a small vivid subject.
Research & applied
Print calibration & gamut accuracy testing
Find which regions of colour space your printer reproduces badly.
- Generate a structured test target — sRGB lattice or CIELAB lattice for even coverage, or Randomised ordering for an unbiased sheet.
- Set Export Size to your sheet resolution and download the grid as a PNG.
- Print it, then compare against the screen — or measure the print with a spectrophotometer and plot the readings back in LAB.
Reading it: the regions that shift most are the ones needing profile correction or gamut mapping — typically saturated cyans, deep shadows and specific hue transitions. Export the JSON alongside the image so every chip has a reference value to measure against.
Before you rely on this
- Not colour-managed. ChromaGrid embeds no ICC profile. The exported PNG is untagged sRGB.
- Your pipeline decides the result. Driver, paper, ink and rendering intent all reinterpret those values — keep the pipeline fixed between runs or the comparison means nothing.
- Measure, don't eyeball. Screen-to-print comparison by eye is confounded by ambient lighting and adaptation. Use a spectrophotometer for anything you intend to act on.
Estimating ink count for screen printing
Find the minimum set of colours that still reproduces a design.
- Extract the palette from the artwork.
- In 3D, choose LAB or OKLCH space, enable Spatial Binning and set Point Size Scaling to logarithmic.
- Lower Bin Resolution until the cluster count matches your screen budget.
Reading it: each surviving point is one candidate ink. Bin in a perceptual space — cells in HSL cover unequal perceptual volumes and will merge colours that plainly differ. Cell boundaries are arbitrary, so treat the count as an estimate to verify against a proof.
Checking a design against a physical gamut
Catch unreachable colours before committing to material.
- Plot measured dye or ink coordinates to establish the achievable region.
- Extract the digital design's palette and compare positions in LAB or OKLCH.
- Use the sRGB Area statistic and the CIE 1931 chart to judge how far outside the design sits.
Reading it: colours beyond the achievable region will render duller than intended. ChromaGrid is not colour-managed and reads no ICC profiles, so this identifies candidates for attention — it does not replace a measured proof.
Auditing optical mixing in woven textiles
Predict how crossing yarns will read at viewing distance.
- Take your warp and weft yarn colours as the endpoints.
- Use Monochromatic or a CIELAB lattice filtered to that range to generate uniform steps between them.
- Inspect the intermediate steps in LAB, and check the ΔE00 chart for how evenly the blend progresses.
Reading it: yarns that cross the neutral axis on the way between endpoints — a yellow and a blue, for instance — pass through desaturated greys, which is what "muddy" looks like numerically. Pairs that stay at similar chroma throughout blend more cleanly.
Before you rely on this
- Wrong mixing model. This is additive mixing of light. Real cloth involves subtractive behaviour at the fibre plus additive blending at distance.
- Structure is ignored. Yarn geometry, twist, sett and float length change the proportion of each colour visible, and none of them are modelled here.
- Surface is ignored. Specular reflection off the fibre lightens the apparent colour, especially on silk and synthetics.
- Use it as a shortlist. Never as a substitute for a woven blanket or a physical sample.
Tracking colour change over time
Quantify fading, wear or degradation.
- Record spectrophotometer readings at each interval.
- Plot the coordinates in LAB and read ΔE00 between successive measurements.
Reading it: ΔE00 gives a defensible magnitude for the shift, and the direction in a*/b* indicates which colourant is degrading first. ΔE00 assumes reference viewing conditions; readings taken under different geometry or illumination are not directly comparable.
Digital art auditing & comparing image colour distributions
Explore how differently two images occupy colour space.
- Extract each image's palette in turn with Image-Based Extraction.
- Plot in 3D using LAB or OKLCH, with Point Size Scaling set to logarithmic.
- Compare cluster compactness, banding, gradient smoothness and the sRGB Area statistic.
Reading it: photographs from a sensor pass through demosaicing, white balance and tone mapping, which tends to leave broad, noisy distributions. Heavily processed, illustrated or synthesised images can show tighter clusters, visible banding or unusually smooth gradients. Those differences are visible here and are worth noticing.
This is not a way to detect AI-generated images
- Visual inspection is not a method. Published approaches use learned inter-channel correlations, not someone looking at a point cloud.
- Even those methods are fragile. They are generator-specific, degrade badly under JPEG compression or resizing, and lose power as models improve.
- The signatures are not unique. Editing, stylisation, film stock, unusual lighting and screenshots all produce the same patterns.
- Never treat this as evidence of origin. A difference you notice is a question to investigate by other means — nothing more.
Read this section before citing ChromaGrid output in coursework or research. Every item below is a real constraint on what the numbers mean.
- Out-of-gamut handling is rejection, not rendering intent. When sampling CIELAB or OKLCH, most lattice points fall outside sRGB. ChromaGrid discards those candidates rather than gamut-mapping them. It does not implement relative or perceptual colorimetric intent. Consequence: the returned set is biased toward the interior of the sRGB solid, and distribution statistics describe the surviving samples, not the space you asked to sample.
- Uniform sampling of a space is not uniform sampling of the gamut. A regular lattice in LAB intersected with the sRGB solid gives an irregular set, because the solid is irregular. Do not read the resulting density as a property of human vision.
- No colour management. ChromaGrid reads no ICC profile from an uploaded image, embeds none in its exports, does not know your display's actual primaries, and assumes sRGB throughout. A wide-gamut file is therefore analysed as though its values were sRGB — convert to sRGB before uploading. On a wide-gamut display without correct system-level management, what you see is also not what the numbers say. See ICC Profiles & Colour Management for the full picture.
- 8-bit quantisation. All output is quantised to 8 bits per channel, producing banding in smooth ramps — most visibly in dark tones and in the blue region, where code values are sparse relative to discrimination.
- Metamerism is out of scope. Colorimetry describes matches for one observer under one illuminant. ChromaGrid assumes D65 and the CIE 1931 2° observer; it models no spectral power distributions and cannot predict metameric failure between physical samples.
- The 2° observer is a compromise. The CIE 1931 2° functions have known deficiencies in the blue region and apply to small fields. For large-field work the 1964 10° observer is more appropriate; ChromaGrid does not implement it.
- CIE76 vs CIEDE2000. Analytics reports ΔE00. Any figure you may have recorded from earlier versions of this tool used CIE76 and is not comparable.
Sources for each implemented model, so that results can be checked and cited.
| Component | Source |
|---|---|
| sRGB primaries & transfer function | IEC 61966-2-1:1999 |
| CIELAB, constants ε = 216/24389, κ = 24389/27 | CIE 15:2004, Colorimetry, 3rd ed. |
| ΔE00 (CIEDE2000) | CIE 142:2001; ISO/CIE 11664-6:2014. Verified against all 34 test pairs in Sharma, Wu & Dalal (2005), Colour Res. Appl. 30(1). |
| Colour-matching functions | CIE 1931 2° standard observer, 5 nm tabulation |
| CCT estimation | McCamy (1992), Colour Res. Appl. 17(2), 142–144 |
| Duv / Planckian distance | Ohno (2013), LEUKOS 10(1), 47–55 |
| CVD simulation | Machado, Oliveira & Fernandes (2009), IEEE TVCG 15(6), 1291–1298 |
| OKLab / OKLCH | Ottosson (2020), A perceptual colour space for image processing |
| Contrast ratio | W3C WCAG 2.2, §1.4.3 / 1.4.6 |
| YCbCr | ITU-R BT.601-7 (studio swing, 16–235) |
The CIEDE2000 implementation reproduces all 34 published Sharma et al. reference pairs to within 1×10⁻⁴. CIELAB conversion round-trips sRGB to within 5×10⁻⁴ of a code value, and reproduces the standard reference values for the sRGB primaries to two decimal places.
- Additive vs Subtractive
- Additive mixing combines emitted light — red, green and blue sum to white, as on a display. Subtractive mixing removes wavelengths from reflected light, as with inks and dyes, where the primaries darken toward black. The two behave oppositely, which is why a screen design rarely survives a naive transfer to print.
- Anomalous Trichromacy
- A colour vision deficiency in which all three cone types are present but one has a shifted spectral sensitivity — protanomaly, deuteranomaly, tritanomaly. Far more common than dichromacy, and the reason the vision simulation offers a severity control rather than an on/off switch.
- Chroma (C*)
- Distance from the neutral axis in CIELAB, √(a*² + b*²) — how colourful a colour is at a given lightness. Distinct from HSL saturation, which is a crude ratio computed from RGB extremes and carries no perceptual meaning.
- Chromatic Adaptation
- The visual system's automatic renormalisation to the prevailing illuminant, which keeps a white page looking white under daylight and tungsten alike. Transforms such as Bradford model it numerically when converting between white points. ChromaGrid assumes D65 throughout and performs no adaptation.
- Chromaticity
- The colour of a stimulus independent of its intensity — hue and purity with luminance divided out. Two colours with the same chromaticity but different luminance plot at the same point on a CIE 1931 diagram.
- CIE 1931 2° Standard Observer
- The colour-matching functions defining how a hypothetical average human responds to each wavelength, measured over a 2° field. The foundation of all CIE colorimetry. A 10° variant exists for larger fields; ChromaGrid uses the 2° set.
- CIEDE2000 (ΔE00)
- The current CIE-recommended colour-difference formula, adding lightness, chroma and hue weighting plus a rotation term for the blue region. Its JND is ≈1.0. The older CIE76 is plain Euclidean distance in CIELAB with a JND of ≈2.3 — figures from the two are not comparable.
- Colour Space vs Colour Model
- A colour model is a mathematical description of colour as a tuple, such as RGB. A colour space is a model plus a concrete mapping to real, measurable colour — sRGB is the RGB model with defined primaries, white point and transfer function. "RGB" alone does not specify a colour.
- Dichromacy
- Colour vision with only two functioning cone types — protanopia (no L), deuteranopia (no M), tritanopia (no S). Such observers can match any colour with two primaries rather than three, collapsing the three-dimensional colour space to two.
- Duv
- Signed distance of a chromaticity from the Planckian locus in CIE 1960 UCS. Positive is above the locus (greenish), negative below (pinkish). CCT is conventionally treated as meaningful only when |Duv| < 0.05.
- Gamma / Transfer Function
- The non-linear encoding between stored code values and light output. sRGB's ≈2.2 curve was inherited from CRT behaviour, though it also happens to distribute 8-bit values close to perceptually evenly. Any luminance calculation must linearise first.
- Gamut
- The full set of colours a device or system can reproduce. In three dimensions the sRGB gamut is an irregular solid, not a cube — widest around mid-lightness and pinching to single points at black and white.
- Gamut Mapping
- Bringing out-of-gamut colours inside a reproducible range. Relative colorimetric clips to the nearest reproducible colour; perceptual compresses the whole gamut to preserve relationships. ChromaGrid does neither — it discards out-of-gamut samples, which is a third and blunter option.
- Helmholtz-Kohlrausch Effect
- A highly saturated colour appears brighter than a less saturated one of the same luminance. Note the qualifier: H-K is not why yellow looks brighter than blue in HSL — that is a luminance difference from the photopic V(λ) curve. The two are routinely conflated.
- Illuminant D65
- A CIE standard illuminant representing average daylight, CCT ≈ 6504 K. The reference white point for sRGB and for all CIELAB conversions here.
- ICC Profile
- A file describing what RGB values mean — either for a colour space (sRGB, Adobe RGB, Display P3) or for a specific device. An embedded image profile says what space the pixel values were written in; a monitor profile records that display's measured primaries, white point, gamma and gamut. A profile adds no colour and cannot exceed a panel's physical gamut; it supplies the interpretation that colour management needs. ChromaGrid reads and writes none.
- Assign vs Convert (profile)
- Assigning a profile leaves the pixel values untouched and changes only how they are interpreted, so the appearance can shift sharply — the fix for a wrong or missing tag. Converting rewrites the pixel values so the appearance is preserved in a new space, as far as the destination gamut allows. Confusing the two is the most common colour-management error.
- Just Noticeable Difference (JND)
- The smallest stimulus change a standard observer can detect. The threshold depends on the metric: ≈1.0 for ΔE00 but ≈2.3 for CIE76. Quoting a JND without naming the formula is meaningless.
- Luma (Y′)
- A weighted sum of gamma-encoded R′G′B′ used in video engineering. Distinct from relative luminance (Y), which is computed on linear light. Confusing the two is one of the most common errors in colour code.
- MacAdam Ellipse
- A region on a chromaticity diagram within which colours are indistinguishable from its centre. Their sizes and orientations vary dramatically across CIE 1931 — very large in the greens, small in the blues — which is the direct evidence that the diagram is perceptually non-uniform, and the motivation for CIELAB.
- Metamerism
- Two stimuli with different spectral power distributions that match under one illuminant but diverge under another. It is why fabric swatches matched in a shop can clash in daylight. Colorimetry alone cannot predict it; spectral data is required.
- OKLab / OKLCH
- A perceptual space (Ottosson, 2020) that corrects CIELAB's hue non-linearity, notably the blue-to-purple shift that appears when lightening blues. OKLCH is its cylindrical form and is generally the best basis for generating UI colour ramps.
- Perceptual Uniformity
- The property that equal numerical distances correspond to equal perceived differences. CIELAB and OKLCH approximate it; RGB, HSL and HSV do not, which is why equal steps in those spaces produce visibly uneven ramps.
- Planckian Locus
- The path traced on a chromaticity diagram by an ideal blackbody radiator as its temperature varies. Correlated colour temperature is defined by proximity to this curve, and is meaningless far from it.
- Primaries
- The three fixed colours whose combinations define a gamut. Their chromaticity coordinates are what distinguish sRGB from Display P3 from Rec.2020 — the same code value triple means a different physical colour in each.
- Quantisation & Banding
- Rounding continuous colour to discrete code values. At 8 bits per channel a smooth gradient can show visible steps, most obviously in dark tones and in the blue region where code values are sparse relative to discrimination.
- Spatial Binning
- Grouping points in a 3D space into discrete volumetric cells (voxels) so each cell yields one representative point, optionally sized by population. Used to find where a palette is concentrated, and to estimate the minimum set of inks needed to reproduce an image.
- Spectral Locus
- The horseshoe-shaped boundary of the CIE 1931 diagram, traced by monochromatic light from ~380 to ~700 nm. It bounds all physically realisable chromaticities; its straight closing edge is the line of purples, which correspond to no single wavelength.
- Tristimulus Values (XYZ)
- The three numbers describing a colour in the CIE 1931 reference space, derived by integrating a spectrum against the colour-matching functions. Y carries luminance. Every other space here is a transformation of XYZ.
- Gamut-Aware Saturation
- A non-linear saturation scaling algorithm that scales chroma proportionally within the local sRGB gamut boundary. Prevents out-of-gamut clipping and avoids stretching points prematurely against RGB boundaries when reducing or expanding saturation.
- Linear Saturation Offset
- A direct additive or subtractive saturation shift applied uniformly across code values, distinct from multiplicative percentage saturation scaling.
- Möbius Strip Topology
- A non-orientable, single-sided surface topology mapped in 3D colour space, tracing continuous single-twist hue-lightness loops across volumetric boundaries.
- Orthogonal Projection
- A parallel 3D camera projection mode where object size remains constant regardless of distance from the camera, eliminating perspective foreshortening for precise geometric alignment and distance measurement.
- Vibrance
- Selective saturation adjustment that boosts muted, low-saturation tones while protecting highly saturated colors from clipping or over-saturation.
- Volumetric MRI Slice Atlas
- A 3D geometry sampling mode that packs internal sample points along cross-sectional Z-plane slices, creating a tomographic slice atlas of the color solid.
- White Point
- The chromaticity a colour space treats as neutral white, and the reference against which all its other colours are defined. Change the white point and every derived value changes with it.
Engr. Waqas Tariq
By synthesising the physical constraints of industrial textile production with the mathematical rigor of digital colour science, Waqas architected ChromaGrid to serve as a high-fidelity instrument for bridging physical materials and digital design spaces.
Support & Technical Consulting
For enterprise support, custom algorithmic development, integration of proprietary colour gamuts, or specialized feature requests, professional consulting is available. Whether you require precise colour mapping for digital textile printing pipelines or bespoke 3D visualisation solutions, please reach out via the channels below.