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 2020: more features in our "micro colors" application. See the App page for more information and a link to the actual app.

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.