Picking colors for your website

So now you’ve picked out a template and it is time to do some customizing Figuring out a color scheme can be fun with a great online tool called Color Scheme Designer. Often the best way to start is to look at a picture that you want to use in the site, either as a banner, or a prominent picture. Install a great little plugin in Firefox called ColorZilla. Once installed, restart your browser and open that picture in Firefox (you can use file, open from a browser window). In the lower left corner of firefox, you will now see a little eydropper, click on that eyedropper and then click on a region of the picture with a color that you would like to use as a starting point. You will see the color changes in the lower left icon. Right click on this color and copy to clipboard.

Open Color Scheme Designer, to the lower right of the big circle, you will see ‘RGB:’ and some number, click on these numbers and paste or type in the color you chose with colorzilla. Now you have your starting point. Depending on how many colors you would like on your site, you can chose mono, compliment, triad etc from above the wheel to see complimentary colors. To take a look at how the colors work together on a website, below the boxes of color on the right, click on ‘Light page example’ and ‘Dark page example’.

You should also take a look at the ‘Vision Simulation’ link at the top right, to make sure that someone with a different visual perception would see your site. Once you have finished playing around and have decided on a color palette you like, you can click on ‘color list’ below the big circle, highlight all the colors and past them into an email to send to your favorite web-design team, or use them yourself when constructing the css file for your website.

If you have other ways that you have picked out a color scheme for your website, please add a comment so that others can benefit.

1 Comment

  1. angela says:

    playing with colorzilla now– what a great tool! thanks for the write-up and instructions, geoffrey.

Leave a Reply