Color Theory part 6

Hue

  • Hue is the color itself; it describes which color family you’re looking at (red, blue, pink, etc.). In the talk, hue is connected to the pink color wheel example: hue relates to the color around the wheel (e.g., pink as a hue).

Value (Lightness) and Saturation (Chroma)

  • Value: the lightness or darkness of a color. It is described as a vertical dimension (a vertical axis) in color thinking.

  • Saturation (also called chroma): the intensity or purity of the color. It is described as a horizontal dimension (a horizontal bar) in color thinking.

  • If we’re dealing with chroma, we’re dealing with the intensity of the color along that horizontal axis.

  • High value / high saturation example: a color that is very bright and very pure in its hue; the color reads as vivid.

  • Low saturation example: a color that looks grayish but warm (e.g., a warm gray with a bit of orange) indicates low saturation.

  • A tone is a color with lower saturation (more gray).

    • The common phrase "tone it down" is used to describe lowering saturation to reduce intensity.

Relationship between value and saturation

  • Value and saturation live together; you can think of them as perpendicular axes (value vertical, saturation horizontal), but they influence each other.

  • If you plot value (vertical) and saturation (horizontal) together, you get a color plane that forms a triangular-like space in practice, showing how you can move in hue, value, and saturation.

  • High intensity and high saturation occur up and to the right in this space; low intensity or low saturation occur lower or toward the less saturated side.

  • Tints and shades:

    • Tints: colors with higher value (lighter colors).

    • Shades: colors with lower value (darker colors).

How hue, value, and saturation work together

  • An important takeaway: to achieve fully saturated color, you generally want a value around the middle of the scale (roughly around 50%50\%).

  • Pastels (very light colors) cannot reach maximal saturation because their value is too high (there’s too much white in them), limiting how saturated they can appear.

  • Conversely, when you move toward very dark values, saturation is also constrained; very dark values can’t maintain the same level of saturation as mid-tones.

  • Practical rule of thumb: treat value as the lightness axis and saturation as the hue purity axis; they interact so you don’t think of them as completely independent.

How to change saturation without changing value (as discussed in the talk)

  • If you want to reduce saturation while keeping the value the same, you can mix the color with gray that has the same value as the color.

  • Example scenario described: suppose your color has a mid value (roughly around 40%40\%50%50\%). To lower saturation, you could mix in roughly 40%40\% gray with the color and keep the value (lightness) the same while reducing saturation.

  • If you instead added a lighter gray, you would lower saturation and raise value, because you’re adding more lightness.

  • Conceptual takeaway: to desaturate without changing value, blend with gray at a matching value; this reduces chroma while holding lightness constant.

Visualized concepts: where the color sits on the plane

  • Value axis: vertical (low to high value = dark to light).

  • Saturation axis: horizontal (low to high saturation = gray to pure hue).

  • The top region (high value) corresponds to tints (lighter colors).

  • The bottom region (low value) corresponds to shades (darker colors).

  • The right region (high saturation) corresponds to vivid, pure hues; the left region (low saturation) leads toward gray.

  • The pastel pink example illustrates a limit: very light colors cannot be pushed to ultra-high saturation because there isn’t enough value (lightness) left to push the hue’s purity far enough without also changing value.

Practical implications and guidelines

  • To maximize color expressiveness, consider aiming for a mid-value to allow wide latitude in saturation.

  • Values and saturations should be thought of together, not in isolation.

  • When planning color palettes for projects (e.g., psychological distance), analyze hue, value, and saturation to determine the resulting color rather than guessing.

Exercise setup referenced in the talk

  • Task: given three marks on the color wheel (a, b, c, and d), determine what color each mark represents.

  • Tips from the talk:

    • Do not look at the back of the color wheel for reference.

    • Note where you place each mark (close to the edge rather than the center).

    • Take photos of the marked wheel and upload them to a discussion thread labeled with a, b, c, and d.

    • The exercise is presented as a discussion for practice only (no points), tied to a forthcoming project titled “psychological distance.”

  • Purpose: to train color-analysis skills by using hue, value, and saturation rather than guessing.

Quick recap of key terms (concise)

  • Hue: the color family (e.g., red, blue, pink).

  • Value: lightness or darkness of a color; vertical axis.

  • Saturation (Chroma): the color’s intensity or purity; horizontal axis.

  • Tone: reduced saturation (toward gray).

  • Tint: high-value color (lighter).

  • Shade: low-value color (darker).

  • Gray: used to desaturate a hue.

  • Fully saturated color: tends to be most achievable around mid-value (≈ 50%50\%) to maximize chroma.