Color on the Web

Color on the Web

In the past, designers used to recommend "web safe colors," a list of 216 colors that would display exactly the same way, no matter what device they appeared on. This is no longer necessary as most devices can easily generate millions of colors. In HTML and CSS, color is expressed in a six digit "hex code." For instance, the hex code for white is FFFFFF. Here is a handy chart from W3 schools about hex colors. Hex codes correspond to RGB values, a three digit code specifying the amount of red, green, and blue light in a pixel. Most graphics editors and color scheme tools will display the hex code for a color along with the RGB values, which can be useful in editing the CSS of a page- you can make sure you are using the same hue and shade of brown for all of your headings and links, if you should so desire.

In working with images, photographic media is best displayed in bitmap color (24-bit) in the JPEG file format. Graphics such as logos and clip art are often best displayed in the GIF format, meaning they will be limited to 256 colors. In thinking about what format best suits your images, consider how much color gradation and variation there are in graphical elements. Also, consider that if you are attempting to match graphical color (in a logo for example) to a page's background color, the two may not always match up. You might end up with a box around your logo, like this:

 In this case, you will want to add transparency to the logo so that the page background color shows through, or use an unambiguous background color such as black or white. Matching shades of gray can be particularly difficult.

There exists a plethora of tools online to assist the would-be designer in working with color. Design Shack has a great review of tools available. We worked with Color Scheme Designer to help us choose which colors might work well for our blog. When selecting web colors, keep in mind that you are trying to create a scheme that helps the reader find the most important elements of your page quickly and allows them to read text clearly. Make sure your hyperlinks are distinguishable and keep large blocks of text simple- black and white may be boring, but when your readers are trying to concentrate on getting through a lengthy article, they're not going to want to be distracted by oddly colored text anyway.