About

Computing the arithmetic mean of multiple colors is not a trivial visual operation. The human eye perceives brightness non-linearly, which means a naive average in raw RGB space can produce results that appear perceptually darker than expected. This calculator computes the channel-wise mean across R, G, and B for any set of input colors, and optionally applies ITU-R BT.709 luminance weighting (coefficients 0.2126, 0.7152, 0.0722) for perceptually balanced results. It also extracts the dominant average from uploaded images by sampling every pixel via Canvas getImageData(). Incorrect color averaging leads to muddy palettes in design systems, inaccurate data visualization legends, and broken gradient midpoints. The tool assumes sRGB color space and does not perform gamma correction, which introduces an error of approximately 5 - 12% in perceived lightness for highly saturated inputs.

Formulas

The arithmetic mean color is computed by averaging each RGB channel independently across n input colors:

R_avg = 1n n∑i=1 R_i

The same formula applies to the G and B channels. For image averaging, n equals the total pixel count (width × height).

Relative luminance per ITU-R BT.709:

Y = 0.2126 ⋅ R + 0.7152 ⋅ G + 0.0722 ⋅ B

Conversion from RGB to HSL uses the standard algorithm: H is derived from the channel with maximum value, S = C1 − |2L − 1| where C is the chroma (max − min of normalized channels), and L = max + min2.

Where: R, G, B = channel values (0 - 255); n = number of colors; Y = relative luminance; H = hue in degrees; S = saturation; L = lightness; C = chroma.

Reference Data

Color Name	HEX	RGB	HSL	Luminance (BT.709)
White	#FFFFFF	255, 255, 255	0°, 0%, 100%	1.000
Black	#000000	0, 0, 0	0°, 0%, 0%	0.000
Pure Red	#FF0000	255, 0, 0	0°, 100%, 50%	0.2126
Pure Green	#00FF00	0, 255, 0	120°, 100%, 50%	0.7152
Pure Blue	#0000FF	0, 0, 255	240°, 100%, 50%	0.0722
Cyan	#00FFFF	0, 255, 255	180°, 100%, 50%	0.7874
Magenta	#FF00FF	255, 0, 255	300°, 100%, 50%	0.2848
Yellow	#FFFF00	255, 255, 0	60°, 100%, 50%	0.9278
Orange	#FF8C00	255, 140, 0	33°, 100%, 50%	0.4817
Purple	#800080	128, 0, 128	300°, 100%, 25%	0.0697
Coral	#FF7F50	255, 127, 80	16°, 100%, 66%	0.4474
Teal	#008080	0, 128, 128	180°, 100%, 25%	0.1940
Slate Gray	#708090	112, 128, 144	210°, 13%, 50%	0.4818
Gold	#FFD700	255, 215, 0	51°, 100%, 50%	0.8424
Tomato	#FF6347	255, 99, 71	9°, 100%, 64%	0.3930
Steel Blue	#4682B4	70, 130, 180	207°, 44%, 49%	0.4524
Olive	#808000	128, 128, 0	60°, 100%, 25%	0.4639
Salmon	#FA8072	250, 128, 114	6°, 93%, 71%	0.4730
Indigo	#4B0082	75, 0, 130	275°, 100%, 25%	0.0533
Ivory	#FFFFF0	255, 255, 240	60°, 100%, 97%	0.9896

Frequently Asked Questions

Arithmetic averaging in linear RGB produces #800080 (purple with 50% intensity per channel). Because sRGB is gamma-encoded, this value appears perceptually darker than a true midpoint. For perceptually accurate results, you would need to linearize the sRGB values (apply inverse gamma), average, then re-encode. This tool operates in sRGB space, which matches how CSS and browsers handle color mixing.

Pixels with an alpha channel value below 10 (out of 255) are skipped entirely. Semi-transparent pixels (alpha ≥ 10) are included with their RGB values as-is, without premultiplying against a background. This prevents white or black backgrounds from skewing the average when processing PNGs with transparency.

Arithmetic RGB treats all three channels equally. Luminance-weighted averaging applies ITU-R BT.709 coefficients (R × 0.2126, G × 0.7152, B × 0.0722) to compute a single brightness value per color, then weights each color's contribution to the final average proportionally. This produces results that feel more balanced to human perception, especially when mixing colors of very different brightness levels.

HSL averaging is problematic because hue is a circular value (0° and 360° are the same red). Averaging hue = 10° and hue = 350° arithmetically gives 180° (cyan), which is wrong - the correct mean is 0° (red). This tool uses RGB space because channel values are linear scalars without circular discontinuities. If you need hue-based blending, convert to a Cartesian representation of hue first.

The Canvas API processes all pixels, but images larger than approximately 4000 × 4000 pixels (16 megapixels) may cause noticeable lag on mobile devices. The tool scales images exceeding 2 megapixels down to a maximum of 1000px on the longest side before sampling, preserving color distribution while maintaining responsiveness. The original image is not modified.

RGB channels are computed as floating-point averages, then rounded to the nearest integer using Math.round(). This introduces a maximum error of ±0.5 per channel, which corresponds to less than 0.2% deviation - imperceptible to the human eye. The HEX string is derived from these rounded integers.