Color Models

Steve Spence
Updated: 16 October 2017

Color Models and the Technologies of Screen Displays

The colors that we see with our eyes can be defined and reproduced in many different ways. These different ways are called "color models."

Photoshop color picker

To communicate effectively using digital media, you need to know three distinct color models. The same shade of blue can be defined, for example, in the following ways:

  1. HSB: 229°, 29%, 96%
  2. RGB: 172, 186, 244
  3. Hexadecimal: acbaf4

Color Model 1: HSB

HSB is the oldest of the models, and designers often default to it.

Hue
This is the name of the color, like "blue" or "yellow."
Saturation
Also called "chroma," this is the degree of the color's purity.
Brightness
Also called "luminance" or "value," this is how light or dark the color is.
HSB model examples

Color Model 2: RGB

This is the model used by digital screens and monitors, including television screens as well as computer monitors and mobile phones.

In the RGB color model, each one of the millions of colors that these screens can display is defined as a mixture of three primary colors: Red, Green, and Blue. Hence, RGB.

Color Model 3: Hexadecimal

The third model, Hexadecimal, is really just a different way of designating a color's RGB values. Hex codes are commonly used in Cascading Style Sheets (CSS), which are used to control the look and layout of web sites. (We learn more about CSS next week.)

Cascading Style Sheets also can use a handful of English-language color names like "red," but the hex codes allow designers to make more precise choices among the millions of colors available on modern display screens.

Images source: The Code Side of Color, Smashing Magazine.

Try out hexadecimal codes!

You can try out hex codes using the W3 Schools editor. Just add the highlighted code below to the <H1> tag, so that it looks like this:

<h1 style="color:#970515;">This is a Heading</h1>

Then click "Run."

Next, try changing the six digits to define alternate colors.