A Complete Guide to Web Design

(やまだぃちぅ) #1
Color on the Web 29

PrinciplesWeb Design

Color on the Web

Web Design in a Nutshell, eMatter Edition

of the document. Specifying color in HTML is covered in Chapter 5,HTML
Overview.

Color on Computer Monitors


Color on monitors is made of light, so traditional systems for specifying color for
print (CMYK, Pantone swatches, etc.) do not apply.


RGB color


Computer monitors display colors by combining red, green, and blue light. This
color system is known as RGB color.


RGB color is a 24-bit system, with eight bits of data devoted to each of three color
channels. Eight bits of data can describe 256 colors. With 256 possible colors in
each of the three channels, the total possible number of colors is calculated by
multiplying 256× 256 ×256 for a total of 16,777,216. That’s more than enough colors
to provide stunning representations of artwork and photography.


The problem is that only a small percentage of computers in the world are
equipped to display 24-bit color. Many, many more support only 8-bit color; these
systems can display only 256 colors at any one time. The good news is that, by
using acolor palette, 8-bit computers can change which 256 colors to display at
any one time.


Color Issues on 16-Bit Displays


A phenomenon occurs on 16-bit displays that may cause the colors in your
web pages to shift and dither. This includes colors that are “web-safe” on 8-
bit displays.
The effect is most noticeable for pages with graphics that are intended to
blend seamlessly with a tiled background graphic or specified background
color. Despite the fact that the foreground and background elements may
have numerically identical RGB values, on 16-bit displays, colors shift and
dither in a way that causes the “seams” to be slightly visible. The same page
will display perfectly well and without seams on 8-bit and 24-bit monitors.
Which elements shift and which get dithered seems to depend on the
browser and operating system combination, so it’s difficult to anticipate. If
the mismatched colors concern you, making the edges of your graphics
transparent instead of a matching color may help eliminate the dithered rect-
angles on 16-bit displays.
The effect is probably due to the way 24-bit colors are approximated by 16-
bit displays using only 65,536 available colors. We welcome more informa-
tion on why this phenomenon occurs and whether anything can be done to
compensate for it. Send submissions to the contact information listed in the
Preface of this book.
Free download pdf