A weighted average combines values while allowing some contributors to matter more than others. In frontend work, the weights can represent human visual sensitivity, opacity, or a changing position along an animation path. section 7.2.1 section 7.6.2
Listing 7.3 Converting RGB to grayscale using a weighted average
function rgbToGrayscale(r, g, b) {
return 0.299 * r + 0.587 * g + 0.114 * b; #1
}
This function converts an RGB color to a grayscale brightness value by weighting green more heavily than red and blue. section 7.2.1
The same idea appears in several visual calculations:
- Grayscale conversion uses 0.299R + 0.587G + 0.114B, reflecting greater sensitivity to green and lower sensitivity to blue. The result ranges from black at 0 to white at 255. section 7.2.1
- Alpha compositing blends a foreground and backdrop per channel: C_out = C_sα_s + C_bα_b(1 − α_s). With an opaque backdrop, the remaining background weight is 1 − α_s. section 7.6.2
- A quadratic Bézier curve weights its start, control, and end points according to t: B(t) = (1 − t)²P₀ + 2(1 − t)tP₁ + t²P₂. section 11.1.2
A semitransparent color
Place rgb(0 0 255 / 0.5) over rgb(255 0 0). Each color contributes half its channel value, producing normalized RGB (0.5, 0, 0.5), or rgb(128 0 128). section 7.6.2
The practical question is not simply whether values are averaged, but what determines their influence. Choosing the weights exposes why a grayscale image reflects perceived brightness, why transparency reveals the backdrop, and why Bézier motion bends toward control points. section 7.2.1 section 11.1.2
