By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

Choosing colors in web-design

This article provides information about the choice of colors in web-design, and how colors may effect usability and the mood of users.

Created: 2011-04-15 16:44

In web-design, cosing the colors for your website can be one of the hardest initial decisions you will make, and you will likely stick with the choice for a long time. This article deals with the subject of color brightness, readability, and the circumstances where some of the different color choices apply best.

You can read more about how to apply colors in HTML and CSS, in the Color Reference, including some relevant keywords, and some theory on colors on the web.


If readability is important to your site, and if users will spend most time reading, than bright color-schemes will be the better choice. Bright colors with a soft contrast endorse a "happy" mood, similar to that of a nice summer sunshine. Its also generally easier to read dark text on a bright background, than it is to read bright on dark.

Site type

The choice of colors also depends on the type of site that you are making. For instance, many Hollywood movie-trailer sites are using a black background, and so are many gaming sites.

A black or dark background, with white or bright text, can be ideal on such sites, since it could be part of the marketing of the movie or game. But its generally a bad idea on informative websites such as this, where people might spend a lot of time reading. This rule if not without exception, while plain white on plain black is bad, some dark-toned sites actually do archive a good readability.

Colors and their effect on People

You may have experienced how the whether can effect your mood, or how certain atmospheres can trigger unique feelings, both of good and bad. These feelings are certainly worth to consider when you design your site.

Bright colors tend to have a anti-depressive effect, similar to that of a nice summer day. This effect can be enhanced further by including appealing graphical elements, usually placed in your header. An example could be skies on a blue background. But be careful, hitting the head on the nail on this can be particular hard. One should always aim for a nice contrast between elements, to much is bad, and to little bloats the site.


While not as important, you should also keep in mind that some people may be color blind, have problems reading text on certain backgrounds, or other disabilities not covered in this article. Black on white may very well be the safest choice, but may appear like a dull web-design choice on newer sites.