Every good Web designer should
have some basic knowledge of using color in a digital environment.
Perhaps you have used a graphics program like Paint Shop Pro or
Fireworks and seen references to hexadecimal, RGB, and other color
and graphic terms. This article explains those terms, why they
are important, and how you can use color to your advantage in
a digital environment.
RGB/Hexadecimal
Systems
With RGB, there are
three elements of color: red, green and blue; each of these can
have a whole number between 0-255, where 0 is black and 255 is
white. However, when coding HTML, designers must rely on a hexadecimal
system, a six digit number; two digits for each byte, prefixed
by a # (pound) sign, represented with a range of 00-FF. This hexadecimal
system is used to save information storage space. Converting RGB
to Hexadecimal is easy once you understand what they represent.
This table gives examples of what each format looks like:
|
Color |
Hexadecimal,
where #RRGGBB |
RGB |
| White |
#FFFFFF |
255,
255, 255 |
| Black |
#000000 |
0,
0, 0 |
| Blue |
#0000FF |
0,
0, 255 |
| Red |
#FF0000 |
255,
0, 0 |
By converting the
triplets of RGB to a hexadecimal value, 16.4 million colors are
possible by using 256 shades of red, green, and blue to create
colors.
Converting Decimals
to Hexadecimals
| Decimal |
Hexadecimal |
Example |
| 0 |
0 |
32 = 20
1st digit is the “sixteens place”
2nd digit is the “ones place”
Example: The decimal number 32 is represented as 20. Because
it takes two sixteens (16+16 = 32) and zero ones to make
32.
The decimal number 42 is represented as 2A. It takes 2
sixteens and 10 ones to make 42.
200 = C8. 200 = (16 * 12) + 8 |
| 1 |
1 |
| 2 |
2 |
| 3 |
3 |
| 4 |
4 |
| 5 |
5 |
| 6 |
6 |
| 7 |
7 |
| 8 |
8 |
| 9 |
9 |
| 10 |
A |
| 11 |
B |
| 12 |
C |
| 13 |
D |
| 14 |
E |
| 15 |
F |
Web-Safe Palette
A Web-safe palette,
often called the 6x6x6 cube, recognizes six of each shade of red,
blue, and green for 216 possible colors out of 256. The other
40 colors vary between the PC and Mac platforms. While sticking
to Web-safe colors is probably unnecessary as many new computers
have advanced graphics cards and monitors, it doesn’t hurt either.
 Lynda Weinman
shares her opinion
on what she refers to as the “browser-safe” palette, and provides
some excellent color tables.
|
Decimal |
Hexadecimal |
| 0 |
00 |
| 51 |
33 |
| 102 |
66 |
| 153 |
99 |
| 204 |
CC |
| 255 |
FF |
There are
many color palettes available on the Web; Visibone
has an excellent example available.
Color Symbolism
Color evokes different
emotions to different cultures and genders; its symbolism cannot
be denied. Therefore, it is important to consider how the colors
you use on your Web page may influence your audience. I’ve done
quite a bit of research on this topic and while color preference
is often personal, there are some universal similarities I’ve
noticed with color. Don’t let symbolism deter you from using a
color you happen to like, just be aware of characteristics of
each color.
Color
4 Business provides an excellent page on understanding the
emotional and symbolic background of colors.
Choosing
the Best File Format
|
If your image
is |
Use |
Because |
| Graphical with flat colors |
GIF |
Compresses graphic more
efficiently and keeps it crisp |
| Photographic or contains
gradations of colors |
JPEG |
Portrays images with millions
of colors, allowing gradients/better color representation |
| Combination of the above |
GIF |
|
| Needs a transparent background |
GIF |
This is only supported
in GIF format |
| Needs animation |
GIF |
Again, support issues |
Tip: Use 72dpi (dots
per inch) for Web graphics. This will allow for quality of image
without the quantity of download time for your dial-up or PDA
users.
Now that you have
a basic understanding of file types, colors and their symbolism,
and how to decode RGB and hexadecimal values, you should be ready
to tackle advanced graphics topics.
Printer-Friendly
Version
|
