[译] Web 开发者须要了解的基础色彩理论

• 原文地址：Basic Color Theory for Web Developers
• 原文做者：Nicole Zonnenberg
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：lsvih
• 校对者：Mcskiller，kasheemlew

若是你上过艺术课，必定会发现基本上全部课堂墙上都挂了一个“色轮”。在课堂上，可能须要你混合各类颜色，画出你本身的做品。

在小学美术课上应该讲过一次色（primary color，即三原色）与二次色（seondary color，间色），若是你在小学以后还上过美术课，应该还了解过三次色（tertiary color，副色）。

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

何谓色彩理论？

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

上图为莫奈的 Haystacks 系列画做

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

所以能够将色彩理论归结为光波科学，来解释为何能够看到各类颜色。不过在本文中，咱们只专一于两个问题：

• 为何有些颜色能够完美搭配？
• 咱们该如何选择“正确”的颜色？

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

下面我列了一个简表，当你遇到与色彩有关的问题时能够参考：

Level 1：单色

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

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

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

只有用户的头像、连接、照片有着不一样的颜色，这些不一样的颜色能够被用户识别，更好地找到他们感兴趣的帖子和帐号。

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

通常来讲，即便你须要多种颜色，也得有个主色，所谓背景或者标题的颜色。

专业建议：若是你的网页要使用单色配色，请确保阴影能够清晰地将各个元素区分开了。不然用户在阅读文本或分离网页元素时将很不方便。

Level 2：互补色

若是不想在配色中只用各类各样的“橙色”怎么办？若是你想让连接突出，但又不和导航栏或者背景色冲突怎么办？

若是咱们遵循基本色彩理论，解决上述问题的方案就是去寻找互补色。

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

每种主色都与一种副色做为互补色相对应。有种方法能够轻松记住颜色如何匹配：若是一种副色和一种主色匹配，那么副色的构成色必定不含主色。好比，红色的互补色是绿色，而绿色由蓝色和黄色组成。

专业建议：一次只增长一种颜色，并保持页面简单。不要为了呈现一个完整的彩虹配色牺牲了你干净、好用的布局。否则，你可能会作出上世纪 90 年代流行的经典网站（好比这个）。

继续升级...

随着你的设计水平的提升，就能自如地挑战本身的极限了。配色并非什么可怕的工做。你能够多多关注一些配色水平高的开发者（好比他 ）和设计师。多问问本身喜欢什么配色、不喜欢什么配色、为何，这样就能创建本身的品味与品牌。

Web 开发者的色彩 Hack

试试本身手写一些 hex 代码、RBG 数字来尝试各类色彩的组合与混合。若是你是 SASS 的粉丝，能够把配好的颜色存储在文件中，往后在项目中导入。若是你的工做是构建页面结构而不是视觉设计（由客户或者产品经理决定），能够把这些颜色当作是占位符，让页面看起来更加明了。

请确保：

• 全部东西都是可读的。
• 连接、标题等你想要强调的东西应该与纯文本有所区别。
• 用户能够轻松地区分网页的不一样部分（好比导航栏、主要内容、文章等）。

在线工具

• Palleton.com
• Coolors.co

Doug R. Thomas, Esq. 强烈推荐如下网站：

• Color.Adobe.com
• WebAIM — 颜色对比度检查器 — 确保文本在背景上的可读性。
• Coblis — 色盲模拟器 — 用色盲滤镜来测试你的布局截图，以确保内容对全部受众都是可读的。

拓展阅读

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

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

若是发现译文存在错误或其余须要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。