The Chemistry of Color

One of the things I learned when I first started designing things on the Web was how to utilize color. Like typography, color is an often overlooked aspect of graphic designing. I never thought much about it until I had a client one time who wanted a particular color for their banner design and then some complimentary colors to use on the rest of their web site. At the time I wasn't familiar with the term and so of course I had to do some research. As is usual in these cases Google can be your best friend.

Complementary colors are those colors that are opposite each other on the color wheel. Red and green, yellow and violet, blue and orange, are the three simple pairs of complementary colors. These colors always go well with each other, hence the term complimentary.


One sees the use of complementary color schemes in every aspect of our lives. During Christmas, red and green become inseparable, proving the simplicity and ease of complementary color schemes. The use of gold on a rich blue background was a favorite of renaissance painters. Early evening or seasonal paintings utilizing the yellow and violet color scheme was common among impressionist painters like Monet and Serrat.

- excerpt from Basic Principles of Color artSparx.com

The best way to describe what complimentary colors are would be to use my own blog here as an example. When I first started building TBODC I decided on two primary colors - light cream (for the content area) and light beige (for the sidebar). I used these colors as a starting off point and then picked other colors that would 'compliment' them. The overall effect is a web page design that has an even color scheme and is pleasing to the eye.

This is the goal of any designer, whether you are a home decorator or a graphic designer like myself - to start off with one or two primary colors for your project then pick colors that compliment them.

Another way to look at this would be to imagine you are making your own homemade latte. I love mocha lattes (which would be a soft brown color) and therefore to make one I would add mocha. You would not, for instance, add purple to this recipe if you are trying to produce something brown. Do you see what I'm getting at? It's all about the chemistry; what ingredients (or colors) you use to produce the desired flavor.

If you own Photoshop then you already have a much better tool at your disposal for picking colors - the Color Picker. There are several methods for choosing complimentary colors in Photoshop using this indispensable tool. To begin with there is the HSB slider shown here ...


Pick one color by clicking on the foreground box on the left and then move the HSB slider up and down on the right to find corresponding complimentary colors you could use.

Another method is say you want to make your own palette from a color wheel image you found on the Web. To do this copy and paste the image of the color wheel into Photoshop (or you can copy and use the one I have here), then select your Eyedropper Tool and - while holding down the Shift key - click on areas of colors you would like to use from the image, like so ...


Make sure your Info palette is visible (Window > Info, or F8), and then as you click on each color in the wheel the RGB values for that color will be displayed in the Info palette. You can do this with any image you find that has colors in it you would like to use. The Info palette will actually expand as you click on your colors, but it will only display up to four color selections at a time. You can then click on the small Eyedropper icon on the Info palette and choose different color formats to display.


If you right click on one of the little circles created by the Eyedropper Tool a flyout menu appears and you can choose to copy that color as HTML. For instance, in the screenshot below, I have right clicked on the light orange color and chose "Copy Color as HTML", which puts the HTML value of that color on the clipboard. This is a great method for use in your page code as you choose colors to put on your web pages. To get rid of the little circles you picked just hold down Shift+Alt (your cursor will turn into a little pair of scissors) and simply click on each one.


In choosing colors for your own web pages or designs there are several helpful places on the Web to aid in your efforts. One of them I like in particular is COLOURlovers which has tons of tasty color schemes you can choose from. If you find one that you like just click on it and you'll be taken to a page where you can create a palette from that color.


Just click the "Create a palette for this color" button and you'll be taken to another page where you can choose complimentary colors to add to the palette. This is a great and convenient way to create your own color groups to use in your designs. You can also just search COLOURlovers for palettes already created by other people. They are all free to use.

Another nice online app is offered by ColorSchemeDesigner. It's a Java color picker where you can simply click on the wheel to choose what colors you want and the window on the right displays your complimentary colors.

As for picking colors right off a web page there are a couple little apps I like to use. One is called ColorPix by ColorSchemer and the other is ColorPic by ICONICO. Both of these nifty utilities are handy and convenient because they're small, unobtrusive, and can nab color off a page with just a mouse click. They are also free to use.

Hopefully this has changed your perception on using colors to build your designs and web pages and also given you some useful information on how to utilize different tools in your search to find complimentary colors. I know it has changed mine.

I thank you for reading, and if you have any questions or suggestions please leave them for me in the comments section.

Have fun!