首先亮度和明度两个概念，其中一个是解释了单一色彩的色彩含量，另一个解释了一个颜色中R、G、B三原色的平均值，可反应其与白色的接近程度。
“色含量”像是一个物体受光照，光越少看上去越黑，光越多就越接近它本来的颜色。“平均值”则像是一个物体自身在发光，光线少的时候仍然是越黑，但是光线多的时候，就越像是白色。
所以每个色相都具有“色含量”，最高时为此色相最鲜艳的颜色，最低时全部为黑色。而任何颜色“平均值”最高时为白色，最低时为黑色。
- 在Wikipedia的词条“Brightness”中，Brightness是“平均值”，Lightness是“色含量”。
- Wikipedia词条“HSL and HSV”中，Lightness是“平均值”，Value是“色含量”。
- 在Photoshop英文版中，Brightness的实际效果是“色含量”，Lightness的实际效果是“平均值”。
- 在Photoshop中文版中，“亮度”的实际效果是“色含量”，“明度”的实际效果是“平均值”。
- 百度百科认可“Brightness”翻译为“明度”，把它解释为“平均值”；“Lightness”翻译为“亮度”，把它解释为“色含量”。
对于英文的释义，我觉得HSL+HSV颜色体系和Adobe都出错的概率比较小，所以词条“Brightness”的解释应该错了，正确为Brightness是“色含量”，Lightness是“平均值”。而中文释义上，百度百科对应错了翻译，明度应为Lightness，亮度应为Brightness。在下文中，我明度和亮度都将做解释。
好啦，在看此回答前，需要回忆高中数学中的如下内容：
- 三维直角坐标系（三维笛卡尔坐标系）
- 立体几何中投影的概念
- 极坐标系
- 向量的加法
这是一个RGB颜色制式和HSL模型中的色彩的转换问题。其实网上有很多详尽的算法，但是我想在这里用高中数学的知识更加直观地去解释这一转换。
在RGB颜色制式中，三个颜色中的每个颜色都有一个数值来表示这个颜色的多少，这个数值取值一般是0到255，正好是二进制中的八位数可以表示的“量程”。当然在理论上，你想用0.0到1.0来表示，或者用0%到100%来表示都可以。举例，R=255，G=0，B=0，则代表红色数量最大，绿色和蓝色无，因此最终显示的颜色为纯红色。若R=0，G=0，B=0，则代表三种颜色数量都为0，最终合成为纯黑色。若R=255，G=255，B=255，则三个颜色都拉满，合成出来的是纯白色。
首先解释最好理解的明度(Lightness)：
我们引入一个三维直角坐标系，三个坐标轴分别代表R、G、B的数量。由于此数值有限，所以取值范围会在立体空间里形成一个正方体。任何一个RGB颜色制式中的色彩取值，都会对应到这个立方体内的一点。
<img src="https://pic3.zhimg.com/50/v2-f0a3db60e453e9502220d544c1ab41e8_hd.jpg" data-caption="" data-size="normal" data-rawwidth="720" data-rawheight="720" class="origin_image zh-lightbox-thumb" width="720" data-original="https://pic3.zhimg.com/v2-f0a3db60e453e9502220d544c1ab41e8_r.jpg">
现在我们从原点(0,0,0)到对角的顶点(255,255,255)连出一条直线，也就是一条体对角线。这条对角线就可以说是一条明度轴了，原点最暗，另一端最亮。而任何一个颜色对应到的一点在这条体对角线上的“投影”，就是这个颜色的明度(Lightness)。靠近原点就越暗，靠近(255,255,255)就越亮。
然后我们需要再引入一个极坐标系，来解释饱和度(Saturation)和色相(Hue)。
<img src="https://pic3.zhimg.com/50/v2-ea9e57c1c18ff7da3f990799ebdd7830_hd.jpg" data-size="normal" data-rawwidth="720" data-rawheight="720" class="origin_image zh-lightbox-thumb" width="720" data-original="https://pic3.zhimg.com/v2-ea9e57c1c18ff7da3f990799ebdd7830_r.jpg">
当中渐变圆形只是指示色相用的，重点看立体的棍状链接的模型
极坐标系由角度轴和距离轴构成。把红蓝绿三个颜色分别置于角度轴的0°、120°、240°，此时色相就被角度轴来表示。从图中也可以看到，从0°到120°中间的区域就是橙色、黄色这些红色到绿色的过渡颜色，其他区域也是同理，每个色相都映射一个角度。而让原点的颜色为灰色，越往外颜色越鲜艳，则距离轴代表的就是饱和度。
题主问的是RGB三原色怎么理解色相和饱和度，这里我们再借助向量。把R、G、B映射到角度轴，R、G、B的数值为距离轴，绘制三个向量。假设我们现在有一个颜色，R=100，G=150，B=200，那我们就在极坐标中，画一个坐标为(100,0°)的向量，一个坐标为(150,120°)的向量，一个坐标为(200,240°)的向量。
然后把这三个向量做向量的加法，最终会落在一个点上。这个点的角度轴数值就是此颜色的色相，而距离轴数值就是它的饱和度了。
<img src="https://pic2.zhimg.com/50/v2-1f29528443b645ddf26a2d184083d5f5_hd.jpg" data-size="normal" data-rawwidth="720" data-rawheight="720" class="origin_image zh-lightbox-thumb" width="720" data-original="https://pic2.zhimg.com/v2-1f29528443b645ddf26a2d184083d5f5_r.jpg">
蓝色箭头终点即为此色，色相210°，饱和度50%
不过，这个极坐标是一个二维坐标，不能表示RGB颜色制式中的所有颜色，只能解释色相和饱和度。如何使其表示所有颜色？我们需要再添加一个纵轴，变成了这样：
<img src="https://pic4.zhimg.com/50/v2-f257107266820b434fb3d9c5665292ee_hd.jpg" data-caption="" data-size="normal" data-rawwidth="720" data-rawheight="720" class="origin_image zh-lightbox-thumb" width="720" data-original="https://pic4.zhimg.com/v2-f257107266820b434fb3d9c5665292ee_r.jpg">
这里添加的这根纵轴就是亮度(Brightness)。而这个模型就是HSB模型/HSV模型。此外，还有个HSL模型，就是把Brightness轴替换成Lightness轴，替换后其顶层所有颜色都为白色。
顶层的纵坐标是255，白色是255，红色也一样是255，顶层大家的“光的量”Brightness都是最大值。底层的坐标是0，白色是0，红色也是0，所以说亮度是表示单个颜色的含量的。但是红色在上一个三维直角模型中，其投影并未到明度轴的顶点，其三数值平均值只有255/3=85，远不到最大值255，“与白色的相近程度”还明显差得很远。
图中，顶层是白色和最鲜艳的颜色，底层则清一色是黑色，想到了什么？没错，Photoshop的调色板。Photoshop的调色板也是基于HSV模型设计的，色相轴被独立出来在右侧，亮度和饱和度在二维坐标中供调制。
主要的回答部分就到此结束了。此外再提及一下色环模型。
<img src="https://pic3.zhimg.com/50/v2-a466f33993c365b12d4812b4fcbd1093_hd.jpg" data-caption="" data-size="normal" data-rawwidth="525" data-rawheight="475" class="origin_image zh-lightbox-thumb" width="525" data-original="https://pic3.zhimg.com/v2-a466f33993c365b12d4812b4fcbd1093_r.jpg">
色环模型虽然也是一个立体的极坐标，但是和上一个HSV模型并不一样。区别在于：
其一，纵轴使用的是明度(Lightness)，不是亮度(Brightness)。
其二，这个色环模型中的色相轴，红、黄、蓝三色之间互相间隔120°。而上面提到用于向量计算的极坐标中，是红、绿、蓝三色之间互相间隔120°。红蓝黄是艺术配色上的三原色，关乎人类的视觉体感；而红绿蓝是光学上的三原色，关乎RGB印刷（虽然印刷上更多用CMYK）和显示器显示。