The Art of Web Design: Color Wheel & Color Relationships

Ever since humankind first began mixing paint, color has played a vital role in the expression of ideas. Certain colors can evoke pointed emotions or memories. Color can change the atmosphere and feeling of a piece from dull and lifeless to bright and entrancing. As the role of the Internet in business and education increases, color must be used both to interest clients and to work on behalf of computer users.

Primary Colors

Many individuals first encountered primary colors in kindergarten or elementary school. Primary colors are those colors that cannot be created through the mixing of any others. They are red, yellow, and blue.

• Primary Colors
• Light and Color: Primary Colors
• Primary Colors: Identities and Fundamentals

Secondary Colors

Secondary colors are those colors formed by combining two of the primary colors. For example, the secondary color green can be attained by mixing blue and yellow.

• Secondary Colors
• What Are the Secondary Colors?
• Elements of Art: Secondary Colors

Tertiary Colors

These colors are produced by mixing a primary and a secondary color. They also serve to bridge the gaps between primary and secondary colors on a color wheel.

• Tertiary Colors in Color Design
• Where Are Tertiary Colors in the Color Wheel?
• The Color Wheel and Tertiary Colors

Complementary Colors

Complementary colors are colors that contrast with each other particularly well. On a color wheel, they may be identified as colors that lie directly opposite one another. An example of complementary colors is the pairing of red and green.

• Color Complements
• Complementary Colors
• Q&A: Complementary Colors

Analogous Colors

Colors located next to one another on a color wheel are called analogous colors. Use of these colors in a design can lead to a harmonious gradation.

• Analogous Color Schemes (PDF)
• Analogous Colors
• Analogous Colors for Harmonious Design

The Color Wheel

The color wheel is a tool used by artists and designers to help determine the relationship between colors. Colors are arranged chromatically around the core triangle of primary colors.

• Hue and the Color Wheel
• Color Wheels: Color Systems
• Color Wheel and Color Compliments

Color Relationships

Colors can be used in myriad ways, and their pairing with other colors can greatly influence the emotional impact or message of a design. A color wheel is an excellent tool for discerning harmonious matches, such as triad colors or split-complimentary colors, but the color wheel used depends on the medium of the artist.

• Color Theory and Relationships
• Color Palettes
• Classic Color Schemes (PDF)

The Painter’s Color Triangle

The painter’s color triangle is a color triangle based on the three main colors a painter would combine. Most commonly, they are red, yellow, and blue.

• Primary Color Mixing
• Interactive Mixing of Primary Colors
• The Color of Your Own: Mixing Paint

The Printer’s Color Triangle

Printmaking is very different from painting, and this process uses different core colors. The printer’s color triangle is based on cyan, magenta, and yellow.

• The Printer’s Colors: CMYK
• How Does a Printer Produce Colors?
• CMY: The Subtractive Color Systems

Nine-Part Harmonic Triangle of Goethe

Goethe’s color triangle is a different way of building a color arrangement based on the three primary colors. Red, blue, and yellow are positioned at the three main vertices, and the secondary and tertiary colors are arranged within the main body of the triangle. Based on this configuration, Goethe could divide the triangle into different sections to try to create a certain mood with color.

• Color Mixing and Goethe’s Triangle
• Goethe’s Color Theory
• Advanced Color Study: Goethe’s Triangle

More Information on Color and Design

• Color Theory: Whether one is creating a Web page for a service, a product like IT software, or personal use, color theory is essential for a strong identity and user friendliness. This page provides a quick overview of color theory and how it can be used most effectively.
• Quick Guide to Color Theory: Color can do much more than simply make a design more appealing. It can strongly affect the viewer to the point of stirring up a specific emotion.
• Color Contrasts: Much the same way as there are many different varieties of colors, there are many different ways color can be contrasted. Designers of websites and IT software will inevitably use color contrast to create a cohesive product.
• Organizing Color: The human eye is capable of identifying a dizzying range of colors, but machines, like printers and computer screens, use a limited amount.
• Basic Web Design Principles: An integral part of any good design is who it’s for and what its intended purpose is. A website for an IT software company will look very different from a website for a home-based catering service. Keep in mind who will be using the site and what design elements they’re likely to be familiar with.
• Web Design Basics: Color: For Web pages in particular, the color of the text must contrast well with the color of the background. This isn’t to say that starkness is always the best policy. Bright blue on bright orange may contrast sharply, but they’ll also quickly tire the eye of a reader.
• 10 Principles of Effective Web Design: A good deal of design comes from a basic understanding of human psychology. This article contains many good examples of Web design and explains what makes them effective choices.
• Purpose and Guidelines for Effective Use of Web Graphics: Art and graphics can give websites visual interest and charm. At the same time, it’s important for designers to avoid costly mistakes, such as choosing pictures that take too long to load or consume too much of a page’s visual space.
• The Effect of Color in Web Page Design (PDF): A design can be easy to understand and easy to use, but if the color selections are wrong, users won’t stay on the page long enough to explore.
• Color and Graphics (PDF): As technology progresses, computer monitors become capable of displaying wider and more consistent ranges of color. This makes it especially important to be cognizant of the subtleties of color in future designs for the Web.