原文出处:bamagazine

译者的话:作为一名设计师,如果你还在说出“这种颜色好看,那种颜色不好看”的话时,这说明你对颜色还没有正确了解。在我们的很多文章中,都可以看到色轮的踪影,它是我们选择颜色的一个强有力的武器。在本文,我们将阐述这个色轮的基本原理,使你对颜色关系有一个更清晰的认识。

一半是科学,一半是艺术,色轮是我们认识颜色关系的工具。

那里有光,那里就有颜色。有时我们会认为颜色是独立的——这是蓝色,那是红色,但事实上,颜色不可能单独存在,它总是与另外的颜色产生联系,就象音乐的音 符,没有某一种颜色是所谓的“好”或“坏”。只有当与其它颜色搭配作为一个整体时,我们才能说,是协调或者不协调。色轮告诉我们颜色之间的相互的关系。我 们在本文中将阐述这一点。

将无穷的颜色简化:

白色光包含了所有的可见颜色,我们看到是由紫到红之间的无穷光谱组成的可见光区域,就象你所看到的彩虹颜色。为了在使用颜色时更加实用,人们对它进行了简 化,将它们分为 12 种基本的色相。 12 种颜色——记起来了吗,和你小时候第一次买彩色蜡笔时,盒子里装了那12只蜡笔差不多。

色轮由 12 种基本的颜色组成。首先包含的是三原色( Primary colors ),即蓝、黄、红。原色混合产生了二次色( Secondary colors ),用二次色混合,产生了三次色( tertiary colors )。

原色是色轮中所有颜色的“父母”。在色轮中,只有这三种颜色不是 由其它颜色调合而成。上图可以看出,三原色在色环中的位置是平均分布的。

二次色所处的位置是位于两种三原色一半的地方(见上图)。每一种二次色都是由离它最近的两种原色等量调合而成的颜色。

三次色是由相邻的两种二次色调合而成。

共同的颜色:

你可能会发现,每一种颜色都拥有部分相邻的颜色,如此循环成一个色环。共同的颜色是颜色关系的基本要点,必须对此有深入的了解。

在上图这七种颜色中,都共同拥有蓝色。越远的颜色(如草绿色)含有的蓝色就越少。绿色及紫色这两种二次色都含有蓝色。

在上图七种颜色中,都拥有×××。同样的,离得越远的颜色,拥有的×××就越少。绿色及橙色这两种二次色都含有×××。

在上图七种颜色中,都拥有红色。向两边散开时,红色就含得越少。橙色及紫色这两种二次色都含有红色。

颜色有明暗之分——或者称为颜色数值。为了显示颜色的明暗,所以色轮有多个环。两个外围的大环是暗色( Shadow colors ),里面两个小环是明色 (tint colors) 。

色轮有五个同心环组成,从暗到亮——暗色处于大环,明色处于小环,而中间是颜色的基本色相。

从上图我们可以看出,处于右边的暗色就是加上黑色,而左边的明色则是加上白色。五个圆环已经清楚表示了颜色如何由暗到亮的过程。但这种明色及暗色的关系只是相对而言。

透视色轮(超赞的设计色彩研究)

颜色关系

下面我们列出六种基本的颜色关系。每一种颜色关系都可以有无数种搭配的可能,当你掌握它们时,你对颜色的视野才会显得开阔。

单色搭配(Monochromatic):

一种色相由暗、中、明三种色调组成。这就是单色。单色搭配上并没有形成颜色的层次,但形成了明暗的层次。这种搭配在设计中应用时,出来的效果永远不错,其重要性也可见一斑。

类比色搭配( Analogous ):

相邻的颜色我们称为类比色。类比色都拥有共同的颜色(在上图中,是×××及红色)。这种颜色搭配产生了一种令人悦目、低对比度的和谐美感。类比色非常丰富,在设计时应用这种搭配同样让你轻易产生不错的视觉效果。

补色搭配( Complement ):

在色轮上直线相对的两种颜色称为补色,在上图中,是橙色及蓝色。补色形成强列的对比效果,传达出活力、能量、兴奋等意义。补色要达到最佳的效果,最好是其中一种面积比较小,另一种比较大。比如在一个蓝色的区域里搭配橙色的小圆点。

分裂补色( Split complement ):

如果我们同时用补色及类比色的方法来确定的颜色关系,就称为分裂补色。这种颜色搭配既具有类比色的低对比度的美感,又具有补色的力量感。形成了一种既和谐又有重点的颜色关系。如在上面三种颜色中,红色就显得更加突出。

原色搭配( Primary ):

除了在一些儿童的产品中,三原色同时使用是比较少见的。但是,无论是在中国还是在美国的文化中,红黄搭配都是非常受欢迎。红黄搭配应用的范围很广——从快 餐店到加油站,我们都可以看见这两种颜色同时在一起。蓝红搭配也很常见,但只有当两者的区域是分离时,才会显得吸引人,如果是紧邻在一起,则会产生冲突 感。

二次色搭配 (Secondary) :

二次色之间都拥有一种共同的颜色——其中两种共同拥有蓝色,两种共同拥有×××,两种共同拥有红色——所以它们轻易能够形成协调的搭配。如果三种二次色同时使用,则显得很舒适、吸引,并具有丰富的色调。它们同时具有的颜色深度及广度,这一点在其它颜色关系上很难找到。

看了这么多理论,还是考一下自己吧:

下面这四个封面中,都各自运用了我们在上面所述的其中一种颜色搭配。你能说出它们是运用了哪一种颜色搭配吗?(提示:眼睛只集中在一些大区域的颜色,不要理会细微的颜色区域。也不用理会黑白两种颜色)

