超实用!写给零基础新手的配色指南

Date 2026-06-04 22:12:43

超实用!写给零基础新手的配色指南

色彩非常重要。色彩是设计的表现手法之一。不同的颜色搭配可以改变商品的印象。我们生活在这个丰富多彩的世界里。虽然我们每天都在享受大自然给我们的视觉盛宴,但当轮到我们使用颜色时,我们是否感到无助和不知所措?

真正有丰富色彩感的人只占很小的一部分,很少有专家使用有限的色彩来创造视觉冲击效果。作为大多数努力匹配颜色的人,有什么方法可以提高颜色匹配能力,避免严重的颜色匹配错误?

本文相对基本和简单,将介绍基本的颜色匹配理论和一些实用的颜色匹配工具,可能会帮助新的颜色匹配。当然,它也包含了他们自己的颜色匹配偏好,颜色是不负责任的,冈本宣说,不同的人对颜色有不同的偏好,如果这篇文章可以为你提供一些经验和帮助我阅读后的颜色匹配是非常荣幸的。本文结合了《配色设计原则》和《设计细节:日本经典设计透析》两本书的部分内容,建议您下班后阅读。以下是文本内容。

1、需求完成后,我总觉得有什么问题?

无论是设计师的需求还是运营,他们都为官方账户写了一篇新的推送文章,或者他们需要制作一个PPT来向合作伙伴展示他们的产品。花了半天多的时间,终于完成了折腾。呼吸,当你打算交付时,仔细看看,你总是觉得有什么不对劲。

颜色匹配通常发生在需求制作之前的思考或作品完成后的检查中,即“页面完成后总是感觉不对”。当然,这样的事情自然会导致颜色方案中的一些问题,那么我们可以从哪些方面进行修改呢?

超实用!写给零基础新手的配色指南

从这张照片中,我们可以感觉到确实有很多不和谐感,所以让我们分别讨论哪些部分有问题,以及如何改进。我们将页面的内容分为:背景(背景颜色)、图片(形状)和文本。分别描述颜色问题。

1.背景,背景颜色太重,在反映安静、稳定的布局风格时,使用白色来表达肖像是表达主题的基本原则。在选择背景时,通常需要同时考虑角版本图片的背景,以免在完成时产生更大的颜色对比。

2.图片(图形)其实是比较统一的木色,但是上下两部分的“圆”用的是亮橙色,抹去了照片本身的颜色。虽然达到了吸引人的亮眼氛围,但给人一种轻率不稳定的印象。

3.文本,如果你仔细看,文本的颜色似乎太多了,在照片介绍中分别使用了三种颜色。与此同时,黑色标题在深色背景下使用,使文本不容易阅读。

我们将对这个简单的例子进行一些修改:

超实用!写给零基础新手的配色指南超实用!写给零基础新手的配色指南

修改后:

1. 简单使用白色背景,在简单风格的作品中,一般使用白色背景来表达效果。白色背景色是布局设计的基本颜色,是一种可以衬托任何照片的通用颜色。

2. 修正了图形和文字的颜色,使画面更加统一和谐,增加了可读性。

二、基本配色理论

说到这里,关于如何选择颜色有很多方法和理论。同时,由于设计师的个性和喜好,他们对同一部作品有不同的看法。真正有丰富色彩感的人只占很小的一部分。我们所能做的就是减少不必要的错误,在使用理论方法的情况下正确使用颜色,仅此而已。下一部分是基本的配色理论,可能相对枯燥乏味,但对于每一个需要处理颜色的设计师来说,这也是必须对抗的对象。

什么颜色?

事实上,我们必须说什么是颜色。它是人脑对光强度和不同波长的差异的感觉,是与形状最基本的视觉反应之一。物体被光照射,反射光被人脑接受,形成了对“颜色”的理解。当然,有些物体是直接发光的,比如我们的屏幕。光波是一种电磁波,其中人类可以看到的称为“可见光”。根据可见光波长由短到长,我们可以识别紫色、蓝色、绿色、绿色、黄绿色、黄色、橙色、红色等颜色。

颜色的三个属性

我们把颜色分为“色相”、“亮度(亮度)”、“纯度(饱和度)”三个属性,颜色可以根据三个属性进行系统分类。为了掌握无数的颜色并自由使用它们,我们必须充分理解这三个属性。

色相:色相是指物理或心理上区分红、蓝、黄等色感的元素之一。同时,它也指颜色本身。色相按波谱顺序排列。第一个连接形成的环形图形称为“色相环”。在色相环上确定色相关系后,配色实践变得更加简单。

超实用!写给零基础新手的配色指南超实用!写给零基础新手的配色指南

