黑色的撞色是什么

[色彩搭配原理和技巧]

设计原则——色彩理论

第一印象决定一切！大家都可以从各自的外表上大概看出一个人的性格。

同样的，这个理论也可以延伸到设计工作里。但是影响设计工作的因素有

很多，但是第一时间被关注到的应该是颜色。颜色反映了设计的整体感

觉，有时候单凭颜色就可以调度起一个人的情绪、情感甚至回忆。

原色：所有颜色的源头被称为三原色，三原色指的是红色、黄色和蓝

色。如果我们谈论的是屏幕的显示颜色，

间色：如果将红色和黄色、黄色和蓝色、蓝色和红色均匀混合，就会创

建三种间色：绿色、橙色和紫色。

原色间色

三级颜色：三次色来源于间色与原色的混合，主要有：红紫色、蓝紫

色、蓝绿色、黄绿色、橙红色和橙黄色。

互补色：互补色是指色轮上那些呈180°角的颜色。比如蓝色和橙色、

红色和绿色、黄色和紫色等。互补色有非常强烈的对比度，在颜色饱和度

很高的情况下，可以创建很多十分震撼的视觉效果。

三级颜色互补色

相似色：相似色是指在色轮上相邻的三个颜色。相似色是选择相近颜色

时十分不错的方法，可以在同一个色调中制造丰富的质感和层次。一些很

好的色彩组合有：蓝绿色、蓝色和蓝紫色；还有黄绿色、黄色和橘黄色。

分散的互补色:分散的互补色和互补色的区别在于分散的互补色并不是

取目标颜色正对面的颜色。而是取紫色旁边的两个颜色——紫红色和蓝紫

色。这样子不仅可以有一个强烈的对比度，而且还可以让颜色更丰富。

相似色分散互补色

颜色的意义

红色

红色是代表爱情和激情的颜色。因为红色可以很好地吸引人们的注意。红

色是很强势的颜色，当它和其他颜色相遇时，比如搭配黑色，可以创建非

常强势的感觉。红色可以搭配一些严肃的语气和强硬的命令。

橙色橙色代表了温暖，但是并不像红色那样咄咄逼人。橙色能够创建一

个有趣的氛围，因为它充满了活力，而且橙色创造出的活跃气氛并没有危

险的感觉。

黄色

提到黄色，经常可以联想到太阳和温暖。使用橙色的时候，可以创造出一

种夏天的好玩的感觉，黄色则带给人口渴的感觉，所以经常可以在卖饮料

的地方看到黄色的装饰。

绿色

绿色代表着经济增长和健康。绿色经常用作一些保健食品的LOGO，因为

看起来就十分贴近自然。绿色还意味着利润和收益。如果搭配上蓝色，通

常会给人健康、清洁、生活和自然的感觉。

蓝色

蓝色是一个神奇的颜色，因为不同明度的蓝色会给人不同的感受、想法和

情绪。深蓝色可以给人一种悲伤的感觉，让人联想起伤心时怎么听都不够

的蓝调音乐。而浅蓝色则通常会让人联想起天空和水，给人以提神、自由

和平静的感觉。蓝天永远都是平静的，水流可以冲走泥土，清洗伤口，所

以蓝色也代表着新鲜和更新。蓝色给人冷静的感觉，会帮助人放松下来。

紫色

紫色总是让人不禁想起皇室成员的长袍。紫色可以更多地与浪漫、亲密、

柔软舒适的质感产生联系。紫色给人一种奢华的感觉，也有一种神秘感。

白色

白色代表着圣洁,白色通常给人干净的感觉，比如白色的床单和衣服都让人

感觉很干净。也可以代表棉花和柔软的云朵。心理健康相关的事物也可以

选用白色，白色也同样适用于卫生、清洁相关的设计。

黑色

黑色是一个万能色彩，当黑色遇上其他颜色的时候会产生其他的意义。比

如当黑色邂逅金黄色，就可以给人一种奢华、高档的感觉；当黑色偶遇银

