Logo Dat-inf

Dat-inf – Measuring, Inspecting & Detecting

Custom machine vision and artificial intelligence software

Tool: 3D color-space path – color gradients as a 3D curve

Visualization of color gradients

Labor tests and inspection systems often produce color gradients as measurement results. For evaluation, the question arises whether a color model other than RGB could simplify the analysis or graphical representation.

This tool enables 3D visualization and comparison of data in selected color spaces.

Processing happens entirely in the browser – no data is transmitted. For each X column, RGB values are averaged over Y; the resulting sequence of points is visualized as a curve in a selectable 3D color space. Optionally, a second image can be loaded and overlaid as a second curve.

No image loaded
Left: original image + average color strip (averaged over Y for each X). Right: 3D color space with a dense technical volume grid. Orbit: drag with mouse, zoom: wheel, pan: right click/Shift.
Image 1
Image 2
Tip: in HSV/HSL, the meridians (hue) and rings (S/V or S/L) are especially helpful; in Lab/OKLab, the box slices are useful.

Description

Purpose

An image is loaded and the RGB values are averaged along the Y axis for each X column. The resulting color sequence is displayed as a sequence of points in a selectable 3D color space and connected in order (tube geometry).

Operation

  • Load image 1 and optionally image 2: each creates one curve from the Y-averaged colors.
  • Curve 1 / Curve 2: show or hide the respective curve.
  • 3D color space: selects the coordinate system into which the averaged RGB values are transformed.
  • Subsampling: uses only every nth X value, reducing geometry and increasing performance.
  • Point size: size of the points; line width controls the tube radius, i.e. the visual line thickness.
  • Volume grid: spatial orientation via wireframe/volume lines. Colorize grid colors lines depending on position.
  • Axes: show/hide axes. Auto-Fit automatically adjusts the camera to the content.
  • Navigation (OrbitControls): left mouse button = orbit, mouse wheel = zoom, right click or Shift = pan.

Note on CMYK

CMYK is a 4D model (C, M, Y, K) and is therefore shown as a 3D projection. With CMYK projection, you can choose which three channels are used as axes (CMY / CMK / CYK / MYK). Without an ICC profile, CMYK is fundamentally device- and print-process-dependent; the conversion used here is a practical approximation.

Color spaces (short) + sources

  • RGB / sRGB – Additive display model; sRGB defines primary colors, white point and transfer function. Source: Wikipedia: sRGB
  • HSV / HSL – Cylindrical reparameterization of RGB (hue angle, saturation radius, value/lightness). Source: Wikipedia: HSL and HSV
  • CIE XYZ (1931) – Colorimetric basis of many models; device-independent reference space. Source: Wikipedia: CIE 1931
  • CIELAB (L*a*b*) – Perceptually motivated space (L* lightness, a*/b* opponent-color axes). Source: CIE: CIE 1976 L*a*b*
  • LCh(ab) – Polar form of Lab: L* (height), C (chroma/radius), h (hue/angle). Source: for the Lab definition, see the CIE publication above.
  • OKLab / OKLCH – Modern perceptual model (Ottosson); OKLCH is the polar form. Source: Björn Ottosson: OKLab
  • CMYK – Subtractive print model (cyan, magenta, yellow, key/black); profile-dependent. Source: Wikipedia: CMYK
  • LMS – Physiologically motivated cone space (long/medium/short), used among other things for adaptation. Source: Wikipedia: LMS
  • ICtCp – HDR/WCG representation in ITU-R BT.2100 (often PQ-based); integrated here as a visualization path. Source: Wikipedia: ICtCp
  • JzAzBz – Perceptually uniform HDR color space (Safdar et al.). Source: Optics Express: JzAzBz (Safdar et al.)

Technical notes

  • The tube curve is generated from the point sequence using a Catmull-Rom curve for smooth connection.
  • Depending on the color space, grid colorization uses either hue/S/L heuristics (HSV/HSL/OKLCH/LCh) or a position-encoded RGB representation.