The Elements of Web Design: Color

Page content

Color Harmonies

Color harmonies describe the connection of colors and they help to create color palettes.

Complementary: This is a matching relationship between two colors located on opposite sides of the color wheel. When these colors are placed alongside one another, they enhance the luminosity of each other. When they are combined, they decrease each other’s intensity.

Analogous: This relationship is a harmonious blending of 2 colors that have hues next to each other on the color wheel. These are generally color families such as yellows (yellow-green, yellow-orange), blues (blue-green, blue-violet) or other colors.

Triadic: this is a harmony involving 3 colors that are exactly the same distant on the color wheel from one another. Examples of common color triads are primary and secondary colors.

Color Spaces

Color is generally arranged hierarchically and it is largely dependant on the way the colors are mixed. Based on the medium used, the way the colors are mixed is best defined using a color space. Color spaces of two different kinds:

Subtractive: When people talk about color, they are traditionally referring to the subtractive color space. This pigment-based color uses the pigments, as in paint mixing, to manipulate the visible wavelengths in a color space that is subtractive. When pigments are missing, the final color is white and when all pigments are blended, the final pigment is black.

Additive: This color space is electronic. It is light-based since it involves mixing colors on a computer. In this kind of color space, light is added in differing amounts to the screen to produce color. The presence of full light intensity is white while the absence of light results in black being displayed.

Primary colors: yellow, red and blue

Secondary colors: green, orange, purple

Related Concepts

Concepts on design elements are many and they can include specific terms and techniques that may be based in one way or another to the ideas explained above. These concepts are thus additional compositional tools at the disposal of a designer.

This post is part of the series: The Elements of Web Design

Web design is about more than the world wide web. The web development of a page or site requires knowledge of basic art, functionality and flow.

  1. The Elements of Design in Web Development: Intro, Line and Point
  2. The Elements of Web Design: Shape, Texture and Color
  3. The Elements of Web Design: Color
  4. The Elements of Web Design: Topography, Pattern and Movement