有 关于色彩怎么搭配才好看_必看的色彩搭配技巧方面的知识，小编在此整里出来，给大家作为参考，下面就详细的介绍一下关于色彩怎么搭配才好看_必看的色彩搭配技巧的相关内容。

以下几点往往会影响配色的思路：

1.只关注颜色表现

(资料图片仅供参考)

2.搭配方法不够系统。

3.色彩和构图都不到位。

首先，让我们简单了解一下色相和色调的概念：

接下来，根据三类配色方法，结合一些案例，分析色彩在页面中的应用方法。

第一，色差1.1形成的配色法，有主导配色。

这是由一种色调组成的统一配色方案。即画面的色彩搭配以某种色调为主。如果不是同一个色相，色环中相邻相近的颜色也可以形成相近的配色效果。当然也有一些色相差异比较大的做法，比如对比色的对比或者色彩的对比，但是这里有一个用主色配色的情况。

根据主色和辅色的色差，可分为以下几种：

1.1-1由同一色系支配

1.1-2相邻色优势

1.1-3相似色占优势

1.1-4中等色差占优势

1.1-5以对比色为主

1.1-6中性色占主导

1.1-7多色搭配下的优势

…1.1-1同色系配色

同色配色是指主色和辅色在同一个色相上，这种配色方式往往给人的感觉是页面非常一致。

推特的例子

蓝色的整体设计带来了统一的印象。颜色的深度承载不同类型的内容信息，例如信息内容模块。白色背景代表用户内容，浅蓝色背景代表回复内容，深蓝色背景代表回复操作。颜色主导了信息层面，也维护了twitter的品牌形象。

观点：色差划分页面层次和模块，代表不同的功能任务属性。

1.1-2相邻颜色匹配

邻居配色法比较常见，搭配比同色系略丰富，色相柔和过渡看起来很和谐。

DP的案例

高纯度颜色基本用于分组控制和文本标题颜色。每个控件都采用相邻色，让页面不那么单调，然后针对不同的背景色和模块划分，降低颜色饱和度。

观点：基于品牌颜色相邻色的应用，可以灵活应用于各类控件。

1.1-3相似配色

相似配色也是常见的配色方法，对比不强烈，给人一种沉稳和谐的感觉。

本马普案

页面以黄色为主，颜色基本用于不同的控件组。红色用于导航控件、按钮和图标，也是辅助元素的主色。内容标签和背景搭配用橙黄色代替品牌色。

观点：各种控件和页面主要内容都使用了基于品牌颜色的相似颜色。

1.1-4中等配色

中色彩对比比较突出，色彩对比鲜明，容易呈现饱和度高的色彩。

facebook的案例

颜色的深浅营造了空间感，也有助于划分内容模块的层次。使用统一的深蓝色系统来传播品牌形象。中间色绿色按钮起到了丰富页面颜色的作用，同时也凸显了绿色按钮的任务等级高到。深蓝色的天花板导航开启了车站的全程路线，有引导用户往下阅读的意思。

观点：利用色彩对比突出按钮任务的优先级，增加页面氛围。

1.1-5对比配色

主色搭配需要精确控制配色和面积，主色会带动页面氛围，产生强烈的心理感受。

YouTube案例

红色的精彩体现了内容的丰富性，品牌红色赋予了群体控制色彩和运营任务，贯穿了整个站点的运营提示，体现了品牌形象。红色代表导航指南和类别一

一些中性色作为基调搭配，常用于信息量大的网站，突出内容，不被不必要的颜色所干扰。这种过色的搭配是通用的，非常经典。

贝尚的案子

突出黑网址导航和内容模块的区别。品牌蓝主要用于可点击的操作控件，包括用户名和内容标题。与大片中使用品牌色彩的方法相比，更能突出内容和信息，适用于内容为王的通用型、平台型网站。

观点：用大面积的中性色作为主色调，品牌色在这里起到画龙点睛的作用，用在一些需要突出的场景，强调交互的状态等。

1.1-7多色搭配下的优势

主色和其他搭配色的关系会更加丰富。可能会有相近色、中色、对比色等搭配方式，但其中一部分会占主导地位。

谷歌的案例

对于产品线丰富的Google来说，千变万化的配色可以由四种品牌颜色按照一定的纯度比例搭配，再加上消色差的黑白灰，让品牌有很大的统一感。在大多数页面中，蓝色将是主色，其他三种颜色将是辅助色并设置不同的任务属性，黑、白、灰将是辅助色。对于平台网站来说，多色主导具有非常好的扩展性。

观点：Google设置了四种品牌颜色，通过主次和合理的比例应用在界面中，通过组控件的不同交互状态合理分配功能和任务。

第二，调色2.1形成的配色方法，有主色调匹配。

这是由同一色调组成的统一配色。暗色调和深色调可以形成同样的配色效果。即使有很多色调，只要色调一致，画面就能呈现整体的统一。

根据颜色的情感，不同的色调会给人不同的感觉：

2.1-1清晰的音调

2.1-2暗色调

2.1-3种亮色

2.1-4暗色调

2.1-5优雅的白色调

…

2.1-1清晰的音调

SHOTFOLIO的情况

清晰的色调使页面非常和谐，即使不同色调的配色与色相相同，页面也能保持高度的协调。另一张蓝色的书页有一种安静而寒冷的气息，棕色的颜色让我们想起了厚厚的泥土，给书页增添了一种稳定和稳重的感觉，同时温暖了蓝色和寒冷。

观点：互补的色调搭配在一起，颜色之间的对比效果可以通过统一色调来缓解。

2.1-2暗色调

