玩游戏学前端——色彩您了解多少
玩游戏学前端——颜色您了解多少？
五一左右曾经给大家推荐过两个前端业者值得一玩的两个游戏《玩游戏学前端——猜颜色、选择器》，今天再来看一个关于颜色的游戏。在研究d3.js时，遇到一个颜色配对游戏，感觉特好玩，大家可以玩玩看，测试下你对颜色了解多少。
1.颜色理论
首先来学习点颜色理论，关于颜色，大家都明白但又不甚清楚，所以我们先补习下颜色理论。
1.1颜色的三要素
色相（Hue）指的是色彩的外相，是在不同波长的光照射下，人眼所感觉不同的颜色，如红色、黄色、蓝色等。
饱和度（Saturation）指色彩的纯度，越高色彩越纯，低则逐渐变灰。
明度（Lightness）又称亮度，指的是颜色的明暗。
我们经常用的hsl颜色表示法就是利用颜色三要素表示颜色的。
1.2 色彩调和
颜色调和关系经常使用色环来表示，所有颜色都可以有三原色（红黄蓝）调和组成，如下面的flash所示，你可以单击复选框，选择显示的颜色。
1.3互补色（Complementary）
互补色，又称对比色，指的是色环中处于对立面的两种颜色，例如下图所示。
1.4 类似色（Analogous）
也就是相似色。在色轮上90度角内相邻接的色统称为类似色.例如红－红橙－橙.黄－黄绿－绿.青－青紫－紫等均为类似色.类似色由于色相对比不强给人有色感平静、调和的感觉因此在配色中常应用 。如果有多个相似色按色环中的顺序排列组合，那就会出现渐变。类似色在色环上如下图所示。
1.5 三色系（Triadic）
在色环上处于等边三角形的三个颜色，如下图所示。
1.6 四色系（tetradic）
在色环上处在矩形点上的四个颜色，组成四色系，如下图所示。
2. 玩玩游戏
有d3制作的这个游戏测试你对颜色的了解程度，色盘中随着角度变化色相进行变换，同时内侧颜色饱和度低，外侧饱和度高，大家可以试试自己的水平。
上部左侧是游戏前的配置菜单，你可以通过设置你的显示器获得最佳的亮度效果，同时可以打开颜色混合提示工具更好的玩游戏。
底部是游戏关卡的导航菜单和反馈结果显示处，然后你就可以开始你的游戏了。
然后大家看看我的成绩。
也欢迎大家通过评论晒晒你的成绩！
----------------------------------------------------------
前端开发whqet，关注前端开发，分享相关资源，欢迎点赞，欢迎拍砖。
---------------------------------------------------------------------------------------------------------
- 2楼greaterthanme3小时前
- 赞！
- 1楼whqet3小时前
- 感谢关注，大家也可以晒晒你的成绩哟。