HEX & RGB Color to Grayscale Calculator
Calculate a grayscale HEX code from any HEX or RGB color, compare BT.709 with RGB Average, and generate a neutral CSS color palette.
Source color
Grayscale result
#7B7B7Brgb(123, 123, 123)123 / 2550.2355Black text contrast
4.96:1
White text contrast
4.23:1
Grayscale color palette
Color conversion reference
How to Convert a HEX Color to a Grayscale Code
Converting a HEX or RGB color to grayscale replaces red, green, and blue with one shared gray value. The BT.709 method weights the channels according to perceived brightness, while RGB Average gives each channel equal weight. This calculator handles color codes only. To process a photo or graphic, use the grayscale image converter.
BT.709 weighted luma
Gray = 0.2126R + 0.7152G + 0.0722BGreen contributes most and blue contributes least. That is why pure green converts to a much lighter gray than pure blue, even though both source channels have the same numeric strength.
RGB average
Gray = (R + G + B) / 3Average is useful for simple numeric comparisons, but it does not model perceived brightness. Pure red, green, and blue all become the same #555555 gray with this method.
| Source color | BT.709 result | Average result |
|---|---|---|
Red#FF0000 | #363636 | #555555 |
Green#00FF00 | #B6B6B6 | #555555 |
Blue#0000FF | #121212 | #555555 |
Grayscale palette uses
Evenly spaced grayscale colors are useful for design tokens, neutral UI states, charts, print checks, and prototypes. Copy the generated CSS variables or download them as a stylesheet, then adjust individual shades for the contrast requirements of your design system.
Contrast still needs testing
Converting a color to gray does not guarantee readable text. The tool reports black and white text contrast against the converted shade, but the final foreground and background pair should still be checked against the relevant WCAG requirement. For the image-level math, read how RGB-to-grayscale conversion works.
Color conversion references
Standards and browser references behind the grayscale, luminance, contrast, and CSS values shown on this page.
HEX and RGB Grayscale Calculator Questions
Understand grayscale color codes, weighted conversion, palettes, and contrast results.
How do I convert a HEX color to grayscale?
Enter a 3- or 6-digit HEX value. The converter reads its red, green, and blue channels, calculates one gray value with your selected method, and returns matching grayscale HEX and RGB codes.
What is the BT.709 grayscale formula?
The formula is Gray = 0.2126R + 0.7152G + 0.0722B. It gives green the greatest influence and blue the least, producing a gray value closer to perceived brightness than a simple channel average.
Why does RGB Average look different from BT.709?
RGB Average weights all three channels equally. BT.709 accounts for their different perceived brightness, so saturated green becomes lighter and saturated blue becomes darker than an equal average would produce.
Related Image Tools
Continue with closely related browser-based image tools.
Calculate a Grayscale Color
Calculate the grayscale equivalent of any HEX or RGB color and export a neutral CSS palette.