BLOG

如何选择颜色组合併建立更美观的网页设计

浏览数量: 4     作者: 本站编辑     发布时间: 2021-03-08      来源: 本站

色彩理论的定义各不相同,但网设计师的色彩理论通常是指色彩混合的实际指导方针和导致视觉吸引力和和谐色彩组合的原则。


熟悉色彩理论的原理可以帮助您完成从徽标建立到网页设计的所有工作。


为了帮助您学习色彩理论,我们将其分解为以下主题:


词彙:从色调到饱和度再到暖色等等——我们将介绍设计师在谈论颜色时使用的术语


色轮:可视化颜色之间关係的强大工具


配色方案:如何使用色轮来选择你的配色方案


工具和资源:帮助您掌握色彩设计的应用程式和指南


为什么你应该关心色彩理论


色彩理论是科学、心理学和情感的结合——使色彩成为设计中一个非常强大的方面。


艾萨克·牛顿爵士让我们开始使用基于光如何反射一系列颜色的基本色轮。颜色理论和色轮不断发展,让我们更多地了解为什么某些颜色相互补充背后的科学。


随著时间的推移,色彩心理学也影响了设计。文化、历史和情感因素的结合会影响人们看到不同颜色时的感受。


当你学习色彩理论时,你会用科学和心理学原理武装自己,帮助你唤起目标受众的情感和反应。


颜色的词汇


在我们深入理论之前,您需要了解以下术语:


原色


20220108205536_19399



三种原色——品红色、青色和黄色——用于建立其他颜色。


原色是所有其他色调的基础。人类感知三种基本颜色:洋红色、青色和黄色。我们看到的每一种其他颜色都是由这三种颜色的不同数量、亮度、色调和阴影的组合组成的。


传统上,我们认为红色、蓝色和黄色是原色,但研究表明,品红色、青色和黄色更能描述我们对色彩的体验。如果这些颜色引发了因缺乏洋红色墨水而导致印表机错误的记忆,那么您并不孤单。CMYK 颜色模型 - 青色、品红色、黄色、键(黑色) - 是基于彩色列印中使用的减色模型。它是减法,因为它从白光中减去了红色、绿色和蓝色。


RGB 和十六进位


20220108205601_97047


红色、绿色和蓝色用于建立其他颜色。


在网络上,我们使用 RGB(红-绿-蓝)和十六进位值来表示颜色。RGB 是一种加色模型——颜色是通过将彩色光添加到黑色来建立的。


RGB 颜色系统将所有颜色定义为三个不同值的组合:一种特定的红色、另一种绿色和另一种蓝色。所以:


rgb(59, 89, 145) 等于 Facebook 蓝色


rgb(0, 0, 0) 等于黑色


rgb(255, 255, 255) 等于白色


十六进位颜色系统将每个值转换为十六进位(以16 为基数)表示,如下所示:


#3b599b 等于 Facebook 蓝色


#000000 等于黑色


#ffffff 等于白色


每两个字符代表一个颜色值,所以对于 Facebook blue,红色调为 3b,绿色为 59,9b 为蓝色。

热和冷



1


冷色和暖色


颜色也有“暖色”,每一种都可以分为暖色或冷色。


暖色包含更多的红色和黄色。他们可以在设计中唤起温暖和激情的感觉。他们也会觉得非常有侵略性和大胆——这就是为什么红色经常用于错误讯息中。


冷色包含更多的蓝色,让人联想到寒冷的气候、冰、冬天、水、夜间、死亡和悲伤。它们可以带有孤独、寒冷和恐惧的内涵。更积极的一面是,因为冷色不那么具有侵略性,它们也可以让人舒缓——想想蓝天或海滩上平静的蓝色海水。


色温


增加图像的温度意味著增加其橙色级别。它通常使图像看起来更温暖和更快乐,类似于当太阳将橙色的光芒投射在它上面时世界看起来更快乐。相比之下,降低图像的温度会使其看起来更冷且不那么吸引人,就像阴天一样。


色调和色调


您将白色添加到颜色以创立色调并添加黑色以建立阴影。色调和阴影让您可以通过将不同级别的白色和黑色添加到基色来创建单色配色方案。


