标签:颜色理论 颜色游戏 测试 前端游戏
今天在研究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,关注前端开发,分享相关资源,欢迎点赞,欢迎拍砖。
---------------------------------------------------------------------------------------------------------
颜色你了解多少?,布布扣,bubuko.com
颜色你了解多少?
标签:颜色理论 颜色游戏 测试 前端游戏
原文地址:http://blog.csdn.net/whqet/article/details/25724179