Web Design Elements: All About Colors

Color theory has existed for centuries, ever since people realized they could mix two different colors together to create a brand new color. These ideas were first written down in the 1400s by Leonardo da Vinci, but it wasn’t until the 18th century that people really started to take notice of them. Color theory is about combining colors using the color wheel in order to change the atmosphere and evoke certain thoughts and emotions. In Web design, color theory is an important building block of knowledge for designers of all types. Color can affect the way a person views a website, company, and brand, which is why it’s important to learn about color theory while studying Web design.

Primary Colors

The primary colors are red, blue, and yellow. They are the colors that can’t be created by mixing any other colors together. Every other color on the color wheel is created by mixing together these three colors.

• Why Are Red, Yellow, and Blue the Primary Colors if Computer Screens Use Red, Green, and Blue?
• Artist Color Wheel
• Definition of Primary Colors

Secondary Colors

Secondary colors are created when two primary colors are mixed together. For example, green is a secondary color, as it can be made by mixing yellow and blue. You can also mix together red and blue to get another secondary color: purple.

• Definition of Secondary Color
• Secondary Colors
• Guide to Secondary Colors

Tertiary Colors

Tertiary colors bridge the gaps between primary and secondary colors on a color wheel. They’re created by mixing a primary and secondary color together.

• Color Meanings: Tertiary Colors
• Why Are Tertiary Colors Always Defined Incorrectly?
• Tertiary Colors

Complementary Colors

When you look at a color wheel, the colors that are directly opposite from one another are called complementary colors. They compliment each other particularly well, even though you may not think of them together at first. If they’re mixed together, they create a neutral color, but when they are placed together, they create a visual contrast that is appealing to the eye.

• Complementary Colors
• Complementary Colors in Design
• The Scientific Reason Complementary Colors Look So Good Together

Analogous Colors

Analogous colors are located next to one another on a color wheel. Paired together, these colors create a gradient that evokes a sense of unity, such as warm colors like yellow, orange, and red, or cool colors like green, blue, and purple.

• Analogous Colors Reference Page
• The Dynamics of the Analogous Color Scheme
• Analogous Colors: Definition and Examples

The Color Wheel

You may have learned about the color wheel as a child in elementary school because it’s one of the basic and most important art concepts. Artists and designers constantly use it while planning out designs to create harmonious color matches. The colors are arranged in a circle with the primary colors placed at equal distances from one another and the secondary colors placed in between them.

• Basic Color Theory
• Color Theory Basics: Understanding the Color Wheel
• The Color Wheel

Color Relationships

There are a variety of ways that color can be used, and which other colors are have paired with can impact the message of a design. A color wheel is a great tool for illustrating the color relationships in order to help designers create the best possible images.

• Color Wheel
• Master Artists and Their Relationship With Color
• Color Palettes

The Painter’s Color Triangle

The painter’s color triangle is a visual of the primary colors with an open or white center that painters can use to combine to create different colors for a project.

• The Creation of Color
• Color Theory Triangle
• Who Came Up With the Color Wheel?

The Printer’s Color Triangle

While painting uses red, blue, and yellow as the primary colors, printmaking does not. You may notice on your printer that it uses CMYK: cyan, magenta, yellow, and black. Cyan, magenta, and yellow make up the printer’s color triangle.

• Working With Color CMYK Files
• The CMYK Color Wheel
• Web Colors in CMYK

Nine-Part Harmonic Triangle of Goethe

The nine-part harmonic triangle of Goethe is a solid triangle with the painter’s primary colors placed on the three main vertices. In between the primary colors, the secondary and tertiary colors are arranged within the body of the triangle. Goethe created this configuration so he could divide the triangle into different sections to best evoke certain moods with color.

• Goethe’s Triangle Explanation
• Goethe’s Color Theory
• Goethe’s Use of Color

More Information on Color and Design

• Color Basics: This page creates a visual of the color wheel and explains how to read a color wheel as well as colors for digital art and painting.
• Color Contrasts: The 12-hue color circle is similar to the color wheel but is designed to help with color contrast.
• The Psychology of Color: Marketing and design make use of the psychology of color, or the emotions that different colors are meant to evoke, in order to create an effective brand or advertisement.
• Color Theory for App Developers: The Meaning of Color: The psychology of color is a small part of color theory, which is a science unto itself. This page gives a brief overview of what color theory is and how people use it.
• Color Theory: Color theory is a longstanding form of study that many people turn into their life’s work. This document from a college professor explains why people study color and color theory.
• Learning About Color Theory: Learn about color theory with these four modules that break down the concept and allow for a hands-on experience to learn how the color wheel works.
• Color in a New Light: Color theory doesn’t just extend to art students; there’s actually a lot of science that goes into color, thanks to Isaac Newton’s research in the 1660s.
• Psychology of Color in Graphic Design: Graphic design often makes use of the psychology of color in order to create designs that reflect a brand or company’s message in a simple way that’s easy to relay to consumers.
• Elements of Design: Color is only a small portion of what it takes to create a good design; this explanation goes over all of the elements needed to create effective designs.
• Color as a Visual Element in Design: Color is often the first thing people notice in design. This article covers how colors can make a statement in graphic designs.