Also see my Photo image quality tutorial on this site.

Color tutorial: describing color

About this tutorial

Most of the things that you will design with computers—user interfaces, Web pages, and even printed documents—will use color in some way. This tutorial is designed to help you understand and specify colors. It does not address the effective use of color, which is a much more complex topic.

Many of the graphics programs that we use present us with a bewildering array of choices for color selection. The most frequently used of these are covered here, in addition to some basic information that will help you understand why there are so many different color systems. The tutorial is designed to be followed in order, at least the first time through. But you may want to refer again to specific pages from the index at left. Systems covered include:

Paint colors

Visible light

HSL: hue, saturation, and light

Grayscale

RGB: red, green, and blue

CMYK: cyan, magenta, yellow, and black

Extras

New in 2019: the latest upgrade to our "mini color selector" with HSL, RGB, Hex and contrast, for Firefox, Chrome, or Opera browsers. Open it in either a separate popup window to keep on your desktop or a new tab to enlarge.

To learn more about the two color systems most important to Web developers (RGB and HSL), please see the Demo page or follow the Demo link at left. An associated video page (also Video link at left) summarizes much of the content here, with additional information about creating accessible color combinations.