概念应用案例

暗色调渲染场景氛围，通过不同色调的色彩变化丰富信息分类，降低色彩饱和度以协调和融入场景，白色和明亮的绿松石作为信息载体呈现。

温馨提示：多色经过统一色调处理，区域间非常和谐，不影响整个页面的黑暗氛围。

2.1-3种亮色

儿童加的情况

鲜艳的色彩活泼明朗，活泼的气氛和醒目的卡通形象描述了一场庆典，却被高纯度的色彩覆盖，对于一场漫长的参观来说，太刺激了。

观点：饱和度和纯度特征的明显结合可以达到视觉上的冲击，同时可以通过对比色或降低明度来适当调和视觉表现。

2.1-4暗色调

李费里的案子

页面以深灰色调为主，搭配不同的颜色组合，像是在讲述不同的故事。白字布局让整个页面显得厚重细腻，小区域的轻微渐变增加了布局的质感。

观点：整体画面氛围由低暗色调组成，小亮部分不会影响整体感觉。

2.1-5优雅的白色调

非常的情况

柔和的色调让页面看起来明亮温暖，即使颜色很多也不会造成视觉负担。页面颜色搭配同色调，颜色作为不同模块的信息分类，这样既能衬托不同类型载体的内容信息，又不抓住要点。

观点：同色调不同颜色的模块，即使承载不同的信息内容，也能和谐地表现。

2.2色调匹配

这是由相同或相近色调的色相变化构成的配色类型，与主色调匹配中的那些属于同一类技法。T

在实际的设计应用中，往往会采用一些比较全面的方法，比如整体主色调，小尺度的布局会采用同色调搭配。以tumblr的发布模块为例。虽然页面有自己的主色，但是小模块使用的是同色不同色的功能按钮。结合色相变化和图形来表达不同的功能点，很多按钮放在一起，模块由于颜色一致，非常稳定统一。

观点：在综合应用的情况下，整体界面以色调为主，布局如按键图标，灵活运用同一个色调。

2.3搭配相同的颜色和深度

这是由同一色相的色相差构成的配色类型，属于单一配色。与主色调中的同色系属于同一种技法。从理论上讲，同一个色相的色相并不存在色相差异，而是由不同色相类的搭配形成的，可以理解为一种色相匹配。

Genrecolours案

以紫色界面为例，使用同一个色调，通过明暗对比来营造页面空间层次。色深搭配虽然合理，但有些难以分清主次。因为是同一个色相搭配，颜色的特点决定了心理感受。

观点：同色不同深浅的配色统一性很高，但是有点枯燥。

3.对比色形成的配色法可分为互补色或对比色组成的色相对比效果、白黑等明度差组成的明度对比效果、纯度差组成的纯度对比效果。

3.1色调对比

3.1-1双色对比

3.1-2三色对比

3.1-3多色对比

3.2纯度比较

3.3亮度对比

….

3.1-1双色对比

色彩对比的视觉冲击力强，容易吸引用户的注意力。使用时，往往是大范围搭配。

签证的情况

VISA是一个信用卡品牌，深蓝色传达了和平与安全的品牌形象，黄色能让用户兴奋和快乐。另外，蓝色亮度降低后，可以搭配黄色，在对比中可以缓解视觉疲劳。

观点：无论是整体对比还是局部对比，对比色都给人强烈的视觉冲击，结合色彩心理对品牌传播有更好的效果。

3.1-2三色对比

三种颜色的色相更丰富，通过加强色相来突出某种颜色，更注重色区。

纳弗的案子

作为网站的主要导航，大面积的绿色有着鲜明的形象。用两个与品牌颜色对应的中差色进行二次导航，降低一个蓝色的亮度，再用同色相的西瓜红作为当前位置状态。副导航内部对比很强，但不影响主导航效果。

观点：三色对比，西瓜红作为一种强调色，在小面积内显示非常重要，面积的大小直接影响画面的平衡。

3.1-3多色对比

多色对比给人丰富饱满的感觉，色彩搭配的协调会让页面非常精致模块化。

麦德龙的案子

Metro style使用大量的颜色来分隔不同的信息模块。保持大模块的面积相等，模块可以细分成不同的内容层次。单色模块只承载一种信息内容，对应的功能图标识别度高。

观点：只要保持一定比例的色相和色区，页面就能井然有序。

3.2纯度比较

相对于相对色相和纯度差，对比色选择多，设计应用范围广，可以用在一些突出品牌和营销的场景。

PINTEREST的案例

中心登录模块，通过降低纯度，使无色相背景，然后利用红色按钮的比较，形成差纯度关系。与色相对比相比，纯色对比的冲突感相对较小，非常容易突出主要内容的真实性。

观点：运用对比时把握好比例很重要。面积、构图、节奏、色彩、位置等一切可以变化的元素，形成强烈的视觉冲突。

3.3亮度对比

亮度的对比接近生活的实际反映，设计十

亮度对比足以构成画面的空间深度层次，表现远近的对比关系，高亮度突出近距离的主要内容，低亮度表现远距离的距离。然而，亮度差使人专注于突出的区域，显示出药瓶的真实写照。

观点：亮度对比让页面看起来更简洁统一，而亮度的高低差异可以产生距离关系。

总结：色彩是最能引起情绪共鸣和情感认知的元素。三原色可以组成非常丰富的颜色种类，配色千变万化。在设计配色时，可以摒弃一些传统的默认样式，了解设计背后的需求和目的，考虑色彩对页面场景表现和情感传达的效果，从而有基础、有秩序、有条理地构建配色方案。

本文到此结束，希望对大家有所帮助。