色彩笔记

在计算机中,计算机本身并不能直接通过名字识别色彩,而是通过数字完成记录的。

目录:


色彩基础#

RGB#

RGB是一种常见的色彩记录方式。
通常有两种表达方式:

  1. 向量 eg:RGB(0,0,0)
  2. 16进制 eg:RGB(#FFFFFF)

而分别将 16进制 的:

第一个数表示红色

第二个数表示绿色

第三个数表示蓝色

这三个色也就是所谓的三原色

因此,RGB从#000000#FFFFFF用来表示所有的颜色(每个数字的范围为0~255)

HSB#

HSB是一种使用向量形式表示的三元组

eg:

H表示色调(范围是0~360)。这是这种表示方法中,对颜色起决定性作用的数值,既然取值范围是0-360,我们就不难把它想象成一个圆。然后,让X轴逆时针转动,第I象限表示从红过渡到黄;第II象限表示从黄过渡到绿,第III象限表示从绿过渡到蓝,第IV象限表示从蓝到紫再回到红色。

S表示饱和度(范围是0~100)。我们可以把它想象成是颜色的浓淡,值越大越浓,越接近颜色本身,越小越淡。

B表示亮度(范围是0~100)。这个值越大,颜色越明亮,越有助于我们看到要表现的颜色,越小颜色越暗,这个值为0的时候,表示黑色。

HSB通常在工具中表现为色带模式,由红开始,由红结束。

色彩在UI布局中的使用#

在APP中,通常存在两类色彩:

  1. 主色彩:为基本色彩,是给用户整体颜色印象的色彩
  2. 次色彩:主要用于交互和突出内容上面


紫色为主色彩,绿色是用于交互的次色彩

但是,次色彩 并非必须存在,在为了营造APP简洁风格的时候,可以只是用主色彩
eg.

常用的主色彩#

谷歌给出了建议:

以及推荐的相关主色彩下的次色彩:

文字搭配色彩#

设计原则:#

坚持同一种字体颜色,然后通过半透明度来区分不同级别的字体,不要直接调整文字颜色的RGB值。同时,深色背景用浅色字,浅色背景用深色字。

Icon配合文字#

Icon和文字搭配在一起的时候,让它和文字保持相同的颜色,然后也通过半透明度来区分图标的状态

  • 用于浅色背景的时候,图标颜色#000000,用54%表示可用状态,38%表示不可用状态;
  • 用于深色背景的时候,图标颜色#FFFFFF,用100%表示可用状态,50%表示不可用状态;

eg.

推荐色彩相关网站#

笔记参考#

计算机网络基础及应用 2017年的回顾

Comments

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×