(答案见本页底部)

本文所用颜色数值:

答案:

当我们用色轮对其分析后,就很容易得到答案:
A:单色搭配;B:补色搭配;C:三原色搭配;D:类比色搭配

标准矢量色轮下载附件: logoskyColorWheel.rar (470.03 KB, 下载次数: 6164)

小结:此帖教程详细地用色轮表现的方式讲解了色彩搭配原理及色彩搭配忌讳的细节,对比与统一这个核心思想永远 贯穿于设计之中,色彩搭配也是如此,不管是哪种色彩搭配类型,都有对比的因素包含在里面,如果没有对比,画面就会显得没有活力,然而对比太强就会显得格外 刺眼不符合人的视觉特性! 这个大家可以一起继续研究,希望大家共同交流!

转载于:https://blog.51cto.com/kerrce/1008964

透视色轮(超赞的设计色彩研究)相关推荐

  1. 《超越平凡的平面设计: 版式设计原理与应用》—色轮

    本节书摘来自异步社区<超越平凡的平面设计: 版式设计原理与应用>一书中的色轮,作者[美]John McWade,更多章节内容可以访问云栖社区"异步社区"公众号查看. 色 ...

  2. 分享29个超赞的响应式Web设计

    原文自:http://www.csdn.net/article/2013-01-16/2813678-responsive-design-websites 最近几年,响应式Web设计不断印入人们眼帘, ...

  3. 超赞!IOS7应用界面设计深度剖析

    超赞!IOS7应用界面设计深度剖析 我们逐渐的适应了iOS7的设计语言和美学.适应之后,便是进一步的发展,作为设计师,创新是我们心中永不熄灭的火种.如何让iOS7的界面设计"更上一层楼&qu ...

  4. 超赞的动漫主题大学生网页html作业带报告 JS轮播图表单视频下拉菜单栏

    动漫主题网页设计,制作精良.完成度较高,运用有js轮播图.下拉菜单栏.鼠标滑过效果.js正则表达式等,子页面运用图文混排不重复排版,另有制作报告1500字,描述了制作过程.方法.总结等.预览视频如下: ...

  5. 死磕算法!35 篇算法设计实例+6 本超赞好书打包送你

    算法为什么难学? 算法在程序中扮演着非常重要的角色,有人将数据结构比喻为程序的骨架,将算法比喻为程序的灵魂,这一点也不为过,正是因为这一点,很多朋友都立志要学好算法,但是我常常看到各种抱怨,比如&qu ...

  6. 【有利可图网】PS实战系列:PS设计制作一个超赞的漂亮艺术花纹人像海报

    本篇教你如何巧用PS设计制作一个超赞的漂亮艺术花纹人像海报!教程清晰明了,制作过程灰常巧妙,许多曲线也是用花朵液化得到效果,这样既能省去画线条繁琐过程,也可让作品变得极具艺术感!

  7. 50款拥有超赞用户体验的精美移动UI设计

    ------------------------------------------------------------------------ 小笑话大道理,笑话小说,小白兔的笑话,小学生笑话大全, ...

  8. android 屏幕坐标色彩,android – 将RGB值转换为色轮坐标

    我正在尝试在我的iOS应用程序using CIFilter中实现颜色选择器,并且必须解决同样的问题. 我发现给定颜色的HSV值非常适合该色轮: >色调是车轮周围的角度. 0或1是0或2pi弧度, ...

  9. 前端常用的超赞的配色网站

    1.中国风配色 zhongguose.com 超美的中国风配色,网站号称收集了最全的中国色,还有中英文互译,非常贴心,五星好评. 2.uiGradients uigradients.com 做渐变配色 ...

最新文章

  1. 新浪微博推广网站的一些实践体会
  2. HTML的标签描述17
  3. httpclient 调取接口_使用HttpClient调用接口的实例讲解
  4. 《剑指offer》— JavaScript(6)旋转数组的最小数字
  5. c++万能头文件_初学Python,与C对比
  6. 分布式Tensorflow入门Demo
  7. HDU1555 How many days?【水题+模拟】
  8. Cannot change version of project facet Dynamic Web Module to 2.5解决方案
  9. ACR122U-A9|ACR1251|ACM1252系列NFC读写器读卡器PCSC Tool测试工具使用步骤说明
  10. AWicons Pro 把图片资源变成cur光标资源
  11. SECURITY:补丁
  12. word排版的时候如何将论文表格逆时针旋转90度竖放
  13. 中国诗词大会第四季第一场
  14. linux下如何用gcc编译器生成lst文件?
  15. java内存模型作用是什么意思_JMM(Java内存模型)是什么?为什么使用并发?
  16. eclipse如何汉化
  17. varchar和varchar2有什么区别?
  18. 剖析大众心理定势是品牌公关的前提
  19. python怎么分析数据差异的方法_如何比较两组数据之间的差异性
  20. 一些好用的APP分享

热门文章

  1. 哔哩哔哩9.13测开
  2. 实战打靶集锦-012-sar2HTML
  3. 实弹打靶过程中有哪些注意事项
  4. ps 中的路径和模拟压力
  5. 原装进口劳易测测距仪AMS3007I 40
  6. 最新 android 机型,哪些手机可以升级安卓11
  7. 【linux性能优化】CPU使用率过高分析
  8. 快速分辨订单号生成工具
  9. oracle 排序值相等排名相等,Oracle-分析函数之排序值rank()和dense_rank()
  10. gmapping建图注意事项