How to use the grayscale converter
- Enter the Colour as HEX, rgb(), hsl(), a CSS name or with the picker.
- Read the main result, Rec. 601 grey, and its Luma (0–255) value.
- Compare it with Rec. 709 grey, Luminance-preserving grey and Channel average.
- Use the swatch row to see the original next to the three main greys.
What it does and when to use it
Turning colour into grey sounds simple, but there is no single correct answer. The eye is most sensitive to green and least to blue, and different standards weight the channels differently. This converter shows the main methods together, so you can choose the one that suits your task and see how much they disagree.
Designers use it to test whether a palette still works in grayscale, a quick way to spot colours that differ only in hue. Developers use it to match a grayscale function in code or to pick a neutral that “weighs” the same as a brand colour. To see colours as people with colour-vision deficiency do, the colour blindness simulator has a full achromatopsia view. For a warm toned version instead of a neutral grey, try the sepia converter, and for a softer partial desaturation use the HSL adjuster.
How it works
With R, G and B as gamma-encoded values from 0 to 1:
- Rec. 601: Y′ = 0.299 R + 0.587 G + 0.114 B
- Rec. 709: Y′ = 0.2126 R + 0.7152 G + 0.0722 B
- Channel average: (R + G + B) ÷ 3
- Luminance-preserving: each channel is first linearised with the sRGB curve, Y = 0.2126 R + 0.7152 G + 0.0722 B is computed on the linear values, and Y is re-encoded with the sRGB curve.
The grey is that value on all three channels. The last method gives a grey with exactly the same WCAG relative luminance as the original, so contrast checks give the same result.
Worked examples
These are the converter’s own results.
| Colour | Rec. 601 | Rec. 709 | Luminance | Average |
|---|---|---|---|---|
| Blue #3b82f6 | #7a7a7a | #7b7b7b | #858585 | #919191 |
| Red #ff0000 | #4c4c4c | #363636 | #7f7f7f | #555555 |
| Green #00ff00 | #969696 | #b6b6b6 | #dcdcdc | #555555 |
For the mid blue the four methods sit within a few steps. For pure red and green they spread widely, and the average gives both the same grey.
Limits and tips
- Transparency is kept as it is.
- These are screen formulas; printed greys also depend on paper and ink.
- Everything runs in your browser.
Frequently asked questions
Which grey is the right one?
Why are the four greys so different for pure red?
What does the Luma (0–255) value mean?
Why is the channel average not recommended?
Can it convert a whole image?
How do we know nothing is uploaded? Test it yourself on the privacy proof page.