There is no single correct greyscale. The luminosity method weights the channels by how bright each primary appears; the average method treats them equally; the lightness method takes the midpoint of the largest and smallest. For #B91C1C they give 61, 80 and 106 out of 255 respectively.
That spread matters when a design has to survive black and white printing or a monochrome fallback. Two colours that look clearly different in colour can collapse to the same grey, and which method your printer or CSS filter uses decides whether they do.
The CSS grayscale() filter and most image editors use BT.709 luminosity, the 0.2126, 0.7152, 0.0722 weighting. BT.601 luminosity, at 0.299, 0.587, 0.114, is the older television standard and is still what a lot of legacy code does.
The formula
Luminosity (BT.709)- 0.2126R + 0.7152G + 0.0722B
Luminosity (BT.601)- 0.299R + 0.587G + 0.114B
Average- (R + G + B) ÷ 3
Lightness- (max + min) ÷ 2
How to use this calculator
- Enter the colour you want to flatten.
- Choose which conversion method to use.
- The gauge shows the resulting grey level out of 255.
- Compare the other methods in the results below.
Worked examples
Red collapses hard
#B91C1C becomes 61 under BT.709 but 80 under the average method — a gap of 19 levels. The average method flatters red because it ignores how little red contributes to perceived brightness.
Two colours, one grey
#B91C1C and #4B7B00 sit at 61 and 104 under BT.709 — close enough that a monochrome print would struggle to tell a red bar from a green one. Charts that rely on hue alone fail exactly this way.
How to read your score
Frequently asked questions
Which method should I use?
BT.709 luminosity, unless you are matching an existing pipeline. It is what the CSS grayscale() filter and modern image software use, so your fallback will match what browsers produce.
Is greyscale the same as desaturating in HSL?
No. Setting saturation to zero in HSL uses the lightness method, the midpoint of the largest and smallest channel. That is why HSL desaturation makes yellows look darker than a luminosity conversion does.
Why do BT.601 and BT.709 differ?
They were derived from different phosphor primaries. BT.601 describes standard definition television; BT.709 describes high definition and matches sRGB. The gap is largest for saturated reds and cyans.
Does this account for gamma?
No, and neither does the CSS filter. All four formulas operate on the encoded sRGB values. A gamma-correct conversion would linearise first and gives noticeably lighter results for mid tones.
How do I check a design survives greyscale?
Apply the conversion to every colour in the palette and look for pairs within about 20 levels of each other. Those pairs need a difference in shape, weight or label as well as colour.
The four methods compared
| Colour | Hex | BT.709 | BT.601 | Average | Lightness |
|---|---|---|---|---|---|
| White | #FFFFFF | 255 | 255 | 255 | 255 |
| Off-white | #F5F5F5 | 245 | 245 | 245 | 245 |
| Light grey | #CCCCCC | 204 | 204 | 204 | 204 |
| Mid grey | #808080 | 128 | 128 | 128 | 128 |
| Strong blue | #1D4ED8 | 78 | 79 | 108 | 122 |
| Teal | #0F766E | 96 | 86 | 81 | 66 |
| Brick red | #B91C1C | 61 | 75 | 80 | 106 |
| Near black | #111827 | 24 | 24 | 27 | 28 |
Neutral greys give the same answer under every method.