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 ).
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 –). To lower saturation, you could mix in roughly 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 (≈ ) to maximize chroma.