曲径通幽论坛

标题: 色相环以及配色表 [打印本页]

作者: beyes 时间: 2019-7-22 18:11
标题: 色相环以及配色表
CMYK色值参考

印刷肤色参考、常用印刷色值

非洲人肤色：C35 M45 Y50 K30 以上

亚洲人肤色：C15 M43 Y53 K0

白种人肤色：C15-18 M45 Y30 K0

天空的颜色：天蓝：C60 M23 Y0 K0 偏暖：C60 M45 Y0 K0 偏冷：C60 M15 Y0 K0

深紫色：C100 M68 Y10 K45

深紫红：C85 M95 Y10 K0

海水蓝：C60 M20-28

柠檬黄：C5 M18 Y75

桔红：C5 M100 Y100 K5

橙色：C5 M50 Y100 K0

粉红色：C5 M40 Y5 K0

假金色（四色模拟而非专色）：C5 M15 Y65 K0

假银色（四色模拟而非专色）：C20 M15 Y14 K0

掌握了这些基本规律，再调图时就能把握主次了，知道改减什么色，加深什么色了。

人物肤色的调图规律：M、Y的量差不多，C是M的1/3至1/5

人脸数值规律：C8 M36 Y35 头发数值：C71 M82 Y73 K22

苹果：C7 M99 Y71

香蕉：C4 M54 Y93

橙子：M55 Y78

三原色（原色）：在美术上，将红、黄、蓝称为颜料的三原色

二次色（间色）：通过两种不同比例原色进行混合所得到的颜色为二次色，二次色又叫做间色。

三次色（复色）：用任何两个间色或三个原色相混合而产生出来的颜色为三次色（复色），包括了除原色和间色以外的所有颜色。

色相环

CMYK 与 RGB 配色表

在色相环的组成中，相隔 180 度的色彩我们称之为互补色。

由于互补色有强烈的分离性，所以使用互补色的配色设计，可以有效加强整体配色的对比度、拉开距离感，而且能表现出特殊的视觉对比与平衡效果，使用得好能让作品令人感觉活泼、充满生命力的感受。

互补色，比例决定了一切！

由于互补色彩之间的对比相当强烈，因此想要适当地运用互补色，必须特别慎重考虑色彩彼此间的比例问题。因此当使用互补色配色时，必须利用大面积的一种颜色与另一个面积较小的互补色来达到平衡。如果两种色彩所佔的比例相同，那麽对比会显得过于强烈。比如说红与绿如果再画面上佔有同样面积的时候，就容易让人头晕目眩。可以选择其中之一的颜色为大面积，构成主调色，而另一颜色为小面积作为对比色。经验上会以 3：7 甚至 2：8 的比例分配原则。

日本设计师まりっぺ曾经针对色彩的配色提出比例原则 75％、25％与 5％的配色比例方式，其中的底色为大面积使用的底色，而主色与强调色则是可以利用互补色的特性，来讲主色以及强调色皆衬托出来。

而如果使用三色配色的方式不敷使用，まりっぺ也认为必须从现有的色彩分配中做切割的动作，以避免影响整体配色比例（更多详细内容请见作者网站 )

世界上有无限多种色彩、色彩的配色方法亦有无限多种。这边所使用的只是众多配色技巧的其中一种，有兴趣的朋友不彷日常生活中多注意一些设计作品的色彩配色、抑或是参考 Colourlovers、Kuler 、Colour code等色彩相关网站，说不定能发现更多不同的色彩配色方法。

色彩搭配原理与技巧第一刀：色不过三

经常很多大神在网上说配色不要超过三种色，在这我只说三遍，色不过三，色不过三，色不过三！不管是做平面也好，还是网页，还是做APP等设计，都需要遵守这个基本道理。
那啥才算是不超过三种颜色的搭配呢？
在这里很多人都会认为就是不要超过三种不同的颜色值。其实不然，不超过三种颜色的搭配，是指不超过三种色相的搭配。在单个色相中可以运用颜色明度或饱和度做色彩的丰富性，而色相不要过三！

