Color in Design - Part 2

From Color in Design - part 1, you have learned the meanings of various colors. To use colors effectively, changing their properties can result in different effects. With the knowledge of color properties, creating a color scheme would be less complicated. This post will cover hue, saturation,value, chroma, tints, tones and shades of colors.

Hue

What it is: Hue basically refers to colors. Blue, green, red are hues.

Effect in design: Convey important messages. (Messages of each colors can be found in part 1)

Primary Hues

Secondary Hues

Example:

Pure hues used to give emphasize on the mood of website

 

Saturation

What it is: How hues appear under different lighting

Effect in design: Colors with similar saturation levels create more cohesive-looking designs. Low saturated colors would make high saturated colors stand out. A good example for using high vs low saturated colors would be text with a high saturated color on a background with low saturated color.

Note: High saturated colors do not refer to light colors.

Low Saturated Red

High Saturated Red

Example:

High saturated blue texts are used to stand out from low saturated blue background

Chroma

What it is: Purity of color. Hue with high chroma means no black, white or gray is added. 

Effect in design: It will be elaborated in the following properties, namely tint, tone and shade.

Tint

What it is: Hue with white added. Very light tints are sometimes called pastels.

Effect in design: Create vintage or lighter designs. Pastels tints can make designs appear to be more feminine or appeal to parents of babies and toddlers.

Red Tint

Example:

Tints bring lighter mood

Tone

What it is: Hue with gray added.

Effect in design: Can create a vintage or sophisticated/elegant feel to websites, depending on the hues. 

Red Tone

Example:

Combining different tones can give a vintage feel to website design

Shade

What it is: Hue with black added.

Effect in design: Can serve as neutral colors. Shade is combined with tints to avoid giving a dark and heavy feel.

Red Shade

Example:

Red shaded background gives neutrality to the overall design, as it reduce the overwhelming effect of pure red

Value

What it is: How light or dark a color is.

Effect in design: Colors with high contrast values, especially the ones with high chroma, generally create more aesthetically pleasing designs. 

Light Red

Dark Red

Example:

Different values in colors display contrast, which make the overall design visually appealing