Color to Grayscale Calculator

Color to Grayscale Overview

Convert any color to its color to grayscale equivalent for desaturated preview or monochrome design while preserving perceived lightness. This calculator uses relative luminance per WCAG 2.2 relative luminance—not simple RGB averaging—so results align with accessibility contrast checks.

Enter a HEX, RGB, or HSL value to see the grayscale equivalent (HEX/RGB) and a side-by-side swatch for print preview, UI theming, or accessibility reference.

HEX to Grayscale Formula

For sRGB channels normalized to 0–1, relative luminance is:

L = 0.2126 × R + 0.7152 × G + 0.0722 × B

The tool maps L back to a neutral gray (#RRGGBB with equal channels). This differs from HSL desaturation (setting saturation to 0), which can produce slightly different neutrals for some hues.

How to Use

Enter Color

Enter HEX, RGB, or pick a color; the tool computes the grayscale equivalent and shows it next to the original.

Choose Algorithm (if available)

If the tool offers several methods (e.g. average, luminance-weighted, desaturate), compare them; luminance-weighted usually matches perception best.

Use Cases

Converting UI colors to grayscale helps check if lightness hierarchy is clear, or provides grayscale values for single-color print or contrast evaluation.

FAQ

Is grayscale the same as desaturation?

Not always. Color to grayscale here uses WCAG relative luminance (see WCAG 2.2); desaturation sets HSL saturation to 0. Results can be similar but not identical for some colors.

Why look at grayscale?

For accessibility, if two colors have similar grayscale values, contrast may be insufficient; in monochrome or print, the grayscale value can be used directly as the output color.

How is this different from HEX to grayscale lookup tables?

Some design tools use fixed RGB weights. This tool follows the W3C luminance coefficients (0.2126 / 0.7152 / 0.0722), matching contrast calculators used for WCAG compliance—not a simple (R+G+B)/3 average.