Color Space
Understand RGB, HSB, and HSL
A color model is a mathematical model that describes colors as a list of numbers, and color spaces are the modes that represent these numerical values as colors in user interfaces. Graphic design programs utilize color picker tools that allow designers to select color spaces and manipulate color values in order to find that “just right” color. The most common color spaces used by designers are RGB, HSB, and HSL. We’ll take a look at each color space and learn how they interpret and represent color.
RGB (Red, Green, Blue) is a color model that defines color space through the numerical values of the three primary colors: red, green, and blue. Each color has a range from 0 to 255.
- Red, 0-255
- Green, 0-255
- Blue, 0-255
RGB is called an additive model because the primary colors are combined with one another to create the non-primary colors. For example, the color “Red” is expressed as [R=255, G=0, B=0] and the color “Yellow” is expressed as [R=255, G=255, B=0].
HSB (Hue, Saturation, Brightness) defines color space through hue, saturation, and brightness.
- Hue is the color type (red, green, etc.) and has a range from 0 to 360°.
- Saturation is the intensity of the color and has a range from 0 to 100% (white to intense color).
- Brightness means how bright a color is and has a range from 0 to 100% (black to white).
HSL (Hue, Saturation, Lightness) is like HSB, but with a more symmetrical dimension between lightness and darkness. HSL is popular amongst designers because of the underlying form that aligns closely with our natural understanding of color.
- Hue is the color type (red, green, etc.) and has a range from 0 to 360°.
- Saturation is the intensity of color depending on the lightness. It has a range of 0 to 100%, with 0% being gray in the middle of the lightness dimension and 100% being intense color.
- Lightness means how light a color is and has a range from 0 to 100% (black to white).
Hex Codes are codes that represent specific color space values. The numerical combination of color values is assigned a hex code because computers use hex codes to interpret and display colors in user interfaces.
Alpha value (as seen on the color picker) sets the opacity of the colors we choose. 0 represents fully transparent and 100 represents fully opaque.
While it’s beneficial to understand the underlying form of color spaces, the best way to develop an intuitive sense of color in graphic design tools is to play around with the color picker. The color picker allows designers to enter numerical values at will and interact with the sliding color scale. Manipulating the different color components in the color picker will demonstrate how each component of a particular color space interacts and affects the others.
