Canvas 灰度

原色是指不能透过其他颜色的混合调配而得出的“基本色”。一般来说叠加型的三原色是红色、绿色、蓝色，以不同比例将原色混合，可以产生出其他的新颜色。这套原色系统常被称为“RGB 色彩空间”，亦即由红（R）绿（G）蓝（B）所组合出的色彩系统。

当这三种原色以等比例叠加在一起时，会变成灰色；若将此三原色的强度均调至最大并且等量重叠时，则会呈现白色。灰度就是没有色彩，RGB 色彩分量全部相等。

平均值

Gray = (Red + Green + Blue) / 3

简单快速，从人眼的感知角度看，图片的灰度阴影和亮度方面做的还不够好

基于人眼感知

人的眼睛内有几种辨别颜色的锥形感光细胞，分别对黄绿色、绿色和蓝紫色的光最敏感。虽然眼球中的椎状细胞并非对红、绿、蓝三色的感受度最强，但是由肉眼的椎状细胞所能感受的光的带宽很大，红、绿、蓝也能够独立刺激这三种颜色的受光体。

人类对红绿蓝三色的感知程度依次是： 绿>红>蓝，所以平均算法从这个角度看是不科学的。应该按照人类对光的感知程度为每个颜色设定一个权重，它们的之间的地位不应该是平等的。

一个常用的计算方法是使用YUV 颜色空间理论

Gray = (Red * 0.3 + Green * 0.59 + Blue * 0.11)

去饱和

为了更通俗易懂，有时我们选择 HLS 模型描述颜色，这三个字母分别表示 Hue(色调)、Saturation(饱和度)、Lightness(亮度)。色调，取值为：0 - 360，0(或 360)表示红色，120 表示绿色，240 表示蓝色，也可取其他数值来指定颜色。饱和度，取值为：0.0% - 100.0%，它通常指颜色的鲜艳程度。亮度，取值为：0.0% - 100.0%，黑色的亮度为 0。

去饱和的过程就是把 RGB 转换为 HLS，然后将饱和度设为 0。因此，我们需要取一种颜色，转换它为最不饱和的值。这个数学公式比本文介绍的更复杂，这里提供一个简单的公式，一个像素可以被去饱和通过计算 RGB 中的最大值和最小值的中间值：

Gray = ( Math.max(Red, Green, Blue) + Math.min(Red, Green, Blue) ) / 2

去饱和后，图片立体感减弱，但是更柔和

分解

分解算法可以认为是去饱和更简单一种的方式。分解是基于每一个像素的，只取 RGB 的最大值或者最小值

最大值分解：

Gray = Math.max(Red, Green, Blue)

最小值分解：

Gray = Math.min(Red, Green, Blue)