Having previously read about color theories here

Vector representation


In digital imaging, colorimeters are tristimulus devices used for color calibration. Accurate color profiles ensure consistency throughout the imaging workflow, from acquisition to output. By using a colorimeter we can measure the amount of each of the three primary colors in the mix:


where S1, S2 and S3 can be either positive or negative.

An equal energy white will clearly be given by 3 components of the same value, but, because the scale/precision of each color axis is different (due to human color sensitivity curve), an equal energy white would be more likely to be as follows, which, normalised by each color axis, should then produce a white that is of equal energy.


color4Another issue is representing a 3D system of color by dividing each color component by the luminance, so that we can model color as a 2D triangle.


HSL (hue-saturation-lightness) and HSV (hue-saturation-value) are the two most common cylindrical-coordinate representations of points in an RGB color model. The two representations rearrange the geometry of RGB in an attempt to be more intuitive and perceptually relevant than the cartesian (cube) representation, by mapping the values into a cylinder loosely inspired by a traditional color wheel.


The angle around the central vertical axis corresponds to “hue” and the distance from the axis corresponds to “saturation”. These first two values give the two schemes the ‘H’ and ‘S’ in their names. The height corresponds to a third value, the system’s representation of the perceived luminance in relation to the saturation.

Perceived luminance is a notoriously difficult aspect of color to represent in a digital format, and this has given rise to two systems attempting to solve this issue: HSL (L for lightness) and HSV or HSB (V for value / B for brightness). A third model, HSI (I for intensity), common in computer vision applications, attempts to balance the advantages and disadvantages of the other two systems.

Other, more computationally intensive models, such as CIELAB or CIECAM02 are said to better achieve the goal of accurate and uniform color display, but their adoption has been slow. This 4-color system is the base of color processing on digital photographic development. Programs like Lightroom or Photoshop Camera Raw show a and b controls under the titles Temperature and Tint

color7 copy


Back to HSL… to calculate an HSL value from a RGB value we need to know which are the maximum and minimum components from the sample.

Say, for example, Raspberry: RGB(214, 39, 134). The maximum would be R and the minimum G, being B the medium value. This value would lie in the sixth section of the following diagram where the 255 possible values have been divided into six equal sections.


So the values would be as follows:


A similar approach for calculating the hue is as follows. As hue is perceived to be circular it is very intuitive to use degrees instead of values, so for this case we would just have to divide 360º of the spectrum into 6 sections.


\begin{align}   H^\prime &=     \begin{cases}       \mathrm{undefined},        &\mbox{if } C = 0 \\       \frac{G - B}{C} \;\bmod 6, &\mbox{if } M = R \\       \frac{B - R}{C} + 2,       &\mbox{if } M = G \\       \frac{R - G}{C} + 4,       &\mbox{if } M = B     \end{cases} \\   H        &= 60^\circ \times H^\prime \end{align}

Chroma and Saturation

Because these definitions of saturation – in which very dark (in both models) or very light (in HSL) near-neutral colors, for instance, are considered fully saturated – conflict with the intuitive notion of color purity, often a conic or bi-conic solid is drawn instead, with what this article calls chroma as its radial dimension, instead of saturation.


Some useful definitions to avoid misunderstandings are:

Intensity radiance: The total amount of light passing through a particular area.

Chroma: The colorfulness (amount of color) relative to the brightness of a similarly illuminated white.

Saturation: The colorfulness (amount of color) of a stimulus relative to its own brightness.

Hue and Chroma



Both hue and chroma are defined based on the projection of the RGB cube onto a hexagon in the “chromaticity plane”. The projection takes the shape of a hexagon, with red, yellow, green, cyan, blue, and magenta at its corners. Chroma is the relative size of the hexagon passing through a point (modulus of the point from the origin), and hue is how far around that hexagon’s edge the point lies (angle of the vector to a point in the projection,with red at 0°).

More precisely, both hue and chroma in this model are defined with respect to the hexagonal shape of the projection. The chroma is the proportion of the distance from the origin to the edge of the hexagon. In the lower part of the diagram to the right, this is the ratio of lengths OP/OP, or alternately the ratio of the radii of the two hexagons. This ratio is the difference between the largest and smallest values among R, G, or B in a color. To make our definitions easier to write, we’ll define these maximum and minimum component values as M and m, respectively.

