University of New Hampshire, Department of Computer Science

Information Technology 502
, Intermediate Web Design

Spring 2024

Jump to navigation

Design Template by Anonymous

Introduction

Have you ever wondered why certain colors make us feel different emotions? Or why we associate colors like red with danger? This can all be attributed to a term called color theory. Colors surround us at all times and are responsible for a lot of the emotional and psychological responses that we have. Color theory has even become one of the leading strategies of marketing teams, causing people to associate brands and companies with indivdual colors. Throughout this tutorial, the topics that will be discussed are the fundamentals of color theory, color relationships, the meaning of color, how color can be used in web design, and some examples of color theory in familiar sites. It is important to get an understanding of how color works, including the color wheel, warm and cool colors, hues, and saturation to help choose the right color palette.

Color Wheel featuring Color Emotions
This is a color wheel which features emotions that are commonly associated with the relative color. Courtesy of Medium.

What is color theory?

Color theory is the analysis of color relationships and how colors are perceived and understood by humans. When choosing colors for a website, a mobile app, or any sort of project, it is important that the colors you choose are harmonious, appealing, and engaging. Colors can evoke many different emotions in humans, convey different messages for different cultures, and even make an audience associate your product or organization with a certain color. Color theory is made up of many different components which reflects the complexity of colors themselves. Colors are made up of light, which can be displayed differently depending on the material it is reflecting on, and finally everyone perceives color differently. Understanding the connection between these three elements is vital to choosing the right color palette for your project.

Color Wheel split into primary, secondary, and tertiary colors
This is a color wheel that shows the primary, secondary, and tertiary colors. Courtesy of Life of An Architect.

Why do we use color theory?

We use color theory to elicit emotion from our audience, or to activate a psychological response that can increase interaction with our sites. The use of each color can either harm, or promote your website. Ensuring that you choose the right color to convey the right message can be crucial. For example, if you were making an alert message for your website for someone to stop and review their current action before they continue, you would not want to use a green color, but probably some variation of red. This is because we already associate red with danger, violence, and even the stop action itself as we see red in traffic lights and stop signs. On the contrary, we see green used as a symbol for ‘go’ in traffic lights, or positive emotions like peace and good luck.