如果设计的界面的颜色太多，炫酷的眼花缭乱是个什么样的效果？下面我们来看看一家知名的招聘网站。我想你和我一样顿时泪流满面了~
是的，我们单纯的就想找份合适的工作，过上幸福美好的生活。并没有那么简单，一进入主页面，刹那间，狗皮膏药铺面而来。这种感觉，我的小心脏顿时崩溃了……就一小小块面积，一个城市地址就出现了三种颜色。难道这样真的好吗？

我们来做一个对比。有一种设计，叫别人家的设计。绿色永远是品牌色，红色就是网站的装点色，这就叫传承。
统一的主色彩风格的导向，能加强用户对产品的记忆程度，也使产品的体验感更加舒适和自然。

那是不是越简洁的颜色就最好？

那咱就只用一种颜色得了。下图中单一颜色和多种色相颜色配色下的对比，我们可以看到在单一颜色下的设计更为统一，画面更为和谐。在多种颜色下界面中的功能模块更为明确，区分性更强，所以说在使用多种颜色的时候还需要考虑产品的内容与核心。

三色搭配，只要控制在不超过三种色相的范围即可。学过画画的商业设计师，应该都清楚知道颜色的明度、暗度、饱和度。

运用单色的设计，会显得单调乏味。而整体颜色饱和度过低会导致画面沉闷而不透气。明快的颜色和明暗的色彩搭配能使画面显得层次感丰富而又有朝气。

做精致的颜色，提炼逼格。

在界面设计中，色彩是设计中的重中之重，是否正确和完整的表现出产品气质至关重要。单一的色相，丰富的明度和饱和度能使界面看的有层次感和丰富性。而精简的色，处理起来也会跟容易统一和把控。在用色时，颜色越少越好，但要保证正确的传达出需要表现的功能和元素为前提。在我们每添加一种颜色的时候都需要好好的考虑一下，有没有必要。因为再复杂的设计，也不会多个三种主色彩。

以下界面为了区分更多的内容区域运用了三种颜色，但因为颜色过度导致页面分割凌乱，红色在页面中就是多余的，功能分割相对也是多余的。可以用两种颜色时候，就不要用到三种颜色。可以用一种颜色的时候就不要用三种颜色。简洁，会使作品更为成熟。

主色的魅力：主色决定设计的风格

在设计中色彩充当了重要的情感元素，那主色就是作品的文化方向。我们在设计初期需要对项目有明确的了解后提炼选择出最为贴切的主色进行定位。

每种颜色承载的文化都是不同的，会领导了整个界面设计的方向。

网页设计、移动界面设计、banner设计、平面设计……不同的媒介，主色的运用规律各不相同。网页设计和界面设计，通常主色运用在结构和装饰。而Banner和海报为了更为醒目，主色通常运用在背景颜色上。

在界面设计中常将品牌LOGO的颜色定为主色彩，并且在不同的界面中主色彩出现的面积也会随之变化。

下图我们可以看到大众点评、百度外卖、美团应用都将产品LOGO的颜色进行了延续，将logo颜色定义为主色彩，有效的统一了产品的传播性。

同时还发现，这几个产品的界面设计主色面积使用也是非常一致。首页中使用的主色彩面积较大，导航条全部填充了主色。在二级页面中则使用的面积较少，将主色点缀到界面中。
我们可以这样去理解，在用户使用产品时，更希望用户记忆产品。而在用户进入了信息页面时则更注重易用性，希望用户能找到自己需要的东西。所以主色在首页使用的面积较多，而二级页面使用在关键的操作点上。从产品角度出发，我们在使用主色的时候要考虑页面的内容关系，理解界面的层次与功能性质。从视觉出发，选择了饱和度较高的色彩做为主色时，要考虑因为颜色面积过多而造成的视觉疲劳。

在banner和海报的设计中主色的面积一般会运用在背景色中，相对面积较大。可谓是直奔主题式。

色彩搭配原理与技巧第三刀：从对比色中找辅助色

