Turn any color into a perceptually correct gray
This converter reduces a color to a single gray level the way the human eye perceives its brightness. It is what you want for desaturating a swatch, checking how a color reads in grayscale, or generating a neutral tone from a brand color.
Why perceptual weighting matters
A naive grayscale just averages red, green, and blue. The problem is that the eye does not weight those channels equally — green contributes far more to perceived brightness than blue does. The classic fix is the ITU-R BT.601 luma formula:
gray = 0.299 * R + 0.587 * G + 0.114 * BThe weighted sum produces one number, which is then placed in all three channels to make a neutral gray. The tool rounds to the nearest integer and shows the result as both an rgb() triple and a hex code. For comparison it also reports the BT.709 weighting (0.2126 * R + 0.7152 * G + 0.0722 * B), the standard used for HD video and sRGB, which leans even more heavily on green.
BT.601 vs. BT.709 — which to use?
Both formulas address the same perceptual problem (the eye is not equally sensitive to all three channels), but they were developed for different display contexts and differ slightly in their weights:
| Standard | Red weight | Green weight | Blue weight | Primary use |
|---|---|---|---|---|
| BT.601 | 0.299 | 0.587 | 0.114 | Standard definition video, legacy |
| BT.709 | 0.2126 | 0.7152 | 0.0722 | HD video, sRGB displays |
For most web and design work, the difference is subtle — typically a few gray levels for saturated colors. BT.601 is the traditional formula that most image editors use by default when they say “convert to grayscale”. BT.709 is technically more accurate for modern sRGB displays and is the formula used in CSS color-mix calculations. The tool shows both so you can compare them directly.
Practical uses
Accessibility checking: Convert a color pair to grayscale and see whether they are still distinguishable. If two colors collapse to the same gray level, colorblind users may not be able to tell them apart.
Print preparation: Many proofing workflows convert to grayscale to simulate black-and-white output. Knowing the gray level of a brand color tells you whether it will print light or dark.
Generating neutral tones from brand colors: Starting from a brand’s primary color and desaturating it gives you a gray tone that is perceptually consistent with the brand palette.
UI design: Checking whether an icon or button reads clearly in grayscale before shipping ensures you are not relying solely on hue to convey meaning — a WCAG accessibility requirement.
Worked example
A vivid orange #e67e22 (rgb(230, 126, 34)) converts under BT.601 to approximately 137,
giving the gray #898989 — a medium tone, because orange is moderately bright to the eye. Pure
green rgb(0, 255, 0) converts to a much lighter gray (about rgb(150, 150, 150)) than pure blue
rgb(0, 0, 255) (about rgb(29, 29, 29)), despite both having one channel at full intensity.
That dramatic difference is exactly the perceptual effect the weights are designed to capture. The
side-by-side swatches let you confirm the gray reads at the brightness you expect.