Web 开发者需要了解的基础色彩理论

如果你上过艺术课,一定会发现基本上所有课堂墙上都挂了一个“色轮”。在课堂上,可能需要你混合各种颜色,画出你自己的作品。

1

在小学美术课上应该讲过一次色(primary color,即三原色)与二次色(seondary color,间色),如果你在小学之后还上过美术课,应该还了解过三次色(tertiary color,副色)。

2

不过如果你在高中或者更高层次的学校中学习过艺术,那你就会发现,色轮是展示色彩理论、练习混色以及研究色彩组合的最简单的方法。

何谓色彩理论?

色彩理论简史:爱德华·马奈(Édouard Manet)、埃德加·德加(Edgar Degas)、克洛德·莫奈(Claude Monet)等印象派的画家在抛弃写实,而开始尝试捕捉光色时,色彩理论就诞生了。

3

上图为莫奈的 Haystacks 系列画作

简单来说:色彩理论研究的是人的眼睛如何将光波转化为颜色。匹配或相似的色彩往往有着相似或互补的波。

因此可以将色彩理论归结为光波科学,来解释为什么可以看到各种颜色。不过在本文中,我们只专注于两个问题:

  • 为什么有些颜色可以完美搭配?
  • 我们该如何选择“正确”的颜色?

颜色的搭配问题有点像“与生俱来”的东西。不管怎样,在网页或者 App 里用纯绿色的背景是绝对让人无法忍受的!

下面我列了一个简表,当你遇到与色彩有关的问题时可以参考:

Level 1:单色

单色就是单一的颜色,或者同种颜色的多个色调的组合。

在 Web 开发时,你可以在这个网页中选择并查询某种颜色的 Hex 代码,并且可以在不影响色调的情况下让颜色更亮或更暗。

4

这就是最简单的网页配色方法。诸如 FacebookTwitter 之类的网站大都是用的这种单色配色方案。黑色、白色、天蓝色组合而成的简单配色,让这些社交 App 更加简洁。

只有用户的头像、链接、照片有着不同的颜色,这些不同的颜色可以被用户识别,更好地找到他们感兴趣的帖子和账号。

如果 Twitter 的网页上还有其它的颜色,就会让区分帖子、发帖人变得困难。

一般来说,即使你需要多种颜色,也得有个主色,所谓背景或者标题的颜色。

专业建议:如果你的网页要使用单色配色,请确保阴影可以清晰地将各个元素区分开了。否则用户在阅读文本或分离网页元素时将很不方便。

Level 2:互补色

如果不想在配色中只用各种各样的“橙色”怎么办?如果你想让链接突出,但又不和导航栏或者背景色冲突怎么办?

如果我们遵循基本色彩理论,解决上述问题的方案就是去寻找互补色

可以在色轮中一种颜色相对的位置找到它的互补色。

5

每种主色都与一种副色作为互补色相对应。有种方法可以轻松记住颜色如何匹配:如果一种副色和一种主色匹配,那么副色的构成色一定不含主色。比如,红色的互补色是绿色,而绿色由蓝色和黄色组成。

专业建议:一次只增加一种颜色,并保持页面简单。不要为了呈现一个完整的彩虹配色牺牲了你干净、好用的布局。不然,你可能会做出上世纪 90 年代流行的经典网站(比如这个)。

继续升级…

随着你的设计水平的提高,就能自如地挑战自己的极限了。配色并不是什么可怕的工作。你可以多多关注一些配色水平高的开发者(比如 )和设计师。多问问自己喜欢什么配色、不喜欢什么配色、为什么,这样就能建立自己的品味与品牌。

Web 开发者的色彩 Hack

试试自己手写一些 hex 代码、RBG 数字来尝试各种色彩的组合与混合。如果你是 SASS 的粉丝,可以把配好的颜色存储在文件中,日后在项目中导入。如果你的工作是构建页面结构而不是视觉设计(由客户或者产品经理决定),可以把这些颜色当做是占位符,让页面看起来更加明了。

请确保:

  • 所有东西都是可读的。
  • 链接、标题等你想要强调的东西应该与纯文本有所区别。
  • 用户可以轻松地区分网页的不同部分(比如导航栏、主要内容、文章等)。

在线工具

Doug R. Thomas, Esq. 强烈推荐以下网站:

拓展阅读

希望在读完这篇文章后,你不再为给网站、网页、app 配色感到犯愁。如果你对这个主题感兴趣,强烈建议去了解更多相关知识。本文只是浅显地进行了讲解,你可以读这篇文章了解更多关于色调和阴影的知识。

最后我想说,在你给自己的项目进行配色时,并不存在”错误答案“。许多人认为品味是天生就有的,正是它帮助你寻找美妙的设计、带来灵感、尝试各种组合,最终为你和你的品牌找到最适合方案。祝你好运!

本文发布于掘金 https://juejin.im/post/5c6caee26fb9a049df24a4df