通常大家觉得只要色彩面积最多就是主色。其实不然，人们的阅读心理是有差异的，如果颜色饱和度较低容易被相对面积少的高饱和度颜色抢眼，所以在定义界面主色的时候要悬着饱和度（纯度）高的颜色作为主色会比较的稳定。

在界面设计汇总使用互补色彩的对比是最为强烈的。这种色彩能使用户的视觉产生强烈的刺激，情感浓烈，给人留下鲜明的印象。这种方式是最易于传播的。适合在夸张的、张扬的场景下使用。但这种颜色用的太过于平凡容易造成用户的视觉疲劳。给人一种不安定的感觉。那么在使用这样的搭配方式时需要控制使用的位置和信息的面积了，核心的地方可以这样去使用。

主要的三对互补色：红绿、蓝橙、黄紫

色彩中还会运用到冷暖对比：冷暖对比色是自然平衡的规律，可以在设计中大量使用，这样的配色会使作品非常的出彩，不显单调。

我们先看看一下几款APP的icon设计：

上面这款APP的名称叫KOI，很喜欢这款应用配色，运用到了冷暖配色，起了非常好的点缀效果，看起来灵动而醒目。

Tweetbot的icon也用到了冷暖颜色的对比，是不是醒目又可爱啊，大家可以去试试这种搭配，百试百灵。

Seedling Comic Studio,这款icon运用到了冷暖搭配显得由为的精彩，视线里面集中到了中心点上。

在设计中，冷色与暖色的对比是界面设计中最为广泛的使用方法，效果也非常的出众。

色彩好比就是阴阳太极，冷与暖的两级平衡还原了生活中的和谐。用这样的配色效果让用户感觉舒服平和。

冷暖色彩搭配的方法基本没有啥缺点，使用在设计中，技巧性比较多，对设计的细腻感受要求比较高。

虽然支付宝的主图标发生了改变，变成了简洁的蓝色支付宝，但主页面中还是利用到了冷色与暖色的搭配，很好的区分了分类，并且让页面中丰富的分类变得不是那么得零散。很多设计师每次碰到满版分类图标的时候很头大，处理的时候容易把页面搞花了，建议使用冷暖的方式去调整，将页面平衡好。

当时米醋哥在设计360防丢器的时候就用了两个色，红色和蓝色的冷暖搭配。将360字体样式融入到建筑中取用了暖红色，而寻找位置的大头针运用了冷蓝色。

好了，先写到这里。回顾一下今天我们讲的知识点。
　　1.色不过三
　　2.主色的定义，及面积
　　3.找辅助色，还记的有那几对辅助色吗？
　　今天和大家分享的这不仅是运用在界面中，更是选择颜色时至为重要的三个点！实用性极高！看似简单，大家运用起来还要多加分析哦~

作者: beyes 时间: 2019-7-24 00:10

无彩色和有彩色搭配在一起，可以使图像中的重点更加突出，对比更加强烈。

根据自己的用色经验，简单总结了以下几点：

◆ 重视视感受（舒服、和谐；不突兀、不刺眼、不山寨）；

◆ 商务PPT应符合公司形象及文化的用色要求；

◆用色要有一定逻辑性（如，不同内容可用不同的颜色，相同性质的内容用相同的颜色表示）；

◆符合颜色的象征意义（绿色健康、红色喜庆、蓝色科技等）；

◆单色喜闻乐见（天的蓝、草的绿、暖的橙等），多色尽量模仿（如网站、海报等）；

◆色彩不超过三种（黑白灰除外，图表色可稍稍灵活），整体风格一致。

色彩和谐的方法：

1、近似色

2、同色系

3、对比色

4、互补色

1、近似色搭配

◆ 从12色色环中两个比较接近的颜色相配。

◆ 如蓝色-绿色、橙色-红色、蓝色-紫色。

思考：生活中适合用近似色搭配的事物有哪些？

2、对比色

◆ 指两个相隔较远的颜色相配，一般为120度-240度。

◆ 如：黄色与蓝色，这种配色比较强烈。

思考：生活中适合用对比色搭配的事物有哪些？

