24:null 25:["$","title",null,{"children":"Perceptually uniform color models and their implications | Max Bo | Observable"}] 2a:T594,

The system consists of three independent properties of color which can be represented cylindrically in three dimensions as a color solid:

hue, measured by degrees around horizontal circles
chroma, measured radially outward from the neutral (gray) vertical axis
value, measured vertically on the core cylinder from 0 (black) to 10 (white)

Munsell determined the spacing of colors along these dimensions by taking measurements of human visual responses. In each dimension, Munsell colors are as close to perceptually uniform as he could make them, which makes the resulting shape quite irregular.${cite("enwiki:munsell")}

Desire to fit a chosen contour, such as the pyramid, cone, cylinder or cube, [...], has led to many distorted statements of color relations, and it becomes evident, when physical measurement of pigment values and chromas is studied, that no regular contour will serve.

- Albert H. Munsell, A Pigment Color System and Notation

2b:T45d,

2c:T417,

The grayed-out horseshoe shape is the entire range of possible chromaticities in this CIE 1931 chromaticity diagram. The colored triangle is the gamut available to the sRGB color space typically used in computer monitors; it does not cover the entire space. The corners of the triangle are the primary colors for this gamut; in the case of a CRT, they depend on the colors of the phosphors of the monitor. Source Further reading Visualisation

2d:T45d,spaceComparison = { await visibility(); const cylinder = renderSpace({ points: oklchCylinder, path: [ oklch2xyz(oklchConverter(startColor)), oklch2xyz(oklchConverter(endColor)) ], syncRotation: true }); const cylinderInterpolation = renderSpace({ points: [ ...oklabInterpolation, ...(rgbInOklch ? rgbInOklchInterpolation : []) ], syncRotation: true }); const cube = renderSpace({ points: rgbCube, path: [rgb2xyz(culori.parse(startColor)), rgb2xyz(culori.parse(endColor))], syncRotation: true }); const cubeInterpolation = renderSpace({ points: rgbInterpolation, syncRotation: true }); while (true) { yield html`

Note that the RGB cube has been mirrored along the red axis to better compare it to the Oklab color space.