\begin{align}   M &= \operatorname{max}(R, G, B) \\   m &= \operatorname{min}(R, G, B) \\   C &= M - m \end{align}

To understand why chroma can be written as Mm, notice that any neutral color, with R = G = B, projects onto the origin and so has 0 chroma. Thus if we add or subtract the same amount from all three of R, G, and B, we move vertically within our tilted cube, and do not change the projection. Therefore, the two colors (R, G, B) and (Rm, Gm, Bm) project on the same point, and have the same chroma. The chroma of a color with one of its components equal to zero (m = 0) is simply the maximum of the other two components. This chroma is M in the particular case of a color with a zero component, and Mm in general.

The hue is the proportion of the distance around the edge of the hexagon which passes through the projected point, originally measured on the range[0, 1] or [0,255] but now typically measured in degrees [0°, 360°]. For points which project onto the origin in the chromaticity plane (i.e., grays), hue is undefined.


Sometimes for image analysis applications, this hexagon-to-circle transformation is skipped, and hue and chroma (we’ll denote these H2 and C2) are defined by the usual cartesian-to-polar coordinate transformations (right). The easiest way to derive those is via a pair of cartesian chromaticity coordinates which we’ll call α and β:

\begin{align}   \alpha &= \textstyle{\frac{1}{2}}(2R - G - B) \\   \beta  &= \textstyle{\frac{\sqrt{3}}{2}}(G - B) \\   H_2    &= \operatorname{atan2}(\beta, \alpha) \\   C_2    &= \sqrt{\alpha^2 + \beta^2} \end{align}

(The atan2 function, a “two-argument arctangent”, computes the angle from a cartesian coordinate pair. The first argument is the vertical or y-axis value, and the second argument is the horizontal or x-axis value. In some computer programs, like Excel, the order is reversed.)

Notice that these two definitions of hue (H and H2) nearly coincide, with a maximum difference between them for any color of about 1.12° – which occurs at twelve particular hues, for instance H = 13.38°, H2 = 12.26° – and with H = H2 for every multiple of 30°. The two definitions of chroma (C andC2) differ more substantially: they are equal at the corners of our hexagon, but at points halfway between two corners, such as H = H2 = 30°, we have C = 1, but C2 = √¾ ≈ 0.866, a difference of about 13.4%.

Color Gamut


In color reproduction, including computer graphics and photography, the gamut, or color gamut, is a certain complete subset of colors. The most common usage refers to the subset of colors which can be accurately represented in a given circumstance, such as within a given color space or by a certain output device.

Another sense, less frequently used but not less correct, refers to the complete set of colors found within an image at a given time. In this context, digitalizing a photograph, converting a digital image to a different color space, or outputting it to a given medium using a certain output device generally alters its gamut, in the sense that some of the colors in the original are lost in the process.

If we represent a gamut as a simplistic triangle, white would be in its center. The sum of any two colors is represented by a vector addition of each of their paths from the center. Hue is given by the direction of the vector and saturation by its modulus.


It is clear from the comparison that ProPhoto’s gamut is the widest and that’s why it is the gamut used in professional photography. When rescaling to sRGB for instance, like mosts screens are, many colors have to be resampled changing the brightness and hue probably. This effect is called gamut clipping.

Author: Bea Cabrera

Freelance Filmmaker with a passion for big cities, snowboard, cinema and a weakness for the smell of freshly ground coffee. Engineer & Graphic Designer in a previous life, loving and living both: art and technology.  

One Reply to “Digital Representation of Color”

  1. The meaning of color in Black Swan (2010) | Obsessive Coffee Disorder says: November 1, 2015 at 1:02 am

    […] a more technical approach on color, I wrote about it here (Color Teories), and here (Digital Representation of […]

Leave a Reply

Your email address will not be published.

You may use these <abbr title="HyperText Markup Language">html</abbr> tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


This site uses Akismet to reduce spam. Learn how your comment data is processed.