3、互补色

◆ 从12色色环中任何颜色所直接对立的颜色，如紫色与黄绿色、红色与蓝色、黄色与蓝紫色。

思考：生活中适合用互补色搭配的事物有哪些？

4、同色系

◆ 属于相同色系的不同明度的颜色。

◆ 在某一纯色中逐渐加入白色，色彩会越来越亮；而逐渐加入黑色，色彩会越来越暗，这些色彩都是属于同一色系。

以宣传手册用色为例子：

整体风格色指：封面、封底、母版标题栏（整体或点缀）、内标题、强调色、图表色等，主要方案有：

A、整体单色：一种颜色贯穿始终，图表色可以略丰富些，但尽量使用HSL模式调整为同色搭配。

B、逻辑单色：即不同章节不同色。

C、组合色：主色＋副色，可以是对比色搭配，也可以是接近色或近似色搭配。

白色：是默认的背景色，简约、便于颜色搭配。

灰色：对真实颜色的干扰最小，不刺眼，专业感！

深色：很酷，但颜色较难搭配，挑战性高。

-------------

技巧：主色调为暖色的作品，可以配暖灰的背景

灰色＋风格色：灰色一般是长条，一般要辅以风格色（或是风格色的细微同色变化，上同）的色块和点缀。

纯风格色：当风格色是双色搭配时，标题栏也可以是双色搭配

深色（黑或接近黑色）＋风格色：深色的标题栏使得页面更庄重，一般也要辅以风格色的色块或点缀。

关于文字颜色设置的基本要求是：不要太黑、太亮、太刺目，也不要太淡，要柔和、看得清楚。

用字颜色：

强调色指的是用色中所有强调内容的颜色设置，通常的做法是：

A、正向观点：字体加粗并设置为风格色。

B、并列内容或相似观点：字体加粗并设置为类似色、接近色。

C、反向观点：字体加粗并设置为补色、对比色。

D、提醒、警示、引发思考或负面观点/案例：字体加粗（或放大）并设置为红色。

A、当背景为白色或浅灰色时：字体为灰色，根据背景的深浅调整字体的深浅，以确保看的清楚。

B、当背景为深色时：字体为白色或者浅灰色。

上面是较好的灰底单色系列，分别有三种选择方案

上图也是灰底单色的经典搭配，只是其标题栏是灰尘色的长条并辅以风格色。以上案例对应的作品分别是：

逻辑双色搭配和主辅双色搭配可以统称为双色搭配。以上为几种双色搭配，可以参考。

以上两个作品（12-人际关系宝典、35-员工关系管理）逻辑四色搭配，均是我非常喜欢的色彩，可以参考。

法则一：色彩的黄金法则 60：30：10

这是一个很基本的法则。设计师都知道60：30：10，主色彩是60%的比例，次要色彩是30%的比例，辅助色彩是10%的比例。比如一个男士的上装，打一个比方，外套可以用60%，那么衬衫是30%，领带就是10%。如果室内空间的话，墙壁用60%的比例，家居床品、创联之内就是30%。那么10%就是小的饰品和艺术品，这个法则是黄金法则，在任何时间任何地方都是非常正确的。

这个法则在后面讲到的很多法则都可用到，世界最好的设计基本上都脱不了这个法则，这是很简单的道理，但我们往往都会忽略它。有一双会发现色彩的眼睛很重要。我们经常去旅游，也拍了很多照片，更多人会热衷于对美景的赞叹和对当地的风土人情的介绍，但是很少人对色彩有分析。其实60：30：10多少也是得到了自然界的启发。我想在我们整个自然生涯中，旅行就是很好的色彩课。

法则二：选择配色方案
选择配色方案，也就是说，我们一般两种选择，一种是补色的搭配，一个是叫类色搭配，学过美术都知道，色盘上面，两个颜色相对的就是补色的搭配，类似的颜色就是类色搭配。我们一般在需要营造那种活泼的有动感的空间的时候，选择红与绿、蓝与绿。那么类似色是相近的，比如黄与绿、蓝与紫。