亮度(亮度):亮度是指颜色的亮度,在任何颜色中添加白色,亮度上升,添加黑色,亮度下降。因此,颜色中亮度最高的是白色,亮度最低的黑色。白色-黑色的灰色标记了亮度差异的表现。亮度也是决定文本可读性和物体外观的一个重要因素。两种颜色之间的差异,亮度对比度越强,颜色之间的边界就越明显。

超实用!写给零基础新手的配色指南超实用!写给零基础新手的配色指南

纯度(饱和度):纯度是指颜色的亮度。新鲜水果的鲜艳颜色代表“高纯度”,树汁、土壤等天然染料的简单优雅颜色代表“低纯度”。纯度越低,颜色越浑浊,最低纯度为灰色(无色)。纯度容易形成不同的气质。一般来说,纯度越高,活力越大,充满活力,纯度越低,很容易给人成熟稳定的印象。

超实用!写给零基础新手的配色指南超实用!写给零基础新手的配色指南

色彩三属性模式图(色彩立体):

超实用!写给零基础新手的配色指南超实用!写给零基础新手的配色指南

事实上,它可以简单地理解为一个基于色相环的圆柱体。整个色相环分布在圆柱体的侧面;从圆柱体底部到顶部,色相环的亮度发生变化;从圆柱体轴到侧扁平表面,纯度发生变化。

当然,现实中的纯度变化会根据颜色的不同而不同,而不是定期的几何变化。因此,这种“圆柱体模型”实际上应该要复杂得多。

关于色调

我们应该经常听到人们提到颜色这个词,在颜色三个属性中没有给出“色调”的定义,那么颜色到底是什么呢?色调是指颜色的强度和强度,是通过颜色的亮度和纯度来综合表达颜色状态的概念。也就是说,我们通常觉得“这些颜色似乎是一种颜色”的感觉,虽然颜色,不统一,但如果调整“纯度”和“亮度”也可以让图片显示出统一的颜色匹配效果。

事实上,色调是人们在日常生活中对色彩理解的一个非常重要的部分。很多时候,当我们认为一幅画是非常和谐和统一的时候,它往往是色调一致的效果。在实际的配色过程中,如果你需要选择使用多种颜色或彩色照片,使用色调和的方法更容易达到效果。

色差与色调调调和

超实用!写给零基础新手的配色指南超实用!写给零基础新手的配色指南

在使用色调和配色方案时,可以使用各种颜色,但颜色的深度(纯度)/明度)需要控制在一个范围内。

三、利用例子描述基本配色方法

以下是一个模板,展示基本的配色类型。分为“色差形成的配色”和“色调和谐形成的配色”。

A:配色是由色差形成的

1. 配色方案具有主导色彩:

这是一种由色相组成的统一配色,反映了整体统一和强烈的色相印象。如果不是相同的颜色,相邻的相似颜色也可以形成相似的颜色匹配效果,即“相同的颜色”颜色匹配和“相似的颜色”颜色匹配效果。这种颜色匹配显示了自然和谐的印象,但也很容易形成单调和无聊的印象。

超实用!写给零基础新手的配色指南“超实用!写给零基新手配色指南“

上图更多的是同色系的表现方式

超实用!写给零基础新手的配色指南超实用!写给零基础新手的配色指南

类似的颜色搭配比同色系略丰富

2.对比色构成的配色:

配色由对比色组成。可分为:由“互补色”或“对比色”组成的颜色对比效果;由白色、黑色等亮度差组成的亮度对比效果;以及由纯度差组成的纯度对比效果。由于颜色之间的相互衬托,使用高亮度、高纯度的颜色可以创造强烈的视觉冲击效果。

超实用!写给零基础新手的配色指南超实用!写给零基础新手的配色指南

上图是色相对比的方式

B:配色是由色调调和形成的

这是一种由统一色调组成的统一配色。类似的颜色搭配,如深色和深色,也可以形成相同的效果。即使有多种颜色,只要颜色是i 图片可以反映整体的统一性。

在营造氛围或情感时,可以灵活运用色调来达到目的。不同的色调可以表达“柔和”、“明亮”、“简单”、“稳定”和“华丽”的印象。在确定色调的使用之前,构思所使用的色调也是配色的基本理论之一。

1. 浅色调调和

这张照片想表达的是冬天的风景。冬天清澈干净的印象让我选择了浅色调和,同时用明度的变化来表达层次感。超实用!写给零基础新手的配色指南超实用!写给零基础新手的配色指南

△ 浅色调调和

2. 深色调调和

