How to Use This Tool
Pick a colour, or paste several. All four methods are shown because the differences between them are the point.
Why averaging fails
The eye has far more sensitivity to green than to red, and very little to blue. Averaging the three channels ignores that entirely, so pure red, pure green and pure blue all come out at exactly 85 — the same grey for three colours nobody would confuse.
Weighting by luminance fixes it. The standard coefficients are:
- Rec.709 — 0.2126 R + 0.7152 G + 0.0722 B. Matches the primaries used by sRGB and by every modern display, and is the right default.
- Rec.601 — 0.299 R + 0.587 G + 0.114 B. Defined for older standard-definition video, and still what a surprising number of image libraries use.
Under Rec.709 the same three colours become 54.2, 182.4 and 18.4. Green is 3.36 times brighter than red, which is roughly how they appear.
The gamma problem
Here is the part most implementations skip. An sRGB value of 128 is not half the light of 255 — it is about 21.6%, because the values are gamma-encoded to give more precision to dark tones where the eye is more sensitive.
So applying luminance weights directly to sRGB numbers is arithmetic on encoded values rather than on light. Doing it properly means three steps: convert each channel to linear light, apply the weights there, then re-encode the result.
For pure red the two answers are far apart: 54.2 in gamma space and 127.1 done linearly. Both are used, and they are answers to different questions:
- Linear light is physically correct. It is what you want for compositing, blending, resizing and anything where the maths must model actual photons.
- Gamma-space weighting is what photographic and video convention produces, and it is what most people expect a black-and-white conversion to look like. Linear conversions of colourful images often look washed out and flat to viewers.
Greyscale is not desaturation
Two different operations that people use interchangeably:
- Greyscale computes one brightness value and uses it for all three channels.
- Desaturation in HSL sets saturation to zero, which takes the midpoint of the highest and lowest channel — giving 128 for all of pure red, green and blue, and losing luminance information just as badly as averaging.
The CSS filter: grayscale(1) uses a luminance matrix, so it does the right thing. The
HSL-based desaturation in some design tools does not.
Checking a design in greyscale
Converting an interface to greyscale is the quickest test of whether it relies on colour alone. If a red error state and a green success state produce a similar grey, the distinction is invisible to a viewer with colour vision deficiency, and it stays invisible in print and on a failing display.
Use Rec.709 for that test, since it approximates how the colours actually appear. Two states that differ by less than about 20 in the result are too close to rely on.