法则三：勿忘黑色
现在我们看到很多所谓现代简约风格都会利用黑色，但是要灵巧运用黑色，而不是用太多的黑色。黑色能够让任何一个色彩看起来干净，但它本身并不是一个重点，它能够给家庭营造一种对比平衡。巧妙的运用黑色，可以是一个黑色的箱子，画框，做一种点缀，效果是十分不错的。

法则四：听从自然的教导只要是在地球上，你看到地球是什么颜色，是大地土壤，中间是群山。它是介于深和浅之间。我也看到很多人的很多作品，如果没有遵循这个法律，非常会不舒服。像这个图片眼睛往下看的，应该是以黑色为主，顶棚尽量是白色。这样人类会感觉很舒适很踏实，这是给我们最好的提示。

法则五：从图案中提取色彩
我们在做家庭室内设计的时候，最好是在家里面寻找一个比较突出的饰品，哪怕是一个配饰。突出的饰品要有色彩，黑色或者白色。其他的色彩最好是围绕从主要的空间寻找来色彩展开，比如说选择的花卉都是带有酒红色的色调，这个空间就显得比较协调。

法则六：流动色彩
其实这个大家都知道，一个色彩，一套房子里面，这么多房间你让一个色彩在每个空间不断的重复，当然是重复在不同的物

作者: beyes 时间: 2019-7-24 01:01

说明：设计师有三张照片，但如果在版面上都用上这些照片，那你还要对这三张照片进行剪切，然后将它们挤进版面里。但出来的效果却是，这三张照片在版面中的样式很相似(相似的图片元素及图案)，文字阅读起来很费力。所以，设计师又不得不将字体变得很粗，字体变粗后，又要找个地方放置学校的名字，所以在最下方设计师又加上一个紫色区域来突出学校名称。
　　设计师越"设计"，封面就越虚弱。无论是学校信息还是所要传达的文字信息都在这些复杂的、太多人工痕迹的元素中消失得一干二净。封面可以说是成为"被侮辱及被损害"的对象。为什么会这样?因为设计师做过头了!解决办法：只让一张图片来说话!

上面的设计却使这种联系断裂，也使到这张说明卡片的元素呈一个平放的" L "型，在上图中，图片放在一边，而文字说明则放在另一边。结果就是，产品显得很单薄，而页面中间那么重要的空间却空无一物。读者为了看明白这张卡片，不得不来来回回仔细对照。

在修改后的版面中，产品显得靠前，而且居中。我们将产品尽可能拉大，然后将各个要说明的部位用引线在其周围说明。非衬线字体容易辩认阅读。文字对比不强烈，整个版面显得干净清爽。并不需要象原图一样采用数字来说明。

这个设计让人看起来并不象是一家酒店，反倒象是一个电子邮件的宣传版面，所有东西都是相同的，缺乏变化，而图表的细线看起来就象是用铅笔画出来一样，没有层次，没有视觉焦点。宣传的对象倒是美轮美奂(见下图)，但问题是，如果这张价格牌本身不能吸引别人阅读从而使顾客走进这家酒店，里面再漂亮，也没有人知道!这张平淡的单张使所有的信息都变得暗淡。
　　通过颜色来创造层次：深中浅三色是用吸管在这张宴会厅的图片上取色的，我们用这三种颜色安排版面，轻易创造出层次感。深色用在图表的上方，而另外两种用来区分每一行。由于这三种颜色来自于酒店图片，使到颜色直接与酒店产生了联系。

人物采用轮廓形图片，没有背景，使到其不规则的边缘显得更有活力。对一张大图片来说，采用这种轮廓形的设计，可以加强图片的力量，使图片充满流动感。模糊的边缘传达了一种开阔及健康的气息。留意，两张图片在实际应用中都有一个直角形的部分，即图片直接去到出血位区域。而文字无论是左对齐还是右对齐，都与这种直角区域相似。
　　留意设计中的标题，采用了一种非常幼细的字体，这种字体充满清新，一如版面的风格。两者配合，天生一对。

