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
• RGB: red, green, and blue
• CMYK: cyan, magenta, yellow, and black
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.