灰色，则会给人一种成熟稳重的感觉。

为什么要整理设计色彩方法？

在色彩设计应用中，我们对颜色不同程度的理解，影响到设计页面的表

现，熟练地运用色彩搭配，设计时岂不事半功倍。一张优秀的设计作品，

它的色彩搭配必定和谐得体，令人赏心悦目，反思我们在设计过程中，怎

样的色彩搭配更容易达到设计目的，又是什么影响了我们的配色思维呢？

以下几点常会影响色彩搭配思维：

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

接下来我们按三个大类的配色方法，结合一些案例，分析色彩在页面中的

应用手法。

一、色相差而形成的配色方式

这是由一种色相构成的统一性配色。即由某一种色相支配、统一画面的配

色，如果不是同一种色相，色环上相邻的类似色也可以形成相近的配色效

果。当然，也有一些色相差距较大的做法，比如撞色的对比，或者有无色

彩的对比。

根据主色与辅色之间的色相差不同，可以分为以下各种类型：

同色系配色

同色系配色是指主色和辅色都在统一色相上，这种配色方法往往会给人页

面很一致化的感受。

整体蓝色设计带来统一印象，颜色的深浅分别承载不同类型的内容信息，

比如信息内容模块，白色底代表用户内容，浅蓝色底代表回复内容，更深

一点的蓝色底代表可回复操作，颜色主导着信息层次，也保持了twitter

的品牌形象。

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

邻近色配色

近邻色配色方法比较常见，搭配比同色系稍微丰富，色相柔和过渡看起来

也很和谐。

纯度高的色彩，基本用于组控件和文本标题颜色，各控件采用邻近色使页

面不那么单调，再把色彩饱和度降低用于不同背景色和模块划分。

观点：基于品牌色的邻近色运用，灵活运用到各类控件中。

类似色配色

类似色配色也是常用的配色方法，对比不强给人色感平静、调和的感觉。

红黄双色主导页面，色彩基本用于不同组控件表现，红色用于导航控件，

同时也作辅助元素的主色。利用偏橙的黄色代替品牌色，用于内容标签和

背景搭配。

观点：基于品牌色的类似色运用，有主次地用到页面各类控件和主体内容

中。

中差色配色+-

中差色对比相对突出，色彩对比明快，容易呈现饱和度高的色彩。

颜色深浅营造空间感，也辅助了内容模块层次之分，统一的深蓝色系运

用，传播品牌形象。中间色绿色按钮起到丰富页面色彩的作用，同时也突

出绿色按钮任务层级为最高。深蓝色吊顶导航打通整站路径，并有引导用

户向下阅读之意。

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

对比色配色

主导的对比配色需要精准地控制色彩搭配和面积，其中主导色会带动页面

气氛，产生激烈的心理感受。

红色的热闹体现内容的丰富多彩，品牌红色赋予组控件色彩和可操作任

务，贯穿整个站点的可操作提示，又能体现品牌形象。红色多代表导航指

引和类目分类，蓝色代表登录按钮、默认用户头像和标题，展示用户所产

生的内容信息。

观点：红蓝色反应不同交互和信息的可操作性，针对系统操作和用户操作

的区分。

中性色配色

用一些中性的色彩作为基调搭配，常应用在信息量比较大的地方，突出内

容，不会受不必要的色彩干扰。这种过配色比较通用，非常经典。

相较于大片使用品牌色的手法，更能突出内容和信息，适合以内容为王的

通用化、平台类站点。

观点：利用大面积中性色作为主导色，品牌色在这里起到画龙点睛的作

用，用于一些需要重点突出的场景，强调交互的状态等。

总结：

色彩是最能引起心境共鸣和情绪认知的元素，三原色能调配出非常丰富的

色彩，色彩搭配更是千变万化。设计配色时，我们可以摒弃一些传统的默

认样式，了解设计背后的需求目的，思考色彩对页面场景表现、情感传达

等作用，从而有依据、有条理、有方法地构建色彩搭配方案。