Tutorial: Colors and Web Design
Download Color Selector for Harmony Contrasts and tutorial.
This tutorial deals with the topics colors and the right choice of colors in particular. This is interesting for those who have their web site designed, as well as for those who deal with or have to deal with designing a home page.
We tried to bring in only as much theory as necessary, but as many practical explanations as possible, so that you will obtain useful results quite fast.
Some information in advance:
The tutorial contains plenty of colored graphics. The quality of their display on the screen depends on different factors: it depends on the screen itself, the monitor adjustment, the graphic card and even on the browser you are using. So I ask you to take these inevitable tolerances into account when looking at the graphics.
Which Colors on Your Home Page?
Especially the chapter harmony theory requires basic knowledge of color theory. Those who do not know the basic concepts of color theory (complementary contrast, color wheel, color modulations, etc.) should, at first, deal with the basic rules:
Those who do not yet have any idea about which color to use for their home page, may be interested in the chapter about color symbolism. Symbolism of colors means that we associate very specific colors or color combinations with certain terms, feelings, situations, or conditions. A well-known quote illustrates these associations:
"Grau, teurer Freund ist alle Theorie, und Grün des Lebens goldner Baum."
"Gray, dear friend, is all theory and green the golden tree of life."
Mephisto in Goethe's Faust
We all understand right off what this quote wants to tell us. We intuitively assign the associated symbolism to the respective color names. We can use this effect when choosing colors for our home page: there are possibly color combinations that may emphasize the topic of our home page. The web site of a wholefood manufacturer, e.g., deals with the topic "health". So he could use colors that are associated with the term "health". In fact, these associated colors are green and red, and to a small extent pink and blue. The chapter color symbolism gives you the possibility to find out color associations for more than 200 terms:
In which way colors should be spread out over the web site so that we create a fitting and harmonic impression can be read on the pages about color harmony:
How to integrate a color association selected in the chapter color symbolism into the web site and how to bring it into accordance with the rules of harmony theory:
There is also a chapter about the basic principles of designing shapes and surfaces, because colors only then become effective, when they are adequately spread out over the shapes and surfaces of the web site:
Since marketing and PR become more and more important on the web:
All chapters can as well be studied one after the other; there is a "previous" and a "next" link at the bottom of each page.
There is also a "hot start page" with links to the color diagrams, the list of associated terms, the harmonic color wheel, the categories of color stimuli as well as to the rules for flow texts and headlines. In the offline version of the tutorial, you just need to apply a connection to this hot start page on your desktop or a local bookmark in your browser for easily gaining access:
Site Map
Basic Rules of Color Theory
- Additive Color Mixing
- Primary and Secondary Colors
- The Color Wheel
- Different Color Wheels
- Complementary Colors and Simultaneous Effect
- Modulations
- Tertiary Colors
- Perspective Effect Produced by Colors
Color symbolism
Harmony theory
-
- Preface to Creativity
- What is a Harmony Theory?
- Roman Liedl's Harmony Theory
- Angular Contrast
- Angular Harmony
- Fannings
- Color Rows
- Repetitions
- A Color Combination We Are Used To
- Colors that Support Certain Angular Harmonies
- Quantitative Contrast
- Light-Dark Contrast
- Colorful-Uncolorful Contrast
- Cool-Warm Contrast
- Harmony Contrasts
- Work Examples:
- Page 1
- Page 2
- Page 3
- Page 4
- Page 5
- Page 6
- Page 7
- Page 8
- Page 9
- Page 10
- Page 11
- Page 12
- Page 13
Color selector for Harmony Contrasts
- Description and Download Color Selector
Accordance Between Harmony Theory and Color Symbolism
Design of Surfaces
- What is Harmony?
- Contrasts
- Similarity and Dissimilarity
- Examples for Harmony and Disharmony
- Further Examples for Harmony and Disharmony
- Tensions
- The Beautiful and the Ugly
- Our Daily Activation
- The Beautiful Web Site
Marketing and PR
- Marketing in Web Design
- Images as Marketing Means
- Headlines as Marketing Means
- Texts as Marketing Means
Hot Start Page
- Hot Start Page
-
- Reference:
- Bibliography
- Imprint
- Responsible for content:
Hartmut Rudolf
Theodor-Fontane-Weg 12
D-45219 Essen
Germany
Tel: +49 2054 104 76 33
All information on this web site have been gathered carefully and conscientiously. They will constantly be checked, updated and complemented in the future. Nevertheless, some details may meanwhile have changed. Therefore we will not assume any liability or guarantee for the topicality, correctness or completeness of the information provided on this web site. The same applies to all web sites that are connected via hyperlinks. We are not responsible for the contents of those sites that can be reached via such a connection.
Please read the information about Guarantee and Copy Rights.
