This interactive tutorial visualizes Tristimulus color theory—the intersection of linear algebra, physics, and human perception. It shows how color spaces (RGB, HSV, XYZ, CIELAB) relate and how non-linear transformations affect what we perceive. The tool includes a 2D HSV Color Wheel (click or drag to pick a color) with hue as angle and saturation as radius; the data panel shows RGB, XYZ, and CIELAB in real time. A 3D RGB Color Cube view morphs between the cube and the HSV cylinder; Hue slice shows a cross-section at a chosen hue (3D and CIE views). The CIE 1931 view combines a 3D cube with the xy chromaticity diagram (horseshoe); hover inside the diagram to see the RGB overlay and highlighted 3D points. Luminance (Y) in CIE view slices the gamut by brightness. Gamma toggles linear vs sRGB; Gamut grays out-of-gamut colors. Probe mode shows L/M/S cone curves and web-safe distance.

Tristimulus Values and CIE XYZ

Human color vision uses three cone types (L, M, S) with overlapping spectral sensitivities. The CIE XYZ color space represents any color as three tristimulus values (X, Y, Z). Y corresponds to luminance. Conversion from sRGB (0–1) to XYZ uses gamma decoding and a 3×3 matrix:

[X, Y, Z]^T = M × [R_lin, G_lin, B_lin]^T

where M is the sRGB-to-XYZ matrix (D65). The matrix M is:

M = [ 0.4124564 0.3575761 0.1804375 ]
      [ 0.2126729 0.7151522 0.0721750 ]
      [ 0.0193339 0.1191920 0.9503041 ]

Row 1 gives X, row 2 gives Y (luminance), row 3 gives Z.

How the matrix M is derived

The matrix is derived algebraically from the sRGB and CIE standards, not fitted to measurements. sRGB specifies the chromaticities (x, y) of the red, green, and blue primaries and of the D65 white point (all from CIE). Chromaticity fixes the ratio X : Y : Z for each primary. The derivation proceeds in three steps:

• Primaries: When only one channel is full—(1,0,0), (0,1,0), or (0,0,1)—the result in XYZ must lie on the ray defined by that primary's (x,y). So the three columns of M are proportional to the XYZ vectors that have the correct chromaticities for R, G, and B.
• White point: Equal linear intensities (1,1,1) in sRGB must produce D65 white in XYZ. Usually D65 is normalized so that Y = 1 for white; then (X,Y,Z) for white is determined by D65's (x,y).
• Linear system: Combining the primary constraints and the (1,1,1)→D65 condition gives a linear system in the nine matrix entries. Solving it yields the unique 3×3 matrix M above.

The CIE chromaticities themselves come from empirical color-matching data (e.g. the CIE 1931 standard observer), but the sRGB→XYZ matrix M is computed from those fixed standards rather than fitted to new data.

CIELAB (L*, a*, b*) is a perceptually uniform space derived from XYZ.

RGB, HSV, and the Color Cube

RGB uses red, green, and blue as orthogonal axes forming a unit cube. HSV (Hue, Saturation, Value) is cylindrical: hue is angle, saturation is radius, value is height. The RGB cube's diagonal from (0,0,0) to (1,1,1) is the grayscale axis; in HSV it becomes the central vertical pillar of the cylinder. The simulation lets you morph between the cube and cylinder to see this relationship.

Gamma and Perceptual Linearity

Gamma correction maps physical light intensity to perceived brightness. sRGB uses: V_out = 1.055×V_lin^1/2.4 − 0.055 for V_lin > 0.0031308. Without gamma, a linear gradient from 0 to 255 has its perceptual midpoint at 127; with sRGB, it shifts to ~186. The "Apply Gamma" toggle demonstrates this.

Gamut and Gamut Mapping

A gamut is the range of colors a device can produce. sRGB defines the standard web color space. Display P3 has a wider gamut. Colors in P3 but outside sRGB must be mapped—e.g., by clipping to the sRGB cube—when displayed on sRGB screens. The gamut toggle grays out out-of-gamut pixels to illustrate this concept.

Probe Mode: L/M/S Curves and Web-Safe Distance

