Color Theory & Web Design

What is color? Color is the “characteristic of human visual perception described through color categories, with names such as red, blue, yellow, green, orange, or purple”.

The use of color can affect how people feel, and how they see things. For example, when creating a website it’s important to note which colors to use in order to properly convey a certain theme or message. Color can also be used to create aesthetically pleasing imagery that captivate the reader.

The three basic categories of color theory are:

The Color Wheel

The color wheel is an organization of color hues around a circle, which shows the relationships between primary colors (red, yellow, blue), secondary (green, orange, purple), and tertiary (yellow-orange, red-orange, red-purple, blue-purple, blue-green & yellow-green).

The Color Wheel

Color Harmony

Oy, this world could use some harmony. Harmony occurs when different things are arranged together in an elegant manner. When colors are combined in a harmonious way, they can bring different experiences to the user and can provide an “inner sense of order”.

These are seven different types of harmonies between colors.

Color harmony chart

Color Context

Colors can react differently based on the surrounding colors that are nearby. The red square in the image below is perceived differently with each color.

The color red within the context of various colors

Another example of color context is seen in the image below:

Both A and B are the same color, but since they are each surrounded by a different shade of gray, they appear different. Color context can also be used in web design, when thinking about the background and font colors.


It’s a good idea to choose harmonious colors for a website, so that you can create a better experience for the user. Bear in mind that following the “rules” of Color Theory can be broken, and the color combinations you choose can still work together!

Resources: https://www.colormatters.com/color-and-design/basic-color-theory

Further readings: https://www.brainpickings.org/2013/08/16/interaction-of-color-josef-albers-50th-anniversary/

Like what you read? Give Elizabeth Nicholson a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.