Desaturation

Desaturation is a quick way to create black and white images. Desaturation uses the midpoint between the high and low RGB values as the gray value. It results in a black and white conversion with less contrast than other methods.


Understanding the Hue/Saturation Layer

Desaturtion uses the Hue/Saturation layer.

ScreenHunter_29 Apr. 17 12.56

ScreenHunter_30 Apr. 17 12.58

Instead of the three RGB channels of red, green and blue, Hue/Saturation works on the hue, saturation and brightness (HSB) color notation:

Hue is the actual color. Instead of the color being a combination of red, green and blue channels, hue combines it into a single channel. The hue value ranges from 0° to 360°, with 0 being red, 120° being green and 240° being blue.

Saturation is the amount of color. Saturation is a value from 0% to 100%, with 100% being fully saturated and 0% being middle gray (128, 128, 128).

Brightness or Lightness is the amount of black or white. Brightness ranges from value 0 (complete black) to 100 (complete white).

Steps in Photoshop

Desaturation is setting the saturation level of all pixels to 0. This is what desaturation does to the color chart.

  1. Open the color chart in Photoshop.
  2. Add a Hue/Saturation… layer.
  3. Set saturation to 0.

ScreenHunter_34 Apr. 17 13.35

Desaturation
Desaturation

How Desaturation Works

Although desaturation uses the HSB color notation, Photoshop actually uses a simple conversion formula to get the equivalent gray value in RGB:

gray value = (MAX(r, g, b) + min(r, g, b))/2

For each pixel, the gray value is calculated by taking the average between the maximum RGB value and the minimum RGB value.

Example

Color:

Channel
Color Red Green Blue
120 225 162

Calculated Gray Value:

gray value = (MAX(r, g, b) + min(r, g, b))/2

MAX(r, g, b) = MAX(120, 225, 162) = 225
min(r, g, b) = min(120, 225, 162) = 120
(225 + 120)/2 = 345/2 = 172.5 ≈ 172

Channel
Color Red Green Blue
172 172 172

Going back to the color chart, it’s easy to see why all the colors result in the same shade of gray.

ColorChart

The maximum value for all colors is 255, and the minimum value is 0. The average between high and low for all colors is 128. Therefore all colors get converted to (128, 128, 128).

ColorChartDSat

Since desaturation takes the average between the high and low values, the colors get crushed towards a middle value. In real world examples, desaturation may result in a black and white image with less contrast.

Leave a Reply

Your email address will not be published. Required fields are marked *