玩游戏学前端——颜色您了解多少？

灰太狼 2022-08-27 05:44 295阅读 0赞

五一左右曾经给大家推荐过两个前端业者值得一玩的两个游戏《[玩游戏学前端——猜颜色、选择器][Link 1]》，今天再来看一个关于颜色的游戏。在研究[d3.js][]时，遇到一个[颜色配对游戏][Link 2]，感觉特好玩，大家可以玩玩看，测试下你对颜色了解多少。

## 1.颜色理论 ##

首先来学习点颜色理论，关于颜色，大家都明白但又不甚清楚，所以我们先补习下颜色理论。

### 1.1颜色的三要素 ###

色相（Hue）指的是色彩的外相，是在不同波长的光照射下，人眼所感觉不同的颜色，如红色、黄色、蓝色等。

饱和度（Saturation）指色彩的纯度，越高色彩越纯，低则逐渐变灰。

明度（Lightness）又称亮度，指的是颜色的明暗。

我们经常用的hsl颜色表示法就是利用颜色三要素表示颜色的。

### 1.2 色彩调和 ###

颜色调和关系经常使用色环来表示，所有颜色都可以有三原色（红黄蓝）调和组成，如下面的flash所示，你可以单击复选框，选择显示的颜色。

### 1.3互补色（Complementary） ###

互补色，又称对比色，指的是色环中处于对立面的两种颜色，例如下图所示。

![SouthEast][]

### 1.4 类似色（Analogous） ###

也就是相似色。在色轮上90度角内相邻接的色统称为类似色.例如红－红橙－橙.黄－黄绿－绿.青－青紫－紫等均为类似色.类似色由于色相对比不强给人有色感平静、调和的感觉因此在配色中常应用 。如果有多个相似色按色环中的顺序排列组合，那就会出现渐变。类似色在色环上如下图所示。

![SouthEast 1][]

### 1.5 三色系（Triadic） ###

在色环上处于等边三角形的三个颜色，如下图所示。

![SouthEast 2][]

### 1.6 四色系（tetradic） ###

在色环上处在矩形点上的四个颜色，组成四色系，如下图所示。

![SouthEast 3][]

## 2. 玩玩游戏 ##

由d3.js制作的 [这个游戏][Link 2]测试你对颜色的了解程度，色盘中随着角度变化色相进行变换，同时内侧颜色饱和度低，外侧饱和度高，大家可以试试自己的水平。

![SouthEast 4][]

上部左侧是游戏前的配置菜单，你可以通过设置你的显示器获得最佳的亮度效果，同时可以打开颜色混合提示工具更好的玩游戏。

底部是游戏关卡的导航菜单和反馈结果显示处，然后你就可以开始你的游戏了。

然后大家看看我的成绩。

![SouthEast 5][]

也欢迎大家通过评论晒晒你的成绩！

\----------------------------------------------------------

[前端开发whqet][whqet]，关注前端开发，分享相关资源，欢迎点赞，欢迎拍砖。  
\---------------------------------------------------------------------------------------------------------

[Link 1]: http://blog.csdn.net/whqet/article/details/24848605
[d3.js]: http://d3js.org/
[Link 2]: http://color.method.ac/
[SouthEast]: /images/20220824/34b22a6cdd514e52bc28bc371a5c30a9.png
[SouthEast 1]: /images/20220824/2699cd0f54924e8097cbbef04f3b75b2.png
[SouthEast 2]: /images/20220824/32aa823b63ac460791388af29c7d6a20.png
[SouthEast 3]: /images/20220824/0639e8f103d747a29e2fffbfd30f1e64.png
[SouthEast 4]: /images/20220824/5226468dda244ea48857e3501b3056b5.png
[SouthEast 5]: /images/20220824/6a6c4b346c95461c8b4f5d1c4066d75f.png
[whqet]: http://blog.csdn.net/whqet