Color space

Color space is defined as the range of available colors within a given color model. The concept of color space is important to graphic designers because something designed on a monitor (RGB, red, green,blue) will look different when printed (using CMYK, cyan, magenta, yellow, black). In order to remedy this problem the user can convert the image file from RGB to CMYK. The locus of possible colors within a color space is called it's gamut. Converting to color spaces with different gamuts can cause undesired effects.


Color space (a three dimensional representation of color) also deals with three essential parameters that are used to describe the basis of color space: hue, saturation and brightness. Hue, relating to wavelengths for spectral colors, mainly to the "reds" and "blues", which is a perceptual based model. This particular wheel of color starts at red and circles clockwise down to the shorter wavelengths of the color blue. Saturation is the mixture of color with the level that it has or doesn't have of white. If a spectral color consist of only wavelength then it is fully saturated, having no white. Even then certain colors are looked upon to have more saturation than others, monochromatic reds are thought to have more saturation than monochromatic yellows. The Munsell Systems accounts for the fact that there are more color saturation in certain hues than others. This systems divides colors into 100 different hues of equal division around a color circle. Brightness is is based on the reflectivity of the color and how illuminance it is. Using these three parameters together is a way to further define "color space". Still there are 3 different systems to describe/understand color space, The Munsell, Ostwald and CIE.

The most widely used color spaces are RGB for scanners and displays, CMYK for color printing and YUV for video and TV. Prior to the proliferation of electronic displays, color spaces were developed that were closer to the way people perceive color.

Color Gamut
The color gamut is the set of possible colors within a color system. Due to limitations of color systems, not one color system can produce every color in the spectrum.

This Photoshop dialog box shows the current color in HSB, RGB, CIE Lab and CMYK color spaces. The vertical slider is used to adjust the component of the color space selected (in this case, the R in RGB). Moving the slider changes the R from 0 (bottom) to 255 (top). Clicking into the large color field on the left, changes the other two components.
external image _COLPICK.GIF

Common Color Spaces

1-bit monochrome
  • Each pixel only stores information to be either black or white

8-bit grayscale
  • Each pixel only stores information about the brightness. so any pixel can be black, white, or one of 254 shades of gray

  • Additive color model, based on light. (computer monitors, stage lighting, televisions, etc....). The colors of the RGB model are red, green and blue which mix together to make a wide range of other colors. These are also the primary addictive colors which are also device dependent, not every color is valued the same across devices without color management. Below is an outline of possible RGB color combinations.
external image rgb_animated.gif

  • Subtractive color model, based on pigment. (paintings, printers,...). CMYK stands for: Cyan, Magenta, Yellow and the Key color "Black". The K is used to describe the color black instead of "B" as to not cause confusion with the color blue. This color system is good for process printing because it works off of light reflected from colors.
external image cmy_animated.gif
The CMYK Model

  • Designed to approximate human vision. Dimension "L" is for lightness, with "A" and "B" representing color opponent dimensions.

  • Hue, Saturation, Value & Hue, Saturation, Lightness
Both are ways to describe conceptual color relationships more accurately than RGB. The two methods are remarkably similar, differing only in their approach. HSL/HSV both depict colors using a cylinder with darker colors at the bottom, and white at the top; with distance along the axis corresponding to value and lightness.

external image 200px-HSV_cylinder.p
The Naked Eye

A comparison of the chromaticities enclosed by some color spaces.


Defining RGB color using hexadecimal
  • RGB is the use of red, green, and blue percents to define a color. This can be applied to hexadecimal code by converting the RGB amounts from base 10 to base 16. This process of taking the RGB precents and converting them to a different base lead to the development of larger and larger color possiblities for computers. The way that hexadecimal represents RGB amounts in writen code is by heading the code with '#' followed by six digits, in the order of two for red, two for green, and two for blue. An example would be #000000 (black). This is not the only way to represent color values in code but it is a popular method. Color can also be represented by heading with 'color: rgb' followed by the RGB values or presents. Examples--> color: rgb(20%, 50%, 0%) and color: rgb(0, 255, 20). For more information see ----> Using Web Color

The printing process using CMYK
  • The CMYK color models is a subtractive color model that works well off of the RGB color model. It is most commonly used in process printing because it has the additional key color K or black, which must be added in separations.

Converting methods
  • Color space conversion is used when transferring color from one device to another. Approximations and conversions are used to keep as close to the same quality and color in both devices. The conversion of color space is much like a mathematical equation. The desired colors to be converted must be determined. Each has a port, input/output, supporting data types and supported complex value. The color conversion parameters choices are: "R'G'B' to Y'CbCr, Y'CbCr to R'G'B', R'G'B' to intensity, R'G'B' to HSV, HSV to R'G'B', sR'G'B' to XYZ, XYZ to sR'G'B', sR'G'B' to L*a*b*, and L*a*b* to sR'G'B'". - source

Adobe Photoshop's "gamut warning" function

Related links





Below are additional images that will give you an idea of color space.
Munsell Color System

Ostwald Color System

The Color Wheel