How do I convert an image to grayscale?

I want to do the same as the previous image using (android) code. But I am confused about the algorithm for this. All I know is:

With every pixel:

  • Convert RGB to HSL

  • ???

  • Convert HSL back to RGB

Can someone explain to me what to do in step 2? Many thanks.

ps: I can adjust saturation in android with ColorMatrix.setSaturation (0) but the result is not the same in Photoshop (because hue and lightness haven't changed?)


source to share

1 answer

You have many options for desaturating an image. Also, note that desaturating an image is not just for B&W, but for some applications, you might think they are equivalent.

I have updated this post in more detail.

The average

This is the first thing a student can do to convert to gray scale (at least what I first thought in the past!) And it looks like desaturation:

level = (R + G + B) / 3


This does not give a bad result, it is quick and easy to implement. But it has a big drawback that it does not correspond to how people perceive luminosity.


This second method (Luminance is sometimes called Luminosity, Luma, or Intensity) is the best model of how our eyes perceive brightness. It is based on the fact that the density of the cone in the eye is uneven in color. We perceive green much more strongly than red and red, more than blue.
Since we don't perceive all colors at the same intensity, the middle method is imprecise (at least it doesn't give a result that looks natural). How do you manage it? Just use a weighted average:

level = R * 0.3 + G * 0.59 + B * 0.11


As you can imagine, there are many discussions about these values. The original ITU-R Recommendation proposed this formula:

level = R * 0.2126 + G * 0.7152 + B * 0.0722


If I'm not mistaken, Photoshop uses this feature for its simple desaturation feature (yes, it's a nonsmooth version of the first):

level = R * 0.299 + G * 0.587 + B * 0.114


I don't think we can point out a big difference, anyway by changing the recent reccommand, look here on Wikipedia for more information on this formula.

Want to know the details? Read this article by Charles Poynton: Gamma Repair and his FAQ about this topic.


You have each pixel described with an RGB color model , but saturation refers to the HSL color model (in reality, you can use both HSL and HSV models when dealing with saturation). Please read the link for more details on these models.

Desaturating image consists of the following steps:

  • Convert each pixel from RGB to HSL (see this article if you need more details).
  • Set saturation to zero (this should be what it does setSaturation(0)

  • Convert it back to RGB (see bookmark ).

Let me introduce a big sampling of this process: you can desaturate a color that defines the middle between the RGB maximum and RGB minimum (lightness, do you remember that a color in RGB color space is a point in 3D space?). Formula (simplified) for desaturated image:

level = (max(R, G, B) + min(R, G, B)) / 2



The simplest form of desaturation, sometimes called local maximum decomposition, simply selects the maximum value of each RGB trimester:

level = max(R, G, B);


As you can imagine, you can use both local maximum and local minimum (I wrote locally because it looks for the minimum / maximum for each pixel).

Other methods

Don't forget that you can get a B&W image (what looks like a desaturated image) in a very fast way, simply by keeping one single channel from the RGB triplet (like the green channel) and copying that value across all channels).

Sometimes the Photoshops tutorials don't use their functions to desaturate the image (Desaturate function and Adjustment palette), but for better results they add a layer with a uniform color (calculated with values ​​from the Luminance section) and they merge this layer with the original image (search for tutorial and repeating this step in your code).



All Articles