Color space explorer

Three numbers describe a color, but which three? RGB says how much of each primary a display emits. HSV, YCbCr and L*a*b* rearrange the same information so that brightness and color, or perceived differences, are easier to work with. Split an image into its channels and blend two colors in each space.

Image click to pick a color
Channels each channel as gray; for signed channels, mid gray is 0
From A to B in a straight line the same two colors, interpolated in each space

RGB

RGB mixes red, green and blue light, like the pixels of a display and the filters of a camera sensor. It is the space images are stored in, but its channels are strongly correlated: every channel carries brightness, so a shadow changes all three at once. Values here are sRGB-encoded, as in image files (see the gamma demo).

HSV

HSV describes a color by its hue (the angle on the color wheel), its saturation (how far it is from gray) and its value (the brightest channel):

V=max⁡(R,G,B),S=max⁡−min⁡max⁡,H=60∘⋅{G−Bmax⁡−min⁡ mod 6if max⁡=RB−Rmax⁡−min⁡+2if max⁡=GR−Gmax⁡−min⁡+4if max⁡=BV = \max(R, G, B), \qquad S = \frac{\max - \min}{\max}, \qquad H = 60^\circ \cdot \begin{cases} \frac{G - B}{\max - \min} \bmod 6 & \text{if } \max = R \\ \frac{B - R}{\max - \min} + 2 & \text{if } \max = G \\ \frac{R - G}{\max - \min} + 4 & \text{if } \max = B \end{cases}

Hue is useful for picking colors and for segmenting objects by color, since it stays roughly the same when the light gets brighter or darker. But it is undefined for grays, where max⁡=min⁡\max = \min, and it wraps around: 359° and 1° are both red.

YCbCr

YCbCr separates the luma YY from two color differences, CbC_b (blue minus luma) and CrC_r (red minus luma). It is a linear transformation of RGB, here in the full-range form used by JPEG with values from 0 to 255:

[YCbCr]=[0.2990.5870.114−0.1687−0.33130.50.5−0.4187−0.0813][RGB]+[0128128]\begin{bmatrix} Y \\ C_b \\ C_r \end{bmatrix} = \begin{bmatrix} 0.299 & 0.587 & 0.114 \\ -0.1687 & -0.3313 & 0.5 \\ 0.5 & -0.4187 & -0.0813 \end{bmatrix} \begin{bmatrix} R \\ G \\ B \end{bmatrix} + \begin{bmatrix} 0 \\ 128 \\ 128 \end{bmatrix}

Gray has Cb=Cr=128C_b = C_r = 128. Image and video compression use this split because the eye resolves detail in brightness much better than in color, see chroma subsampling.

Luma is often loosely called luminance, but the two are different. Luma (strictly written Y′Y') is a weighted sum of the gamma-encoded values R, G, B, as stored in the image. Luminance is the same kind of sum of linear light, with its own weights (0.2126,0.7152,0.07220.2126, 0.7152, 0.0722 for sRGB): the YY of the CIE XYZ space below. Luma is cheaper to compute and close enough for compression, but it is not a physical quantity.

L*a*b*

CIE L*a*b* is designed so that equal distances correspond to roughly equal perceived differences. L∗L^* is lightness from 0 to 100, a∗a^* runs from green to red and b∗b^* from blue to yellow. It is computed from linear RGB via the CIE XYZ space, whose YY is the luminance, and a cube root that mimics the eye's response:

L∗=116 f ⁣(YYn)−16,a∗=500(f ⁣(XXn)−f ⁣(YYn)),b∗=200(f ⁣(YYn)−f ⁣(ZZn))L^* = 116\, f\!\left(\tfrac{Y}{Y_n}\right) - 16, \qquad a^* = 500 \left( f\!\left(\tfrac{X}{X_n}\right) - f\!\left(\tfrac{Y}{Y_n}\right) \right), \qquad b^* = 200 \left( f\!\left(\tfrac{Y}{Y_n}\right) - f\!\left(\tfrac{Z}{Z_n}\right) \right)

with f(t)=t3f(t) = \sqrt[3]{t} (plus a linear piece near 0) and (Xn,Yn,Zn)(X_n, Y_n, Z_n) the white point. The distance ΔEab∗\Delta E^*_{ab} between two colors in L*a*b* is a simple measure of how different they look.

Interpolation

A straight line between two colors is a different path through the colors in every space. In RGB, red to green passes through a dull olive. HSV keeps the saturation and walks around the color wheel instead, and L*a*b* changes lightness evenly. Some points on a straight line in L*a*b* have no RGB equivalent; these are clipped to the nearest displayable value.

Try this