小莫

浅析色彩原理

小莫 色彩搭配 2621浏览

伟大的印象派大师梵高说过:「颜色之于画作亦如热情之于生命。」,可见颜色对于艺术作品的重要性。

CB4CEB49-43C9-46F9-A1B7-A8D933208281

根据有关的实验证明:人在看待一个事物的前 20 秒,色彩的成分占 80%,2 分钟后,色彩占 60% ,形体占 40% ;5 分钟后,色彩、形体各占 50%。该实验表明颜色在很大程度上影响了我们对事物的认知和记忆,当你在看一幅画、一张照片,一件衣服、一件家具……事后回忆起来的时候,其实你很大程度记不起画布上画了几个人,照片上的鸟在哪个位置,衣服上的纽扣是什么材质的,家具的价格是多少,但往往你可能还是会记得其大致的颜色。各种颜色还会让人们产生特定的心境,或者说情绪,所以也会看到「某某监狱通过改变墙体的颜色让监狱里的斗殴率大幅下降」的新闻。也诞生了「色彩心理学」这样研究颜色的专业学科。

 2F7DEC05-0D03-49FA-955A-C0BC472AA650

颜色是如何形成并被我们感知的?

不同波长的可见光对应着不同的色彩,当光线反射到眼睛里就形成了不同的色彩:

0 (6)

上图为三棱镜所折射出的不用波长的可见光

1. 颜色是由于某些特定波长的可见光射入视网膜造成的,视网膜边缘的杆状细胞可以区分光亮和黑暗,而中央的锥状细胞还能分别感受各种颜色的波长。(照相机里的传感器就是仿造这样的原理制成)

2. 我们能看见光波须满足以下条件:

  • a.物体本身是光源
  • b.物体能反射光

所以说:有光的地方就有色彩

 

色彩模型

色环其实就是把折射的光扭成了一个环,每个角度代表了不同的颜色值。

0 (2)

如果把它继续扩展就上饱和度(Saturation)和明度(Brightness)的维度,就变成了:

0 (1)

如果把他转化为三维,就引入了孟塞尔颜色系统(Munsell Color System)。

0

圆环为色相(Hue),纵轴为饱和度(Saturation),横轴为明度(Brightness)

 

何为色相(Hue),饱和度(Saturation),明度(Brightness)?

色彩三要素(Elements of color)由饱和度(Saturation),明度(Brightness),色相(Hue)来组成,用来描述色彩,来区分不同色彩的不用特性。

  • 色相(Hue):色的不同是由光的波长的长短差别所决定的,色相指的是这些不同波长的色的情况。
  • 饱和度(Saturation):用数值表示色的鲜艳或鲜明的程度。
  • 明度(Brightness):表示色所具有的亮度和暗度被称为明度。

就拿我们最熟悉的 Photoshop 来举例,小小的调色板其实已经包含了整个色彩体系。(HSV 色彩模型)

0 (5)

 

色彩的计算机代码式表述

#212321 #823271 是我们设计师在给前端颜色时最常用的形式,为什么是这样子的形式呢,所谓事物存在必有其他所在的意义,我们在日常给颜色命名的时候,通常会说「火红」、「海军蓝」、「晚霞般的红」,极具个人情感的描述,而计算机或者别人怎么知道颜色确切的名字和精确的描述呢?计算机先辈们创造了一套系统(RGB 模式)才解决。计算机在命名一个颜色时,采用了所谓的十六进制代码来表示 24 位色彩。可以产生 16,777,216 种不同的颜色,已经能满足日常的使用了。如果设计师了解了十六进制色彩的工作原理,那你就对计算机如何产生色彩有了最基础的理解,成为你工作中工具。

显示器的原理是,通过R(红)G(绿)B(蓝)三种光来点亮每个像素点,不同比例的三种光呈现了不同的颜色,如#324322:前面的#表示十六进制数,其余的 6 个字符被 0-9 和 a-f 分成三部分,每部分控制一个原色。数值越高,原色就越亮,由此来混合出想要显示的色彩。

0 (4)

结语

色彩的感知是一种很感性的行为,人与人会有一些偏好,对每个颜色的敏感度也会有所不同,例如:有些人喜欢黑色,有些人则不,有些人觉得向日葵的颜色很璀璨,有些人却觉得这黄色过了。前人所做的只是把色彩理论化,变成一套可以分析,可以量化的理论知识。特别是关于计算机代码式表述色彩,对于一位 UI 设计师的工作息息相关,合理的运用,可以提升工作效率。

原文地址:37点2度体验

作者: 杜宾

转载请注明:学UI网 » 浅析色彩原理

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.xueui.cn ”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.xueui.cn” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.xueui.cn” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.xueui.cn” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

【学UI网 原创文章 投稿邮箱:tougao@xueui.cn,也可以找各个群的管理】

 
你可能喜欢的:
提升工作效率必备!设计统筹思维提升工作效率必备!设计统筹思维
版式设计:通用性质的版式和专属性版式版式设计:通用性质的版式和专属性版式
版式设计:元素的前后关系版式设计:元素的前后关系
14个以秋为主题的配色方案14个以秋为主题的配色方案
电商都被红色占领了!分享5招电商最常用的色彩搭配电商都被红色占领了!分享5招电商最常用的色彩搭配
无印良品设计背后的思考无印良品设计背后的思考
谷歌设计语音界面的六原则谷歌设计语音界面的六原则
黄色在电商设计中的玩法与禁忌【设计干货】黄色在电商设计中的玩法与禁忌【设计干货】
解析百度贴吧升级的故事I:用户洞察与交互升级解析百度贴吧升级的故事I:用户洞察与交互升级
不会C4D与手绘的设计师还有出路吗?不会C4D与手绘的设计师还有出路吗?