色彩的基本配色方案

时间:2019-06-26
本文章向大家介绍色彩的基本配色方案,主要包括色彩的基本配色方案使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

       色彩是我们观察事物的第一认知,是最能触动我们感官的视觉元素。色彩可以激发我们的联想,刺激我们的情绪。在设计中,色彩的合理运用一直是个很重要的课题,在这里我总结了一些色彩部分的常识分享给大家。

一、色环

原色由红黄蓝组成。在传统的色彩理论中(主要应用于绘画和颜料),三原色是三种不能相互混合的颜色,其它所有颜色都是来自于这三个色调。

 
 

有了这三种原色,我们可以去创建二次色(Secondary colors):绿色、橙色、紫色。

 
 

混合原色与二次色,我们可以得到所谓的三次色(tertiary colors):橙黄色、橘红色、紫红色、紫蓝色、蓝绿色、黄绿色。

 
 

我们将所有这些颜色的合成称为色环。

色环可以被分为暖色和冷色。暖色是生动且充满能量的,它倾向于在空间延展。而暖色则给人一种冷静和舒缓的感觉,它倾向于在空间中消退。

 
 

二、色彩搭配

常见的搭配方式有:同色系配色、互补色配色、三邻色配色、类似色配色、中差色配色、正三角形(三元)配色、互补色配色、分裂互补配色、矩形(四元)配色、正四边形(方形)配色,如下图。

1.同色系配色同色系配色是由一种色相构成的统一性配色,主色和辅色都在同一色相上,可以体现整体画面的统一性。同时这种配色也容易形成单调、乏味的味道,所以在明度和纯度上适当有一些变化,加强面积上的对比,使画面更加均衡。

 
 

2.互补色配色:色轮上彼此相对的互补色被认为是互补色(例如:紫色和黄色)互补色的高对比度创造了充满活力的外观,特别是在完全饱和时使用。这种配色方案必须妥善管理,因此不会受到刺激。补充颜色在大剂量使用时很难使用,但是当你想要突出某些东西时效果很好。互补色对文本来说真的很糟糕。

 
 

3.三邻色配色:在色相环上相邻的色彩,有一定的色相差但不是很大,可以营造和谐的氛围,并且有丰富的质感和层次。所以配色效果比同色系配色稍微丰富,柔和过渡的色相使得页面看起来更加和谐。

 
 

4.类似色配色:类似色色相上含有共通成分,配色也可以体现出和谐、协调的印象,这种配色是最能体现出色相差的配色类型。类似色的色彩具有适度的变化和动感,同样可以用过色相差体现画面色彩的张弛效果。

 
 

5.中差色配色:中差色色相上基本没有共通性,色彩包括了类似色色相到对比色色相,搭配出一种暧昧的印象,表现出舒适感和适度的刺激效果。

 
 

6.正三角形(三元)配色:对比色配色也叫相反色配色,色彩对比效果十分强烈。即使您使用浅色或不饱和版本的色调,三重色调也会非常生动。为了成功地使用三重和谐,应该仔细平衡颜色 - 让一种颜色占主导地位并使用另外两种颜色作为重点。

 
 

7.互补色配色:互补色在色相环的相对位置,色相差较大,配色体现出十分强烈的视觉冲击效果。同时也容易形成廉价、劣质的印象。

 
 

8.分裂互补配色 :分裂互补色方案是互补色方案的变体。除基色外,它还使用与其补色相邻的两种颜色。该配色方案与补色配色具有相同的强烈视觉对比度,但张力较小。分体免费配色方案通常是初学者的不错选择,因为它很难搞砸。

 
 

9. 矩形(四元)配色:矩形或四元颜色方案使用四种颜色排列成两个互补对。这种丰富的配色方案为变化提供了充足的可能性。如果你让一种颜色占优势,四色配色方案效果最好。您还应该注意设计中暖色和冷色之间的平衡。

 
 

10. 正四边形(方形)配色:矩形或四元颜色方案使用四种颜色排列成两个互补对。这种丰富的配色方案为变化提供了充足的可能性。如果你让一种颜色占优势,四色配色方案效果最好。您还应该注意设计中暖色和冷色之间的平衡。

 
 

三、使用技巧

色彩的搭配方法有很多,这里介绍我个人比较认同的方式:70%,25%,5%的配色比例原则,画面中70%为底色,面积最大的一块,往往画面的色调是有底色决定的。25%面积的为主色,画面的核心区域多使用主色区。5%为强调色,强调色在画面中起到画龙点睛的作用,强调色多使用与主色对比度较大的颜色,也可以尝试利用色彩的互补关系来突出。

 
 

当然,在实际工作中,很多时候画面不会只有三种颜色。遇到这种情况时,我们可在现有的配色方案中进行切割,从而不影响配色比例。

 

四、设计师必备的十大配色网站

Adobe Kuler

Colr.org

Colorgg.com

Color Schemer

Color Jack

Color Blender

Color Schemer Online v2

Color Hunter

Color Lovers

Color Palette Generator

原文地址:https://www.cnblogs.com/moon3/p/11094502.html