ColorSpace Explorer

This applet is a 3D view of these color spaces:

  • RGB: our retina has three types of cones that are sensitive to different wavelengths/frequencies/colors of light, which are approximately red, green and blue. This is why the screens and the cameras use these color model to represent the image.
  • YCrCb: this color model (similar to Y'CrCb, YUV and YPrPb) separates the black and white (or grayscale) information (the Y component) from the color information (Cr and Cb components). The Y is called luminance and it is similar to the luma, brightness, value and intensity. The Cr and Cb are the chrominance components (sometimes called redness and blueness). In our retina there are neurons that process the information of the cones separating the Black-White component, from the Red-Green and Blue-Yellow components. The YCrCb does more or less the same operation, allowing the compression of images and video keeping the information that is perceptually more relevant. This color space is used in the JPEG standard.
  • HSL: this color space separates hue (which color it is: red, yellow, green, blue,…), saturation (how lively is the color: color vs gray) and the lightness (the Black and White information). It is probably the information an artist would use to describe a color. Similar spaces include HSV, HSI and HSB which instead of lightness use value, intensity or brightness respectively (all of these concepts are related to the black and white information of the image).

This browser does not have a Java Plug-in.
Get the latest Java Plug-in here.


  • Drag the mouse to rotate
  • Use mouse wheel to go forward or backward
  • Click to see the RGB coordinates
  • Press keys 'm' and 'n' to switch color space: RGB, YCrCb and HSL
  • Press 'Esc' to stop the applet (reload the page to start again)

If you don't have the Java plug-in you can watch a video of it

In fact, all three color spaces (RGB, YCbCr and HSL) show the same information. If you look at the RGB color cube from the white corner, you will see approximatelly the same color distribution as looking perpendicular to the Cr-Cb plane in the YCbCr color space. This is because there is just a linear transformation between them. The HSL color space describes the same colors, but in polar coordinates (this demo paints the HSL in cartesian coordinates, but if we painted in polar coordinates it would look similar to the RGB or the YCrCb).

Here we can see that the three color spaces show the same information in a different way. The arrow points in the hue direction:

You can look at my 3D Color Histogram to see how we can visualize the distribution of colors of an image in these color spaces.

There are many other color spaces:

  • Variations of the RGB color space (sRGB, Adobe RGB)
  • CIE LAB that is a better approximation to the opponent processes in the retina (similar to the YCrCb but with non-linear transformations)
  • CMYK (Cian, Magenta, Yellow and Key) is better for printing (inks and dyes) because is a subtractive color model (the RGB is additive). If you add all the colors in the CMYK, you get black, whereas if you add all the colors in the RGB you get white.
  • Pantone is also used in print, but it uses more than four basic colors (this allows to print metallic colors, for example)


Enter your comment
Back to top
colorspace_explorer.txt · Last modified: 2011/04/26 13:55 (external edit)
CC Attribution-Noncommercial-Share Alike 3.0 Unported = chi`s home Valid CSS Driven by DokuWiki Recent changes RSS feed Valid XHTML 1.0