Web Development optimize

How to select a color scheme for your website

Using the Color Scheme Designer tool, Ryan Boudreaux shows you how you can use it to create a well-designed color theme for your website that is easy on the eye.

Your company most likely has a logo or preferred look and feel on its stationery and that's the first place to start looking for your website's color scheme. For those of you who are starting from scratch, choose two or three complementary colors and stick with them, and don't change colors on every page; you want to be consistent throughout the website. But what two or three colors and how are they complementary?

Your pants suit color might match with that blouse you have on, but choosing the right color scheme for websites is a lot harder than choosing clothes that match. Your website will be wearing the same colors for a long time, and changing colors every day is not a viable option. Unless of course you offer viewers the ability to modify their color scheme on the fly, then that added benefit to the end user experience is a big plus.

Many web designers make the critical mistake of using the wrong color schemes that don't match. Have you seen a darkly colored background on a website with lightly colored text? While some are done well, I find most of these implementations hard to read online; my eyes strain at the sight and immediately click through or close out, and not soon enough.

One cool tool that I like is the Color Scheme Designer; it provides six models to choose from starting with a "mono" selection, on through to the "accented analogic" model. Once you select your model, and primary color hue, you can preview and bookmark the current Scheme ID, then view in a light or dark page example. There are other features as well, such as randomizing the palette, and various colorblind settings, and you can export the scheme as an HTML+CSS table with style sheet. The default screen shot is displayed in Figure A:

The Color Scheme Designer website defaults to the mono color scheme model with the hue tab open and set at 0°, R 100%, G 0%, B 0%, RGB: FF0000. Notice on the top right hand side the Scheme ID: 0011Tw0w0w0w0; this will update as you modify the design model, allowing you to save it as a favorite for future reference once you are happy with your color scheme. Notice the primary color spot is positioned at the top of the color wheel, thus the 0° inclination, which is also closer to the "warm" half of the spectrum. The primary color hue is modified by clicking and dragging the spot around the color wheel to change the value. Or you can double-click over the spot to enter the numeric value, entering the Hue value from 0° to 360°, as displayed in Figure B:

Sticking with the default mono model, let's say I want a color that is more toward the "cold" section. I double-click on the spot and enter 233 and click OK. This is the resulting primary color scheme as shown in Figure C:

I could have equally just clicked and moved the spot to the desired location, and the preview pane will adjust on the fly with spot adjustments as in Figure D.

Clicking the Adjust Scheme tab on the bottom left results in the preset scheme settings for Saturation/Brightness, and Contrast. You can adjust the settings manually, or you can choose from a set of predefined presets as shown in Figure D:

If I select the "Light Pale Pastel" preset, the resulting color scheme in preview looks like this as shown on the right side of the page and displayed below in Figure E.

http://b2b.cbsimg.net/gallery/6195317-530-444.jpg

Selecting the Color List tab will display the five colors in the scheme with the associated numbers.

One more sub-tab of the Adjust Scheme tab is the Adjust Variants tab. At this point you can go back and make changes to in the variants of the primary colors including the base color, and four variants. This allows updating of the variants for all five of the colors within the scheme, including three hues of text style generation as displayed in Figure F.

Click on the Show Sample Text and you can also see how the text will appear in the selected preview pane as well.

Show Text Enabled on the preview pane as in Figure G:

Selecting the Light page example or Dark page example I can now see if this color scheme fits well with sample content; the dark page example is displayed below in Figure H:

The light pale pastel color scheme works for the body and selection sections; however, should this dark color theme get selected, the text colors would need tweaking. See how this gives you a quick way of determining how your color scheme might or might not fit in, and where you might need to tweak areas in the coding?

I rather like the light page sample shown below -- not as hard on the eyes when viewing and reading the text. Again, some text styles still need work, but this still gives me a great starting point for adjusting the text as displayed in Figure I:

If you're not sure what color scheme to choose, surf the Internet and find a website that you like, take note of its theme, colors, layout, hues, and scheme, and then you can go back to the Color Scheme Designer and  model your color scheme on what is already proven to work; most likely others will like it too.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

4 comments
epelowski
epelowski

Coming up with color schemes is a challenge for many developers. I can easily write code all day, but when it comes to creating colors that work well together I am at a loss. Thanks for this wonderful tool :)

dogknees
dogknees

Great tool. My associate and I find coming up with new but nice colour schemes a bit of a challenge, but this makes it so easy without the hassle of working out the numbers for complements and the like.