夜景采用低亮度、中高纯度的色彩调和而成。画面呈现出宁静祥和的气氛。超实用!写给零基础新手的配色指南超实用!写给零基础新手的配色指南

△ 深色调调和

3. 调和柔和(明亮)

虽然使用了多种颜色,但由于控制了颜色的波动,图片的颜色仍然在一个相对和谐的区域。超实用!写给零基础新手的配色指南超实用!写给零基础新手的配色指南

△ 明亮的色调和谐

四、“知道理论方法,关于实践”

在本章中,我将讲述一些我通常使用的配色方法和工具。我希望它能为读者的日常工作提供一些简单的帮助。

1. Adobe color CC

它的原名更有名,也就是Kuler ,不知道什么时候开始改名,但是功能变化不大。这是设计师分享配色方案的平台,已经保存了成千上万的预制配色方案。photoshop上有一个插件,可以直接调用上面的颜色方案,很方便的应用到你的设计稿中。

超实用!写给零基础新手的配色指南

2. ColorHexa

我经常用这个网站。当我只确定一个主色时,它可以帮助我扩展颜色,匹配几个方案,甚至色盲修正方案。如果你只能确定一个必须使用的颜色,选择这个工具可能会得到一些灵感。

超实用!写给零基础新手的配色指南

3. Color Scheme Designer

与Adobe相比,这是一种在线配色工具 color ,它有详细的颜色修改方法和简单的颜色演示工具。中国有一个旧版本的中文版本,但建议在官方网站上使用最新版本。

超实用!写给零基础新手的配色指南

4. 日本传统色彩有趣

该网站专门列出了250种日本传统颜色,并具有良好的过度动画效果。如果你对日本颜色感兴趣,你可能会在这里得到一些灵感。

超实用!写给零基础新手的配色指南

五、城市配色套路

知道了这么多道理,还是配不上颜色(捂脸)。如果你真的很难匹配颜色,无法得到你想到的颜色,那么也许是时候用巧妙的方法了。

1. 从照片中获取颜色

你总能看到一些非常漂亮的图片,当然,你的手机里可能有一些,那么为什么不在你的设计中吸收一些颜色呢?色彩收集是一个伟大的灵感来源,你可以通过自己的材料库或互联网渠道快速找到你想要的颜色,提高你的设计效率。

超实用!写给零基础新手的配色指南

2. 手动保存的颜色(渐变色)

如果你真的不能从色环中提取你想要的颜色,那么在日常阅读过程中收集优秀的配色方案,吸收和保存它也是一种非常聪明的方法。如果你能每天保存两个颜色方案,或者只有两个渐变颜色,一个月后,你可以导出一个“我最喜欢的渐变颜色选择”

3. 正确的色彩设计步骤

正确的设计步骤必须从一开始就选择正确的道路。为了避免“页面完成后总是感觉错误”的情况,我们需要提前为每一步的设计做好准备。

设计开始时的问题:

你想做什么样的内容?你想传达什么样的情感?颜色在这个内容中的作用和定位。你设计的对象是谁,或者你为谁设计?

这将在很大程度上帮助你选择一个合适的设计,颜色设计有时很难确定这是正确的颜色,或者你调整的颜色是最合适的,所以此时你在产品目标、用户组图、使用场景等进行筛选分析。以确定颜色的选择。

设计过程中的方法

我们通常将作品的颜色分为几个部分(这里是指移动终端或web终端页面设计,当然,插图实际上是适用的)进行颜色选择。背景颜色、主色调、辅助颜色、亮色(提醒颜色)在正确的地方使用正确的颜色,此时你必须有一个一般的颜色方案,所以注意不要犯一些常见的错误。例如,在正确和错误的选项中使用错误的颜色,就像在通道上使用红色背景标志一样。

结语:

事实上,我也很难匹配颜色。和大多数人一样,我在颜色上没有什么特长。写完这篇文章后,我更担心自己的配色能力。我希望你能在文章中得到一些收获。共同进步,赞美 商祺。

参考资料:

奥博斯科编辑部《配色设计原则[日]

设计细节:日本经典设计透析[日]日经设计

如果您的知识产权受到侵犯,请联系我。

欢迎关注网易UEDCCC 的公众号:

“超实用!为零基础新手写配色指南”

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================优设网==============.com“它是中国最受欢迎的网页设计师学习平台,专注于分享网页设计、无线终端设计和PS教程。设计师需要阅读的100本书:历史上最完整的设计师图书导航:http://hao.uisdc.com/book/.设计微博:拥有190万粉丝的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源,下载顶级设计材料。设计导航:推荐世界顶级设计网站,设计师必须导航:http://hao.uisdc.com