Darker color variations have lower brightness and higher saturation — adding black alone is insufficient

When a color gets darker in the real world (a shadow falls on a surface), two things happen in HSB: brightness decreases AND saturation increases. This pattern is observed consistently in real-world shadows across different hues. The implication for design: you cannot create a convincing darker variation by simply adding black (which only decreases brightness). In HSB, adding black is equivalent to reducing brightness — it adds no saturation — producing a ‘muddy’ or flat result. The correct technique is to lower brightness while simultaneously raising saturation. The inverse holds for lighter variations: higher brightness + lower saturation, equivalent to adding white.

Examples

Facebook’s search bar compared to the base page blue: saturation up, brightness down, hue shifted ~1°. The search bar ‘could not be an opacity of black overlaid on the base blue’ because black adds no saturation. Hover state on a button: darken by +saturation, -brightness.

Assessment

You have a base coral color at H=21°, S=70%, B=90%. Produce a shadow variation. State the direction of each HSB component change and explain why simply adding a black overlay would not give the same result.