颜色理论及其在设计上的影响是非常深的话题，但接下来的挑战里只涉及是非常基本的内容。

在网站上，颜色可以吸引对内容的注意力，激发情绪，创造视觉上的和谐。

使用不同的颜色组合可以改变网站的外貌，很多想法可以用内容加上颜色来实现。

颜色轮（the color wheel）是一个很有用的工具，来视觉化邻近的颜色。颜色轮是一个相似色调（hue）相邻、不同色调分开的圈。

当两个颜色在色轮上是相反，它们被称为互补色(complementary colors)。它们有这样的特征：如果它们联合，它们可以“取消彼此”而产生一种灰色。

然而，当设置为并行的，它们的颜色会表现出非常有生气(vibrant)，而且产生强烈的视觉反差。

下面是一些互补色以及它们的十六进制编码

red (#FF0000) and cyan (#00FFFF)  红色和青色

green(#00FF00) and megenta (#FF00FF) 绿色和紫红色

blue(#0000FF) and yellow (#FFFF00) 蓝色和黄色

从互补色的十六进制编码中可以看出互补色有些规律：互补色相对应位上的数字加起来为F。

这和过时的RYB颜色理论不同。RYB理论是我们在学校学的，有不懂的原色和互补色。

现代颜色理论使用加法的RGB模型（像在电脑屏幕上）和减法的CMY(K)模型（像在打印上）。

阅读color model,可以了解更多信息。

很多在线的颜色调色板工具可以选择互补色。

对于颜色挑战： 使用颜色是很有力的方法来增加页面的视觉兴趣。然而，颜色单独不能作为传递重要信息的唯一方法，因为视觉障碍的用户并不理解其内容。如何应对视觉障碍的用户，这方面的主题放在the Applied Accessibility挑战里。

改变background-color属性里的blue和yellowclass为响应的颜色。

注意对比白色背景色，这两个颜色看起来有何不同。

<style>
  body {
    background-color: #FFFFFF;
  }
  .blue {
    background-color: blue;
  }
  .yellow {
    background-color: yellow;
  }
  div {
    display: inline-block;
    height: 100px;
    width: 100px;
  }
</style>
<div class="blue"></div>
<div class="yellow"></div>

Applied Visual Design: Learn about Complementary Colors | Learn freeCodeCamp

2018-10-25 11:10:21