CSS 表示颜色的值有很多种方式，最常见的比如用十六进制的数字表示的颜色 ... 还有 RGB，HLS ... 表示的颜色 ... 也有一些常用的颜色，可以使用字符来表示 ... 比如 red ... green ... blue 等等 ..

RGB 就是 red green blue，红，绿，蓝 ... 用这种方式表示的颜色，其实就是一种颜色里面 red 占了多少，green 占了多少，还有 blue 占了多少 ...

这里我用的是 Photoshop .. 打开它的拾色器 ... 鼠标在这里移动，可以选择颜色 ... 这里我们选择最右上角的这个红色 ...

在这个拾色器上，会显示出用不同的方式表示的这种颜色 ... 比如 RGB ... 现在 R 这里是 255 ... 255 是一种颜色里最多能包含的颜色的值 ... 这里就是我们选择的这种颜色，红色占满了 .. 绿，还有蓝的值分别都是 0 ... 也就是我们选择的是纯红色 ...

在这个拾色器的下面，还有使用十六进制表示的颜色 ...

下面我们再到浏览器上去看一下 ... 现在这张网页里面有两段文字 ... 我在样式表里，把文字的颜色设置成了 red ... 也就是红色 ...

打开浏览器的开发者工具 ... 选中一个段落文字 ... 在右边的 Styles 这个面板里，会显示出这个元素的样式 ... 你会看到，现在 color 这个属性的值是 red ...

下面我们再打开 Computed ... 这个面板 ... 在这里再找到 color 这个属性 ... 现在它的值是 red ... 用鼠标点一下这个颜色 ... 会出现不同的方式表示的这个颜色 ...

现在是十六进制的方式 ... 这是一种简写的方式 .. 再点一下是完整的十六进制的颜色 ... 再点一下是用 rgb 的方式表示的这个红色 ... 你会看到这种颜色，红的值是 255 ... 绿还有蓝的值都是 0 ... 表示这是一种很红的颜色 ...

再点一下，会显示出用 hsl 表示的颜色 ... H 是 Hue ，也就是色相 .. S 是 saturation ，表示饱和度 ... L 是 lightness ... 表示 明度 ...

用 hsl 表示这个红色，它的值是 h 是 0 ，饱和度是 100%，明度是 50% ...

Sass 支持所有这些表示颜色的方法 ... 你可以使用运算的操作符去处理颜色的值 ... 另外 Sass 还提供了一些非常有用的处理颜色的函数，在下面的视频里我们再去看一下...