读者特利发给我们一张他设计的洗车券，这张洗车券是他希望为他儿子的游泳队筹集在游泳池训练的各种费用而举行的一次洗车筹款，而它的有趣之处就在于其尺寸相当抢眼：

没有人会对它视而不见：这张洗车券是一般门票尺寸的两倍之大，设计起来也很容易，从视觉上也非常能吸引有兴趣的消费者。大图片及大标题使这张洗车券产生一张海报的视觉效果，效果当然不错。

二、名片：单纯由文字构成的名片一样可以设计得好看

无论是什么样式，花些心思设计的名片总会比简单将文字放上去的名片要传达出更多的东西，我们如何将一张单纯由文字构成的名片设计得更漂亮？

修改前的名片并没有经过“设计”，只是堆彻。就象你在屋里摆放家具一样，只是将家具随意摆到角落里，没有精心的“布置”。这张名片，全部信息都一目了然，但这些信息并不吸引人，米色的背景也显得很普通，就象在人群中的一个普通人，没有人会注意你。

而上图，同样的信息，却是经过设计的。自信的名字及职务在白色的卡片上左对齐，突出了Glorietta本人，而不是那个了无生气的企业名称，并且该老兄是一名科技作家，有意识的排版突出了“写作”这一抽象意义。较大的文字自动传达有效的信息沟通。通过对比（大/小，衬线体，非衬线体）形成有组织、有目的的构成，传达出一种简朴的风格，但并不乏味。如果还想更引人注目，可以象下面一样更换一下颜色区域：

三、烹饪配方卡片：用视觉来传达营养

你如何设计一张与烹饪配方相关的宣传卡片？不要将那些用料简单地用文字列出，显示它们！这个方式适用于任何指引性的设计项目。

修改前：简单地将各种用料用文字罗列出，显得简单，但也显得普通，如果我们用具体的图片来表示出其用料，看看效果如何？

修改后的版式充满色彩及味道！关键是它还显得独特。虽然你也知道芫荽是什么东西，但用图片表示出来后，通过视觉辅助，我们对这道菜式会比单纯看文字有更多的味觉想象。留意我们的各种配料都是在白色背景上干净地呈现出来，每一种都加上一些阴影，进一步加强了视觉的真实性。看了修改后的卡片，你是不是已经食指大动？

我们很喜欢DELO小岛烧烤店的菜单，因为在我们的眼中它显得很酷，它只是由黑白线条（没有灰度）构成，这些线条构成了餐厅的标志及名称。既经典又实惠的设计！

五、照片排版：团队精神

你有一个团队，但却没有一张合影照，那如何在设计中显示团队精神？我们将个人照片并列，但选择一个人作为其中的领头人物，这种设计既灵活又给人印象深刻。

合影照片当然很适合表现团队精神，但它又会限制表现每个人的个性。更加灵活的选择是将每个人的单独照片合起来形成一个令人印象深刻的排版。如果照相时的背景你可以选择，尽可能让每个人的背景及灯光接近，照的时间不要仅照头部，最好拍到整个上身，照片清晰度要高。

最后，这个学生会成员的设计就变成上图这样，其中学生会主席的形象显得更加重要且成为一个焦点。该设计主要通过三个步骤即可完成：

第一步是将照片剪切得基本一致，头部尺寸及眼睛水平线都应该尽可能一样（当然，由于各人姿态不一样，允许有一些差异）。

一旦定下各人的尺寸后，最重要的第一个人物不要剪切，但去掉其身后的背景。

富冲击力的排版使这张学生会成员介绍的设计显得非常突出，它比普通的那种傻乎乎的团队照效果更好，因为设计师可以灵活安排其中每个人的照片，使到整体既具有一种团队的氛围，但同时又能显示出每个人的特性。使这些学生与观看的人在情感上距离更近。这样的排版另外的好处就是能够让你在版面空间的安排上更灵活，并且有更多的空间给你的放置标题及文字。

欢迎光临曲径通幽论坛 (http://www.groad.net/bbs/)