A grayscale value represents apparent brightness from black at 0 to white at 255. In RGB, grayscale colors lie on the diagonal where red, green, and blue are equal. section 7.2.1 section 7.1.1
A simple RGB average is misleading because people perceive green as brighter than red and blue. Use a weighted average instead: 0.299R + 0.587G + 0.114B. section 7.2.1
Listing 7.3 Converting RGB to grayscale using a weighted average
function rgbToGrayscale(r, g, b) {
return 0.299 * r + 0.587 * g + 0.114 * b; #1
}
The conversion function applies the perceptual weights and returns one intensity that can be reused for all three RGB channels. section 7.2.1
Applying the result as CSS
For rgb(255, 100, 50), the weighted value is about 141. Set every channel to that value: rgb(141 141 141). The resulting color is a grayscale shade rather than a saturated blend. section 7.2.1
Grayscale also appears as a special case during color-model conversion:
- In HSL, a color is grayscale when chroma is zero; hue and saturation become 0 while lightness determines the shade. section 7.2.2
- When converting HSL back to RGB, zero saturation produces equal red, green, and blue channels scaled from lightness. section 7.2.3
