前言：色彩能影响一个作品的气氛，能影响观看者的心情，而且色彩是有重量的，你信吗？如果你连这些都不知道，那如何做好界面的配色呢？这都是色彩的基础知识，设计师门都应该要去了解，今天文章将分享色彩基础知识和案例分析，希望对大家有所帮助。

配色、排版、字体是视觉设计中重要的三大因素。三个因素都可以影响到视觉设计的呈现。在设计中，色彩是整个画面中最能影响用户体验情感的元素之一，一起来体验色彩的世界。

冷暖色在设计中的应注意其比例、轻重、色环的位置，最后的视觉呈现要符合人们视觉上和心理上的舒适感。冷色会让人想到大海、冰雪等，让人产生广阔、平静、冷的感觉；暖色则会让人联想到太阳、篝火等，让人产生了温暖、热情的感觉。

传统美术色彩的三原色是：红，黄，蓝。简称 RGB，R（红Red）、G（绿Green）、B（蓝Blue）。原色的色彩纯度最高、最纯净，也最鲜艳，可以调配出绝大多数色彩，是一种加色模型。而其他颜色则不能调配出三原色。

间色是两种原色配合成的颜色。如红和黄配合成的橙色，黄和蓝配合成的绿色，红和蓝配合成的紫色。

复色是用原色与间色相调或用间色与间色相调而成的”三次色”。复色是最丰富的色彩家族。复色包括了除原色和间色以外的所有颜色。因含有三原色,所以含有黑色成分,纯度低,复色种类繁多,千变万化。比如：红色和紫色混合而成紫红色，黄和橙混合而成得到橙色。

1.互补色是色相环中呈180度角的两种颜色，如红色与绿色、蓝色与橙色、黄与紫等。互补色能补充色彩情感表达的缺失感，调节互补色的明度和饱和度能改变情感的走向。

2. 同类色是同一色相中不同倾向的系列颜色，如黄系里的橘色、中黄、淡黄等颜色。色相环内是15°以内。

3. 对比色是色相环中呈120度至150度的任意两种颜色，如红色与蓝色等。

同一颜色在强光照射下显得较明亮，而在弱光照射下显得较灰暗、模糊。针对同一种颜色，深入不同的黑色或白色后，会产生不同的明暗层次感。

图形化用户界面，用户在看到一个界面时，是一个由背景色、矩形按钮及图标ICON 设计、卡片等设计元素构成的。在设计界面时，借助色彩可以直观的展示背景色、导航栏、状态栏和操作按钮等构成的设计元素，并让产品设计的界面的逻辑架构和信息层级得到很好的展现。

产品界面设计中，不同的内容应该呈现出不同的层级关系。例如，任务与背包间的同级关系，蚂蚁森林与内容间的丛属关系等。

利用同色系、色彩之间的色相差异可非常直观的区分内容的层级关系，同时还可以通过色彩间的强对比突出关键内容。如图所示，蚂蚁森林通过色彩的强弱区分视觉层级，绿色在视觉上层级最高，重要按钮与文字使用绿色，可以让画面内容的层级关系更清晰明确。

使用同类色对比的优点是，可以营造出和谐统一的界面效果；

在界面设计中，一些品牌格调比较鲜明的产品一般都使用同类色对比。产品设计的界面效果，整个界面基本贯穿使用了绿色这一种色相，并且仅通过调整绿色的明度和纯度来适应不同的场景需求，产品格调令人记忆深刻。

使用互补色对比的优点是，可以让画面更具张力，营造出视觉上的反差，吸引用户关注。常见的互补色有红色与绿色、黄色与紫色、以及橙色与蓝色等。因此，在使用互补色对比时，设计师通常需要遵循大调和，小对比的原则，即将一种颜色大面积使用，然后将其对比色局部使用。同时，将明度相同、彩度很高的等量互补色搭配在一起，可以使界面看起来鲜明，如红色配绿色等。黄色与紫色由于明度差距较大，不会产生刺眼的效果，因此黄色与紫色的对比搭配方式也经常被用到。

在纯色搭配中，纯度对比越弱，画面冲击力也越弱，画面效果较温和，适合长时间和近距离观看；纯度对比越强，画面越明朗富有生气，画面表达越直观。纯度强对比在插画中的应用效果。通过纯度的强对比表现，可以强化画面视觉的前后关系和主次关系，平衡画面的视觉感受，突出主体物的表达。

明度对比是指色彩的明暗程度的对比，也指色彩的黑白灰的对比。在心理学中，明度对比也称明暗对比或亮度对比。物体受不同明度背景的影响，可以产生不同的视觉感受。灰色卡在白色背景下感觉变暗。在黑色背景下，感觉变亮了。

在明度对比中，黑色和白色是最强的对比组合，而黑色与深灰色、白色与浅灰色是较弱的对比组合。在同一色相、同一纯度的颜色中混入的黑色越多，明度就越低；在同一色相、同一纯度的颜色中混入的白色越多，明度就越高。利用明度对比，可展现出色彩的前后空间感、画面的层次感、体积感等。