Selecting a color scheme and designing graphics are important considerations for creating web-based training. Professional visual communicators use powerful software such as Adobe®Illustrator and Photoshop to design course templates and create graphics. These programs have a steep learning curve. The complexity of the programs makes them difficult to use if you work with graphics sporadically. When we use graphic software, we often focus on accomplishing our goal (e.g., airbrush over the blemish on my chin or whiten my teeth) and we are not interested in the technical foundation such as file format, file size, and color modes. However, understanding technical information enables you to optimize graphics for web use. This blog posting is about color models.
Estimated reading time: 5 minutes
Color Models
Computer graphics applications have a variety of color models. A color model determines how color information is conveyed digitally. The model used for full color images on the web is RGB (red, green, blue). There are other models, such as CMYK (cyan, magenta, yellow, and black) for print materials and hexadecimal code for the web.
The Image/Mode menu in Photoshop displays color mode options. RGB is selected in this example.
RGB color model
All display monitors (including television and computer) use the additive color model, which has three primary colors – red, green, and blue (RGB). Every color you see on a monitor is a combination of these three primary colors. Changes in the amount of each hue (red, green, and blue) determine the color you see.
Each primary hue can be represented as a value from 0 to 255. The three hues that comprise a color are always presented in the same sequence: red, green, blue (R/G/B). For instance, pure red is the presence of red at full saturation, while green and blue are absent (255/0/0).
Example of how red is seen in the Photoshop Color Picker window.
In the additive color model, white is the presence of all light and black is the absence of all light. RGB values for white are 255/255/255.
Example of how white is seen in the Photoshop Color Picker window.
Indexed color model
The indexed color model limits color options to 256 colors. In comparison, the RGB color model allows millions of colors. If you convert an image from RGB to indexed color, colors outside the 256 indexed color options are converted to the indexed color that is the best match to the original color. When the number of colors is reduced, the file size is reduced. Small file sizes are an advantage on the web because smaller files load faster than large files.
Original photograph in RGB mode can display millions of colors.
An enlargement in RGB mode shows smooth color transitions in the sky.
An enlargement in indexed mode shows dithering (spotty appearance) where colors outisde the 256 color palette are converted to indexed colors.
Web color
A number of years ago, many computer monitors had the ability to display a maximum of 256 different colors. A web palette of 216 web-safe colors was devised. The purpose of the web-safe palette was to ensure specified colors appeared the same on every monitor. The web-safe palette was to ensure specified colors appeared the same on every monitor. The web-safe palette is not important today because monitors are able to display millions of colors. however, it is important to know how to code color in HTML for display in a web browser. When you want to specify a background or text color for display on the web, you can do so with hexadecimal code.
Hexadecimal color code for HTML is comprised of six characters, either a numeral or a letter ranging from A to F. The first two characters describe red, the middle two characters describe green, and the final two describe how blue is displayed. This model is similar to the RGB model, but instead of using only decimal numbers from 0 – 255, HTML uses hexadecimal numbers 00 – FF.
Hexadecimal code is displayed in the Photoshop Color Picker window.
Specify a color model
It’s a good idea to specify a color model when you start a new file.
Specify a color model in Adobe® Illustrator
The Advanced section of the New Document window enables you to select a color mode. The default setting is CMYK. When you create graphics for online training, you’ll want to change the setting to RGB.
Click the “display more” icon in the New Document window to access the color mode selection tool.
Specify a color model in Adobe® Photoshop
Photoshop also allows you to select a color mode when you create a new file.
The settings selected for this new file are appropriate for a web graphic.
Wrap up
This article provides a high-level overview on selecting a color model for web graphics.
- Photoshop “Help” has excellent color model information in greater detail.
- Wikipedia has more in-depth general information on web color.
Related posts:
- Technical Considerations: Pixels and Online Training
- Technical Considerations: Graphic File Size and Format
Looking for more information on web-based training? Linda has developed a series on converting instructor-led training to web-based training called Great Voyages. The slide decks from all five presentations are available for download.
Contact our Learning Developers
Need to discuss developing e-learning? Creating curriculum for classroom training? Auditing and remediating e-learning for accessibility? Our learning developers would be glad to help.