例如,如果您的基色是#8dbdd8(浅蓝色),如下图所示,您可以通过选择两种色调(两种较亮的蓝色)和两种色调(两种较深的蓝色)来创建单色方案。


2


基于 #8dbdd8 构建的单色配色方案COLOURCODE。

饱和度、色调和亮度

饱和度描述颜色的强度。增加饱和度会使颜色更丰富和更暗,而降低饱和度会使它看起来褪色和更亮。当我们说“浅蓝色”或“深绿色”时,我们描述的是饱和度的变化。

色调定义了一种颜色可以被描述为与红色、橙色、黄色、绿色、蓝色、靛蓝和紫色(彩虹的颜色)相似或不同的程度。因此,当您将一种颜色描述为“蓝绿色”时,您就是根据两种色调来定义它。

亮度,也称为值或色调,定义了与纯白色相比颜色的感知亮度。

HSL 配色方案。改编自“孟塞尔系统”。通过 Commons 在 CC BY-SA 3.0 下获得许可。


3



色轮


4


一个基本色轮包含用于创建配色方案的 12 种标准颜色。饼图的每一片代表一系列颜色,可以通过不同的饱和度、色调、色调、阴影和相邻颜色的混合来实现。的色彩组合(例如,黄色,橙色,红橙色)从混合基色相(黄色和橙色或红色和橙色)的等量的结果。


红色、黄色和蓝色是原色。紫色、橙色和绿色是次要颜色。其他一切都是第三色——原色和二次色的混合。


设计使用色轮选择五种配色方案之一。


5种配色方案


设计师通过配对色轮中的多个颜色系列来建立配色方案。当您使用以下建立颜色和谐的图案之一时,此方法效果最佳。


  1. 单色


5


单色配色方案由单一基色的各种色调、阴影和饱和度组成。它们非常有凝聚力,但冒著变得单调的风险。


基于紫色的单色配色方案。


2. 互补


互补色方案基于色轮相对两侧的两种颜色。因为这两种色调会有很大的不同,所以这样的方案可能会非常有影响力和引人注目。还有分裂互补色——其中一种原色与两种类似的颜色一起使用。


6


基于绿色和红色阴影的互补配色方案。


专业提示:为您的号召性用语选择一种互补色。例如,如果您的背景颜色是薄荷绿色,那麽红紫色按钮会吸引眼球,因为它是一种互补色。


互补色薄荷绿和红紫色。

7


3. 类比

类似的配色方案具有在色轮上彼此相邻的三种颜色。由于色调的相似性,这些方案可以创造一种非常有凝聚力、统一的感觉,而没有单色方案的单调。

基于红色、橙色和黄色的类似配色方案。


8



4. 三元组


要制作三色配色方案,请在色轮上绘制一个等边三角形(所有三个边都相同长度的三角形),并在三角形的点处选择三种颜色。这个三合会创造了一个多样化但平衡的方案。

基于紫色、米色和绿色的三色配色方案。


9



5.四边形


四色配色方案包括在色轮上彼此等距的四种颜色。因为四种颜色可以形成正方形或矩形,所以一些资源将这些配色方案分为两种——正方形和矩形。

四色配色方案包括中蓝、红紫、春绿和黄绿。


10


调色板创作和灵感


如果您感到不知所措,有很多颜色选择器工具和调色板生成器可以提供灵感。Colordot 之类的工具允许您从一种主要颜色或几种颜色选择开始,然后为您创建一个方案。同时,Coolors 等工具会根据您想要的配色方案类型构建调色板。


在您的设计中使用色彩理论


颜色是唤起情感和建立品牌形象的有力工具。想想你可以仅通过颜色识别的品牌——可口可乐红色或星巴克绿色。颜色可以与品牌的身份密切相关,以至于它成为合法商标——就像T-Mobile magenta 一样。


无论您是在为徽标寻找互补色还是构建整个网页设计调色板,应用色彩理论的原则将使您的设计更具视觉衝击力。走出去,利用您新发现的色彩知识为您的设计增添趣味。


广东五车科技有限公司 · 版权所有 ©1999-2024
本网站文案、设计及其中所展示作品的著作权均属于五车公司,盗版必究 · 粤ICP备19051125号-1