cascading colors

an exploration of color and CSS

properties of color

saturated color wheel with hues and values

beyond mixing primary colors to yield secondary and tertiary colors, painters must understand the properties of colors as defined by color theory to achieve desired variation and depth in painting.

three properties of color are:

hue

hue is another term for color, but is reserved only for primary, secondary, and tertiary colors. other colors will have hues that are primary, secondary, or tertiary. for example, maroon has a red hue.

on the color wheel, the middle ring of colors shows the hues.

hues on the color wheel

saturation

saturation refers to the purity of a hue. primary red is the most saturated or "pure" red. secondary and tertiary colors are the most saturated instances of those colors because they are mixed from pure primary colors.

desaturation of a color can occur in two ways:

  1. adding gray to the color
  2. adding the color's complement to the color

some argue that desaturation by complementary color is more desirable than adding a shade of gray for the same reason that homemade black is sometimes more desirable. the mixed colors will be less harsh and artificial if mixed from the primary color palette, from which all other colors are derived.

there are 3 foundational complementary color pairs that are needed to understand more complex pairs:

these foundational color pairs are composed of a primary color and the single secondary color of which it is not a "parent." this means that desaturating a primary color requires adding smaller parts of the other two primary colors. desaturating more complex colors is dependent on the hue of that color, as mentioned above. therefore, desaturating maroon would require a similar approach to red, with small parts of blue and yellow added. mixing equal parts of complementary colors yields brown.

hover over the blank swatches below to reveal a desaturated version of the left swatch:

on the color wheel, the foundational complementary color pairs are opposite from each other:

complementary colors on the color wheel

value

value refers to how light or dark a color is. it can be adjusted in two ways:

  1. lightening a color by adding white
  2. darkening a color by adding black or dark brown

lighter versions of a color are called "tints" and darker versions are called "shades." on the color wheel, tints appear on the outer ring and shades appear on the inner ring:

tints and shades on the color wheel