University of New Hampshire, Department of Computer Science

Information Technology 502
, Intermediate Web Design

Spring 2024

Jump to navigation

Design Template by Anonymous

Basic Fundamentals of Color Theory

Color Wheel

The color wheel, as pictured below, is a wheel composed of 12 different colors which highlight primary, secondary, and tertiary colors. Primary colors are red, yellow, and blue. These can be defined as colors that cannot be created by using a combination of other colors. Secondary colors are purple, green, and orange. These are colors that are created by mixing two of the primary colors together. Lastly, all the other colors that are shown on the color wheel are tertiary colors. These are colors that are made by mixing a primary color and a secondary color together. This model of the color wheel is called RYB, in relation to the three primary colors that it shows.

RYB Color wheel
This is a typical RYB color wheel which is made up of 12 different colors. Courtesy of Elementor.

Warm vs. Cool

When looking at a color wheel, there are two main groups which are referred to as warm and cool colors. In the color wheel pictured below, the wheel is split in half with the respective ‘warm’ and ‘cool’ labels. A warm color is a color that has a larger make up of red and yellow. A cool color is a color that is made up of more prominent purples and blues. There is also a third group of colors that is not pictured on your typical color wheel, and these are referred to as neutrals. This group includes black, white, tan, and gray. These colors are typically used to balance out vibrant colors and make a color scheme more harmonious.

RYB Color wheel with warm and cool labels
This color wheel features labels which split the color wheel into warm and cool colors. Courtesy of Elementor.

Hue

A hue is a term that refers to the color family of the current color that you have selected or are working with. These are typically primary and secondary colors, but a tertiary color can also be used to describe a hue. When selecting a color, you typically choose the hue, followed by the saturation. In the photo below, a hue selector is shown and there is a range of colors to choose from, which you can then customize later with saturation.

Hue selector
This is a hue selector bar that shows all the various hues that you can choose from when creating a color. Courtesy of Nevron Open Vision.

Saturation

Once you have a base color chosen, saturation can help you decide the color intensity. This means determining the addition of white, black, and gray into your color. Increasing the saturation makes the color you chose more vibrant, and decreasing makes the color more pale. In the picture below, there is a saturation graph where you are able to take the slider and choose how much white or black you want added into the color.

Saturation Selector graph
This is a saturation selector graph which shows the different variations of a color based on the amount of black and white added to it.