In probe mode, clicking a color shows simplified tristimulus (L, M, S) cone response curves and the Euclidean distance in RGB space to the nearest of the 216 web-safe colors (6×6×6 cube).

Coordinate Systems and Units

The data panel shows values in different mathematical coordinate systems. Their units and ranges depend on whether you are looking at absolute physics or relative digital encoding.

1. Linear RGB (Relative Intensity)

• Unit: Dimensionless (normalized).
• Range: Typically 0.0 to 1.0.
• Meaning: Physical intensity of light for each channel before gamma correction. A value of 0.5 means 50% of maximum physical light for that primary. Values outside this range (negative or >1.0) trigger the Out of Gamut warning because they are not physically displayable on an sRGB monitor.

2. CIE XYZ (Tristimulus Values)

• Unit: Dimensionless (relative to a reference white); Y is luminance.
• Range: Y is usually scaled 0 to 1 or 0 to 100.
• Meaning: Y is perceived brightness (luminance). X and Z are virtual primary stimuli used to match a color. In this simulation, values are relative to the D65 white point (daylight illuminant).

3. CIELAB (L*, a*, b*)

• Unit: Dimensionless (perceptually uniform units).
• Range: L* (lightness) 0 to 100 (black to white); a* (green–red) and b* (blue–yellow) approximately −128 to +127.
• Meaning: Designed to be perceptually uniform. A distance of 1 unit (ΔE) in any direction is intended to approximate the "Just Noticeable Difference" (JND) for a human observer.

Unit Summary

Space	Unit Type	Standard Range	Physical Meaning
Linear RGB	Normalized ratio	0–1	Physical light intensity
Digital sRGB	Integer (bit-depth)	0–255	Voltage / digital signal to pixels
CIE XYZ	Relative tristimulus	Y: 0–1 or 0–100	Physical luminance and color matching
CIELAB	Perceptual units	L*: 0–100; a*, b*: ≈±128	Human-perceived difference (ΔE)

Perceptual difference between two colors can be quantified with ΔE (e.g. ΔE*ab in CIELAB). A Delta E calculator in the probe panel could show how "different" a color looks when shifted into the displayable gamut (e.g. after clipping).

 

Usage Instructions

Follow these steps to explore the Tristimulus Color Space Visualization:

1. 2D Color Wheel: By default, the simulation shows the 2D HSV Color Wheel. Click or drag on the wheel to pick a color; the data panel shows RGB, XYZ, and CIELAB in real time. The luminance bar and color swatch reflect the picked color. Adjust the Brightness slider to change the Value (V) of the wheel.
2. 3D RGB Cube: Click the "3D RGB Cube" tab to see the RGB color space as a 3D cube of colored spheres. Use the Morph slider to interpolate between the cube and the HSV cylinder. The grayscale diagonal (0,0,0) to (1,1,1) becomes the central pillar in the cylinder. Use the Slice L slider to show only colors below a certain luminance. Enable Hue slice and set Hue (°) (0–360) to show only spheres within a narrow hue band (cross-section of the HSV cylinder). Toggle Gamma to see how sRGB encoding affects perceived brightness.
3. Camera Controls (3D): Use the Zoom +/−, Front, Top, Side, and Iso buttons to change the 3D view. You can also rotate the view by dragging with the mouse (when OrbitControls are active).
4. Gamma Toggle: When checked, applies sRGB gamma encoding to the 2D wheel and 3D spheres. This shows how physical linear light differs from perceptual (gamma-corrected) display—the midpoint of a gradient shifts from ~127 (linear) to ~186 (sRGB).
5. Gamut Toggle: When enabled (2D view), pixels outside a simulated printing gamut are shown in grayscale, illustrating which colors cannot be reproduced in that gamut.
6. Probe Mode: Enable "Show L/M/S curves" and move the mouse over the color wheel. The panel shows simplified tristimulus (L, M, S) cone response curves and the Euclidean distance to the nearest web-safe color.
7. CIE 1931: Switch to the "CIE 1931" view for a dual panel: left = 3D RGB cube, right = CIE 1931 xy chromaticity diagram. The spectral locus (horseshoe) is drawn from CIE 1931 color-matching functions (380–700 nm). The sRGB gamut is the white triangle; cube points project as dots. Luminance (Y) (0–100%) in the controller sets the Y value for the diagram fill and scales the 3D cube height, showing how the gamut changes with brightness. Hover the mouse inside the horseshoe to see an RGB overlay (swatch and R, G, B values) at the top of the canvas; matching 3D spheres are highlighted (scaled up). Hue slice and Slice L apply here as well. Use Vision to simulate Protanopia, Deuteranopia, or Tritanopia; the 3D cube is recolored and confusion lines appear on the diagram.

