网页设计 » 视觉设计 » 色彩基础小知识:HSB配色小技巧

色彩基础小知识:HSB配色小技巧

发表于: 视觉设计. 评论
Sponsor

色彩是设计工作中非常重要的一部分,很多产品都有自己的品牌色,每个颜色也有不同的含义和心理映射。本次就简单介绍一下色彩的基础小知识和HSB模式配色小技巧。

色彩基础小知识:HSB配色小技巧

色彩三原色

颜色分为美术三原色和光学三原色。

一般我们说的红、黄、蓝三原色就是美术三原色,也是我们现实生活中看到的颜色。

但是在屏幕上的三原色是红、绿、蓝,又称是光学三原色。光学三原色就是我们经常用到的RGB色彩模式。

色彩基础小知识:HSB配色小技巧

色彩的搭配 

在了解各种搭配之前先了解一下12色色相环。

12色色相环以美术三原色为基础,由原色、二次色、三次色组成。原色是红、黄、蓝在环中形成一个等边三角形,二次色是橙、紫、绿三个颜色由原色混合而成,三次色则是由原色和二次色混合而成。

色彩基础小知识:HSB配色小技巧

单色系

一个色相,颜色不同的深浅程度。

色彩基础小知识:HSB配色小技巧

同类色

同类色是指在色相环上相距15°~30°颜色的搭配。

色彩基础小知识:HSB配色小技巧

邻近色

邻近色是指在色相环上相距 60°~90°颜色的搭配。

色彩基础小知识:HSB配色小技巧

互补色

互补色是指在色相环上对立(180°)的两个颜色。

色彩基础小知识:HSB配色小技巧

对比色

对比色是指在色相环上相距120°~180°的两个颜色。

色彩基础小知识:HSB配色小技巧

以上的配色只是一些理论依据,具体的配色可以按照这些依据灵活运用。

色彩的三要素

色彩的三要素是:色相、饱和度、明度,也是我们经常说的HSB色彩模式。

色彩基础小知识:HSB配色小技巧

色相(Hue)

色相,即色彩的相貌,就是指红、橙、黄、绿、青、蓝、紫这些不同的颜色。

色彩基础小知识:HSB配色小技巧

饱和度(Saturation)

饱和度,即色彩的纯度,就是指颜色的鲜艳程度。

色彩基础小知识:HSB配色小技巧

明度(Brightness)

明度即,色彩的明暗度,就是指颜色亮度的变化。

色彩基础小知识:HSB配色小技巧

HSB模式配色

我一般都是用HSB模式进行配色,这个模式和RGB模式相比看起来会更加直观,下面以蓝色为例,给蓝色配一组颜色。

单色配色

保持色相(H)不变,变化饱和度和明度。浅色色调饱和度(S)减少、明度(B)增加,深色色调饱和度(S)增加、明度(B)减少。

色彩基础小知识:HSB配色小技巧

双色配色

某些颜色可以直接保持饱和度和明度不变,直接改变色相(H),某些颜色比如绿色,在视觉上更亮一点,在改变色相的同时,可以适当增加饱和度、减少明度。配色还是要以视觉感受为主,具体的数字只是来帮你更加精确。

色彩基础小知识:HSB配色小技巧 色彩基础小知识:HSB配色小技巧

固定搭配

根据上面介绍的搭配模式,可以产生一些固定搭配的色彩出来,在没有好的灵感的时候,用一些固定搭配总是不会出错。

色彩基础小知识:HSB配色小技巧

本次只是讲了一些色彩搭配的固定格式和如何操作的小技巧,具体的搭配还是要根据产品需求和实际情况去实践。

其实色彩搭配是一个比较难的技术活,即使你知道了上面的小技巧可能还是不能马上搭配出很好看的颜色,不过没关系,主要还是要多看,多看一些颜色搭配好看的图片、界面,去学习找感觉,慢慢的色彩搭配的感觉就可以出来了。

作者 | 设研 仓仓君 公众号 | Leo设研所

来源 | https://mp.weixin.qq.com/s/r4nHgNaaezH3uWYLq99GFw

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }