色彩在设计中的运用

短命女 2023-02-09 13:29 12阅读 0赞

有些设计师不知道色彩如何搭配合理，不知如何运用色彩，根据这个写一篇关于色彩的文章，希望能帮助到大家

![format_png][]

在写这篇色彩文章的目的是最近很多人问我在设计中如何用色彩搭配，也有一部分人觉得在设计中色彩搭配是一个痛点，甚至不知道色彩如何搭配合理，那么今天就跟大家分享一下，色彩在设计中如何搭配及运用

![format_png 1][]

在色彩应用中，每个人对于色彩的感觉都有所不同，在过往我带过的设计师中的经验来看，一个刚入行一年两年的，就算美院毕业的，在运用项目设计中同样对于色彩的搭配不到位，甚至色彩搭配的不是很合理、效果看上去很弱。这并不是因为审美有问题，我觉得最大的问题就是设计颜色储备太少，也就是所谓的经验值。虽然在学生时代学习的色彩、水粉、油画的确能培养色彩能力，但是在设计中的一些色彩规则、色彩项目中的记忆偏少导致在做设计的时候色彩把控的能力就偏弱，设计不等同于艺术、但设计一定来源于生活，色彩也同样来源于自然。只有能体会才能更好的运用。通过大量的看好的作品中的配色，才能在自己设计的时候大脑很快的调取之前所存储的色彩搭配。运用到自己的设计中。甚者没有学过美术、没有美术基础在设计岗位的小伙伴，那么对于色彩一些相关知识偏少，也会导致在设计的时候不知所措，那么接下来就是我要说的一个话题你所了解的色彩

**1.你所了解的色彩**

提到色彩，就会提到主色调、辅色调、这两者在设计中经常的存在，主色调不难理解在整个画面中色彩占用最多的颜色可以确定为主色调，作为辅色调也是在整个画面所点缀对比的一个颜色,为了讲解顺叔又做了一张设计图，如下见图讲解

![format_png 2][]

主色调和辅色调的关系就好比一个电影剧中一定是有主角和配角，主角的戏份就多一些，配角只是作为整个剧中的点缀辅助而已，这样理解是不是就形象了不少，所以在做设计的时候一定要有趣的理解问题。只有有趣的理解问题才能把设计做到极致，因为你所理解的悟到的都会融入到设计中，以至于助力设计的产出。一般主色调在设计中比较霸道，主色调确认之后整个的风格起到主导的作用。所以在做设计的同时主色调很重要，一定要确定之后在进行设计。

![format_png 3][]

此图来源于网络 电影截图

**2.你所了解的色彩分类**

丰富的色彩中分两大类一个是无彩色系，有色彩。

无色彩系：黑色、白色。

有色彩系：红、橙、黄、绿、青、蓝、紫等颜色。

![format_png 4][]

在大自然中看到这些颜色会表达出一些情绪，同样在做设计的时候颜色也能抒发出一种情绪。在PC专题、移动端设计。平面设计中色彩搭配随处可见，作为设计师来说每天都要跟色彩打交道，如果色彩都无法进行很合理，很好的搭配那么怎么提升自己的能力体现价值，设计师从创意、文案抓住眼球、也要在色彩搭配抓住眼球。当一个浏览者看到页面能感叹 这个页面颜色太漂亮了，这就说明你成功了。所看到的的只是很直观的一些色彩但在色彩中也有一些感受，色调在环境中也同样分为冷色调、暖色调

**冷色调：**青色、蓝色、等给人一种坚毅、寒冷、平静、理智、高端感受

![format_png 5][]

web 网页、海报 来源于网络

**暖色调：**红色、橙色、黄色等给人一种阳光、向上、温暖、热烈感受。

![format_png 6][]

web 网页、海报 来源于网络

**3.你所了解的色彩分类**

在设计中色彩搭配、同样要考虑到色彩对比、冷暖的对比等一些手法。色彩感情联想中把一些色彩感受通过眼睛的传达起到认知作用，通过色彩联想定义为了行业所适合的颜色，这些行业颜色在设计中起到参考帮助作用。

**黑色系列**

黑色是无色相无纯度的，给人一种严肃、神秘、含蓄，高端、酷。黑色为无色彩系和白色是个很好的搭配，一直位于时尚的前沿，黑色颜色算是个百搭的颜色，跟哪个颜色搭配起来都很不错，这两年很流行黑金色、黑金搭配给人一种高端的样式。流行与网页、平面等视觉设计方面。用在行业设计中黑色一般都应用在高端、科技、汽车、饰品、数码中，来塑造高端的视觉。

![format_png 7][]

**白色系列**

白色同样是无色彩系列的在设计中，白色显得高端、简约、干净、跟很多颜色都可以搭配。

无论在网页、平面、UI设计中可以作为背景，及点缀、用在行业设计中白色应用的比较多，简约，高端、汽车、饰品、化妆品等

![format_png 8][]

**红色系列**

红色具有很强的视觉冲击力，流露出热情、激情、喜庆、热烈、积极。红色和黑搭配体现出更明显的视觉冲击力，红色和黄色、橙色搭配画面饱满富有激情，营造出温暖的氛围，产生亲近，随和的效果，红色在设计中可应用在新年、食品、婚庆、传统喜庆色彩中。

![format_png 9][]

**蓝色系列**

