Setting up Color on the Internet

In the last post I discussed setting up color for printing. This week I’d like to switch gears and instead look at using color for digital applications, including the internet, is much simplified from working for print. Digital screens can only interpret color in the three color breakdown RGB, red, green, and blue. It’s likely this will change in the future (TV maker Sharp introduce a four color TV in 2010, but the technology hasn’t gained much popularity), but for now the one color mode option simplifies things. When working with images in Photoshop, it is very easy now to set your color mode to RGB by going to the menu and choosing IMAGE > MODE > and then RGB Color.

Setting color mode in Photoshop

Setting color mode in Photoshop

Web Safe Colors

I’ll also mention that designers used to refer to “web safe” colors. When the web was in its infancy and computer monitors were also quite new, the number of actual colors that could be display consistently and accurately was really limited. At one point the number of colors available was 256 and designers had to work within that range. Computer displays have advanced greatly since those early days and “web safe” colors don’t apply any more. Today’s monitors can display millions of colors. I still hear the term thrown around some, mostly be people who don’t really understand what the term referenced. If you happen to be told by your boss to be careful in choose web safe colors you might kindly and respectfully let them know that those old limitations no longer apply.

Hexadecimal Color Codes

The one part of working with digital color that can be confusing or tricky at first is the use of hexadecimal, or HEX, color codes. These are another legacy of early internet, but are still widely used in web design because web browsers haven’t all advanced enough to switch to RGB color codes. Some newer browsers are doing so, but not enough to change the standard just yet. In later units you will be building an email campaign and portfolio website and will need to use HEX codes when choosing colors to set up the design of each.

HEX colors are six-digit codes that represent each color. The code is actually a translation of RGB values from 9 digits to 6 digits. The codes are a combination of letters and colors. Using Photoshop it is very easy to find a HEX code. You can use the Eyedropper tool to sample a color.

color-sampled

Then if you double click on the sampled color the color sample box will come up showing you all of the different values for that image. Below the RGB values there is a box labeled #. This number is the hexadecimal color code. You can easily copy the value here to use in your website or email campaign.

Color Picker Foreground Color

Color Picker Foreground Color

Tags: , , , ,