blendAverage: Arithmetic Mean Color Blending

Mathematical Foundation of Color Averaging

Average blending produces balanced color combinations by calculating the arithmetic mean of color values. This operation preserves color harmony while creating smooth transitions between different hues.

The mathematical definition is:

$$C_{result} = \frac{C_{base} + C_{blend}}{2}$$

Where $C_{base}$ and $C_{blend}$ are combined through arithmetic mean calculation, resulting in a balanced intermediate color that lies exactly midway between the two input colors.

For opacity-controlled blending:

$$C_{result} = \text{average}(C_{base}, C_{blend}) \times \alpha + C_{base} \times (1 - \alpha)$$

Color Balance Properties

Property	Description	Mathematical Expression
Symmetry	Equal contribution from both colors	$f(A,B) = f(B,A)$
Midpoint	Result positioned between inputs	$\min(A,B) \leq f(A,B) \leq \max(A,B)$
Conservation	Total brightness preserved	$\text{brightness}(result) = \frac{\text{brightness}(A) + \text{brightness}(B)}{2}$
Neutrality	Balanced color temperature	No bias toward warm or cool tones

Live Editor

const fragment = () => {
      const angle = uv.y.sub(0.5).atan2(uv.x.sub(0.5))
      const radius = uv.sub(vec2(0.5)).length()
      const colorA = vec3(0.8, 0.2, 0.9).mul(radius.step(0.4))
      const colorB = vec3(0.1, 0.7, 0.3).mul(angle.abs().step(1.57))
      const result = blendAverageVec3(colorA, colorB)
      return vec4(result, 1)
}

Result

Loading...