蓝色在设计应用中很多，随处可见，在一些企业的VI颜色中也占很大的比例。蓝色让人联想到海洋、天空，给人一种现代感、科技感、明朗清爽感觉。蓝色可以和少量的红色、黄色、橙色搭配可以更加的协调和朝气增加画面的愉悦气氛。蓝色和白色对比视觉很强烈、暗蓝和黑色的搭配显现出产品的科技感和互联网感觉、选用蓝色作为设计画面的颜色应用于科技、互联网、旅游、教育、汽车、数码、企业等。

![format_png 10][]

**黄颜色系列**

黄属于一个暖色，给人轻快、温暖、希望、快乐、活力的感觉，使人能联想到，一望无垠的麦田、黄色的向日葵、温暖的阳光、美丽的花。设计中，黄色和紫色搭配产生遐想和梦幻，黄色和橙色搭配具有温暖的氛围，黄色同样适合于绿色、蓝色色彩搭配。黄色和黑色搭配对比起来视觉冲击力很强。黄色应用在食品、美食、儿童多一些。

![format_png 11][]

**绿色系列**

绿色给人一种希望、春天、快乐、理想的感觉。在色彩中运用的也比较多，在颜色搭配中，绿色和黄色搭配给人鲜嫩的感觉，有食欲的感觉。蓝色和绿色搭配表现清新、新鲜的感觉、清秀、豁达。绿色和橙色搭配给人一种活力感，现代感。在用色方案中可以用到：公益  医疗 食品  健康  环保 服务业 卫生保健业 机械等。

![format_png 12][]

**紫色系列**

紫色在颜色运用中联想到最多的是女性化特征，和女性有关商品、包装、美容、促销页面运用的比较多。

![format_png 13][]

**渐变色系列**

近两年渐变色很流行，蓝色到绿色的一种渐变、红色到紫色的渐变、紫色到黄色的一种渐变、紫色到蓝色的一种渐变等等。把这些渐变运用好的话会觉得眼前一亮，具有时尚感、提升画面的格调。

![format_png 14][]

了解了这些颜色属性在行业设计中的情感化设计是不是在之后做设计的时候色调定位的方向就有大致的理解。颜色属性没有完全的规定，主要还是根据大众的审美，和大家对色彩的理解进行搭配。以上色彩只是给予一些参考。更多还可以根据自身项目进行色彩搭配。

**4.你所了解色彩三要素**

要想在设计中弄明白如何搭配，就要明白色彩三要素都都包括什么，对于色彩基础的认知，更好的在之后设计中色彩的把控，合理的色彩搭配起到很重要的作用，色彩三要素既色调（色相）、饱和度（纯度）和明度。在设计中都会运用得到。

**色调**（色相）不难理解就是常说的色彩，红、黄、蓝、绿等颜色，在色相中也分为冷暖颜色

![format_png 15][]

**饱和度**（纯度）色彩中鲜艳程度正值越大色彩越鲜艳，画面饱满温暖。负值越大饱和度越降低、画面纯度降低画面感冷。

![format_png 16][]

**明度色**彩中明暗程度，在相同色彩中可最亮 可最暗。

![format_png 17][]

**5.如何确定颜色开展设计**

在做设计的时候往往会有纠结的设计师，整个画面用什么颜色更好，前不久有一个设计师在微信问过我这样的问题，一个互联网金融周年庆用什么样的颜色会更好一些

[format_png]: https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxODEyLzI4LzExMjU0OXd2d3p1eThlZWR5cHV3dXoucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxODEyLzI4LzExMjYzOG44dXViazd4djJibHhpeHgucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxODEyLzI4LzExMjc0NGQwbGxpbDh2YnZsdmw3bHYucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxODEyLzI4LzExMjgzN2J4ZXNqMzlzc3h1ZTd3bGoucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxODEyLzI4LzExMjkwN2Vqejg4OGdqODRkOHV5OGQucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxODEyLzI4LzExMjkzOXdxdWx1YTdpaW1hem1haHoucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxODEyLzI4LzExMzAwNWZjNWgwcDVzcGh2Mm96dHoucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxODEyLzI4LzExMzAzN2FkcWRibmE2Mm9uMTYzNjIucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxODEyLzI4LzExMzEyNWR6MHd3eXd3bHc2MGlxdzIucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxODEyLzI4LzExMzIwNmFzeDJlangzeDhzYTZ4M3UucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxODEyLzI4LzExMzIzN2JzcDg4aGc4ZThzZzRyeXMucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png
[format_png 11]: https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxODEyLzI4LzExMzMwNWxoZG1kY2hzejZqMGN6OWQucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png
[format_png 12]: https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxODEyLzI4LzExMzM0MnB1dDdtZmk3eDBlaXVpNGkucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png
[format_png 13]: https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxODEyLzI4LzExMzQxNW9wMWIyZ3BndzFwejc3bncucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png
[format_png 14]: https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxODEyLzI4LzExMzQ0MWYzMjY0ejJ6dGJuYjN6ZTcucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png
[format_png 15]: https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxODEyLzI4LzExMzUyMWV0bjAwa3BmdG5uN2dhMnoucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png
[format_png 16]: https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxODEyLzI4LzExMzU0N3oybGZieGJlZTBhbGxiY24ucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png
[format_png 17]: https://imgconvert.csdnimg.cn/aHR0cDovL2Jicy5pdGhlaW1hLmNvbS9kYXRhL2F0dGFjaG1lbnQvZm9ydW0vMjAxODEyLzI4LzExMzYxM3U4bm04Ym0wNXg2MHppcDUucG5nLnRodW1iLmpwZw?x-oss-process=image/format,png