Tip: Start with the 2D Color Wheel and move the mouse to see how RGB, XYZ, and Lab coordinates relate. Toggle Gamma to observe the perceptual vs physical middle-gray shift. Switch to 3D and use the Morph slider to see how the RGB cube transforms into the HSV cylinder. The grayscale diagonal in the cube becomes the central pillar in the cylinder.

Parameters

Followings are short descriptions on each parameter

• Brightness: The Value (V) component of the HSV color wheel, 0–100%. Controls the overall brightness of the 2D wheel.
• Morph (3D): Interpolation factor (0–100%) between the RGB cube and the HSV cylinder. 0% = cube, 100% = cylinder.
• Gamma: When checked, applies sRGB gamma encoding. Shows perceptual vs linear intensity—middle gray shifts from ~127 to ~186.
• Gamut: When checked (2D), grays out colors outside a simulated printing gamut.
• Slice L: Luminance slice for the 3D cube (0–100%). Hides spheres with max(R,G,B) above the threshold. Available in 3D and CIE views.
• Hue slice: When checked (3D and CIE views), shows only spheres whose hue is within ±5° of the Hue (°) slider (0–360). Produces a cross-section of the HSV cylinder at that hue.
• Luminance (Y): CIE 1931 only. Slider 0–100% sets the Y (luminance) value used when converting xy chromaticity to XYZ. Darkens the diagram fill and scales the 3D cube height in CIE view.
• Probe: When checked, shows L/M/S tristimulus curves and web-safe distance for the picked color on the 2D wheel.
• Vision: In CIE 1931 view, selects color vision: Normal, Protanopia (L-cone), Deuteranopia (M-cone), or Tritanopia (S-cone). Simulated colors and confusion lines update the 2D plot.

Controls and Visualizations

Followings are short descriptions on each control

• 2D Color Wheel Canvas: HSV color wheel; hue = angle, saturation = radius. Click or drag to pick a color; data panel and probe (if enabled) update.
• Coordinate Panel: Displays Linear RGB (0–1), Digital sRGB (0–255), gamut status, XYZ, Lab, luminance, and (in probe mode) L/M/S curves and web-safe distance for the picked color.
• 3D RGB Cube / CIE 1931: Spheres at (r,g,b); Morph interpolates to HSV cylinder. Slice L and Hue slice filter visibility. CIE view: Luminance (Y) slider; chromaticity canvas shows horseshoe and sRGB triangle. Hover inside the diagram to see RGB overlay and highlighted 3D spheres. Camera buttons: Zoom +/−, Front, Top, Side, Bottom, Iso.

Key Concepts

• Tristimulus Values: Human color vision uses three cone types (L, M, S). CIE XYZ represents any color as three values; Y is luminance.
• RGB vs HSV: RGB is a unit cube; HSV is cylindrical (hue=angle, saturation=radius, value=height). The cube diagonal (grayscale) maps to the cylinder's central pillar.
• Gamma Correction: sRGB applies a non-linear curve so that equal perceptual steps correspond to equal display intensity. Linear 0.5 maps to ~0.73 in sRGB (perceptual middle gray).
• Gamut: The range of colors a device can reproduce. sRGB defines web color; Display P3 is wider. Out-of-gamut colors must be mapped (e.g., clipped) when displayed.
• CIE 1931 and Luminance (Y): The xy chromaticity diagram removes luminance; the Luminance (Y) slider re-introduces it so you can see how the diagram and 3D gamut change with brightness. Hovering inside the horseshoe shows the RGB at that xy and highlights the matching 3D points.