Web Shop Design: Putting Color into Action By Helen Bradley
August 19, 2008
There are two steps to choosing and using color on your Web site. The first is to select the colors to use and the second is to actually put them to work in your Web site design.
In the first part of this series we looked at ways that you can find and select color schemes for your online store design. In this second article, we'll look at how you can utilize these color schemes in your Web application and in design tools such as Photoshop.
Elements of a Color Scheme
Creating color schemes and setting up your software to make these colors easily accessible will speed up the process of creating your Web site and we'll cover the basics to get you going, and provide some handy reference tools and resources.
A basic Web color scheme should comprise four to five colors. You will need a darker color to use for the text on the page and for places where you need a dark accent. The remaining four colors should vary in lightness and brightness. You will want colors suitable for headings, background colors and shaded boxes, for example, depending on the design you are using. Look at your Web design and decide where you will use each of the colors so you can create the required CSS style declarations.
Describing Color
The first thing to understand when working with color is that there are different ways of describing colors. In Photoshop, for example, color can be described using RGB values which are the amounts of red, green and blue used to make the color. Color can also be defined using CMYK values (cyan, magenta, yellow and black), although CMYK is typically used for print, not the Web. If you have colors defined as CMYK values you need to convert them to RGB values for use on the Web.
RGB values vary from 1 to 255 so, for example, white is R255 G255 B255 and black is R0 G0 B0. However, for the Web, these numbers must be converted to hexadecimal values — hexadecimal is a number system that has 16 digits: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, D, E, and F rather than the 10 that we use in the decimal numbering system.
To convert a RGB value to hexadecimal, you convert each of the color values individually then combine them in order left to right R,G & B. White becomes #ffffff, black comes #000000, and #feb901 is an orange color.You don't need to know much about hexadecimal conversion but you may have to convert values from time to time.
In Photoshop you can sample a color from a document and learn its RGB and hexadecimal values.
You should be able to recognize what a hexadecimal color value looks like in your HTML code, and know how you will approach the task of converting between RGB and hexadecimal. One site I like is this one, which lets you type in the RG and B values and it converts the values for you and shows the color too so you can make sure it looks correct.
Many color tools such as the Color Picker in Photoshop not only show colors as their RGB values but also Hue/Saturation/Lightness, Lab and CMYK values. In addition, the color's hexadecimal value is displayed so you can obtain the hexadecimal value for any color in Photoshop using this tool.
(Continue to Page 2 for Color Names and Capturing Colors)
Add ecommerce-guide.com to your favorites Add ecommerce-guide.com to your browser search box IE 7 | Firefox 2.0 | Firefox 1.5.xReceive news via our XML/RSS feed
IE 7
Firefox 2.0
