Skip to content

Color Models and Spaces

Models for color can be found in art, science, design and engineering. The color models in the Color Buddy come from the domain of digital color and its application. The term "color space" is used for models that define 3D cartesian or polar coordinate system (not all do). The color models in the Color Buddy are all implemented using colorjs.io, which offers a comprehensive set of models for specifying color. The next section offers a brief overview of the color science underlying these models, followed by some additional detail about the specific color models offered in the Color Buddy.

Background and terminology

Digital color models start with the technology of color displays, then procede to connect color technology to color vision.

RGB color

Colors on a display are created by modulating the amount of red, green and blue light produced by each pixel. RGB pixel values are digital inputs to the display drivers.The precise color and intensity of the light produced depends on the display hardware, its settings, and its driver. Simple RGB color specifications are device dependent. What you see depends on your display. HSV and HSL are transformations of RGB to provide hue, saturation and lightness/value dimensions, but these map only loosely to the perceptual metrics of the same name. HWB is yet another transformation, modeling hue plus add black, add white (tones and tints).

Device independent color

Device independent color requires a specification that defines how to transform from RGB pixels to a metric based on color vision, typically the CIE tristimulus values (XYZ, xyY). This specification includes the precise color for each of R, and B as XYZ values, or the chromaticity coordinates (x,y) for each of R, G, B and white, plus Y (luminance) for white. In addition, it specifies the transformation from pixel values (0..255) to luminance for each gray value. sRGB is such a specification, created to define a standard default computer display in 1996. There are similar specifications for use in different media (rec709, photo RGB). There are also display specs (Adobe RGB, Apple RGB).

Device independent color specification allows a principled way to map colors across different devices, including displays, projectors and printers. Color management systems, such as those provided in the Adobe design tools, implement both the specifications (profiles) and the transformations. While CSS and color space packages treat sRGB as a color space, it only functions differently for design than device specific RGB under a color management system.

Perceptually uniform color

Perceptually uniform color spaces are designed such that the Euclidean difference (deltaE) between two colors maps to perceived color difference. CIELAB is one of the earliest of these. It is a non-linear transformation of XYZ relative to a reference white, which is also specified in XYZ. Both the nonlinearity and the inclusion of a reference white (allows modelling adaptation) are what makes it much better than XYZ for computing color differences. All perceptually uniform color spaces are defined for a specific white value, typically D65 or D50, which is also part of the RGB to XYZ specification embedded in their implementation. To see the specified colors accurately on your display, you would need to use a color management system to match this specification, but they can be useful for design even without it.

CIELAB is specified as an opponent color space, with two axes that are roughly red-green (a) and blue-yellow (b), plus lightness (L*). The a,b axes can be converted to a hue, chroma specification (LCH) by viewing them as polar coordinates. The L* lightness scale is a non-linear transform of luminance (Y) and is a highly accurate perceptually uniform lightness scale, especially for achromatic colors. Luminance is not. Unfortunately, these terms are often confused in less precise writing, along with other metrics for lightness like the L in the device-dependent HSL. CIELAB is widely used in digital color applications and color engineering. It is also the foundation for many newer perceptually uniform spaces. While all are “perceptually uniform,” none are perfect. They simply make different compromises and optimizations, typically driven by the needs of a specific application domain.

Color difference metrics

Color difference metrics can be computed as a simple Euclidean distance in a perceptually uniform color space such as CIELAB ( deltaE76) This metric has been improved by weighting and enhancing its terms, rather than creating new variations of CIELAB (deltaE94, deltaE2000, Szafir et al.). The color difference specification for the CIELAB LCH formulation is CMC, which includes some nuances beyond the obvious mathematical formulation. Any new uniform color space has its own deltaE plus potential variations. Often, the more accurate differences are not simple deltaE distances. #3# Color appearance models
Color appearance models are not simple uniform color spaces, though some are designed to function like one (IPT, CAM16-UCS). They transform between a color (specified as XYZ values) plus a white point, plus potentially additional parameters to model color appearance factors like surround and background. A full color appearance model can generate not only hue, chroma and lightness, but also brightness, saturation and colorfulness. The motivation for the CAMs was device independent color transformations from display to print, where it is important to model all the different appearance factors.

Color Buddy

These are the current color spaces offered in the Color Buddy. We would appreciate feedback on their effectiveness, and which others might be useful.

Perceptually Uniform

The Color Buddy offers the two CIELAB color spaces as its default editing space, LAB and LCH, which produce equivalent color values. That is, they are two views of the same color space, therefore colors appear in the same locations in the visualization. Interpolated values, however, will be different. The CIELAB spaces are recommended because they are an established standard with good perceptual uniformity (excellent for L*, less so for highly saturated colors). The current implementation uses a white point of D50, which is more common for print than for display applications but is the standard specification for CIELAB and is the only form that color.js supports in both LAB and LCH formulations.

In addition, Color Buddy offers OKLCH, which is provided in CSS to support a wider gamut than its implementation of LCH. The default profile for OKLCH is Display-P3, which better matches newer displays like the Apple wide gamut displays. blog There is a corresponding OKLAB, which may be added at a later date

RGB Based

Color Buddy offers two RGB space, HSV and HSL. These are familiar digital color design spaces loosely related to perception, but the perceptual properties are not accurate. For example, both blue (#001) and yellow (#110) have the same V or L value, but are not at all the same perceived lightness. Technically, V or L are a measure of the RGB intensity. In HSV, all colors with at least one ff and one 00 value have a V of 100 In HSL, these colors have an L value of 50. These spaces can be useful for fine-tuning colors, as it is easier to see and understand the gamut boundaries.

Other interesting spaces

CAM16-JMH (or CAM16-UCS) is a color management space created to replace CIECAM02, the previous standard for cross-media color transformations such as display-to-print. Like all CAMs it can be customized for different viewing conditions. The implementation provided is set to viewing conditions typical for modern displays.coloraid description research papers

HCT is a perceptually uniform color space created by Google that combines the hue, chroma properties of the CAM16-UCS with L* from CIELAB specifed with respect to D65. coloraid description

XYZ are the CIE tristimulus values, which are the standard way to encode basic color vision for color measurement and engineering. They would better be displayed as chromaticity coordinates, xyY, which better matches the Color Buddy editing model that displays color on the 2D plane plus a 1D lightness plot. Will hopefully upgrade eventually.