Sketch 基础学习(1)

在开始学习Sketch之前，我们来普及一些关于色彩的知识。运用色彩，是一个极为主观的话题，并不像编程一样有绝对的对错。因此，我们只讨论一些关于色彩的基础知识，以及一些照着做一定不会错的原则。有了这些基础知识做铺垫，我们可以有效的提高自己的设计和鉴赏水平，并正确地通过色彩体现自己的设计意图。

作为开始，我们先来了解两种常用的色彩表示方法，在Sketch中，我们会经常使用它们。

RGB颜色

计算机并不像人一样，可以通过Red / Green / Blue这样的名字来记录颜色。在计算机里，颜色一样是通过数字的形式存储的。其中，我们最熟悉的一种方式，就是RGB颜色，它用一个8位的三元组数字表示一个颜色。有时，我们把颜色写成向量的形式：(0, 0, 0)，有时写成以#开头的十六进制数：#000000，它们的含义是一样的。在这个三元组中，全F表示白色，全0表示黑色：

color-basics

另外，这个三元组中的第一个数字表示红色、第二个数字表示绿色，第三个数字表示蓝色。于是，我们只要让对应位置的颜色是255，其余位置的颜色是0，就可以得到“纯正”的红色、绿色和蓝色了：

color-basics

我们管这三个颜色，叫做RGB中的Primary Color，这也是这种命名方式的由来。

稍后，我们还会提到Primary Color的概念，在不同的场景里，Primary Color的含义并不相同，大家要注意区分。

理解了这种方式之后，就会发现，从#000000到#FFFFFF，就是RGB可以表现出来的所有颜色，这些中间值可以理解为是这三种Primary Color的混合。

color-basics

这种表达颜色方式虽然很好理解，但对我来说，最大的问题，就是当你看到一个RGB值的时候，很难一下子就反应过来这大概是一种什么颜色。

HSB颜色

于是，我更喜欢用另外一种表示颜色的方法，叫做HSB颜色，他也是一个三元组数值，但我们通常只使用向量的形式表示。例如，刚才用RGB表示的蓝色，用HSB表示，是这样的：

color-basics

其中，H表示Hue，也就是色调，取值范围是0-360。这是这种表示方法中，对颜色起决定性作用的数值，既然取值范围是0-360，我们就不难把它想象成一个圆。然后，让X轴逆时针转动，第I象限表示从红过渡到黄；第II象限表示从黄过渡到绿，第III象限表示从绿过渡到蓝，第IV象限表示从蓝到紫再回到红。有了这个记忆之后，只要看到H的值，我们就能大致想象出它表示的颜色了。

color-basics

在Sketch中，H的值是用一个色带表示的，但值的分布和我们刚才讲的是一样的。

color-basics

在图中可以看到，色带的两头都是红色，我们只要从左到右拖动色彩中的滑动快，就可以看到H从0-360的变化过程了。

接下来，S表示Saturation，也就是饱和度，取值范围是0-100。我们可以把它想象成是颜色的浓淡，值越大越浓，越接近颜色本身，越小越淡。

最后，B表示Brightness，也就是亮度，取值范围也是0-100。这个值越大，颜色越明亮，越有助于我们看到要表现的颜色，越小颜色越暗，这个值为0的时候，表示黑色。

在Sketch中，S和B是通过一个二维平面表示的，S是横坐标，B是纵坐标。我们只要在这个平面水平或垂直移动，就能理解这两个值的含义了。

color-basics

HSB颜色也叫做HSV颜色，其中V表示Value，含义和B是一样的。

于是，我们可以把HSB这三个数值组合起来，用一个锥形表示。从下面的图中可以看到，H表示由各种颜色组成的色圈，而S表示这个圆圈的直径，最终，当S为0的时候，这个色圈缩小成了中间的一个白点。

接下来，B或者V表示由HS构成的颜色平面的面积，B越大，颜色越暗，HS平面的取值范围越小。当B为0的时候，HS平面就缩小成了锥顶的黑点。

color-basics