码迷,mamicode.com
首页 > 其他好文 > 详细

颜色你了解多少?

时间:2014-05-15 13:36:11      阅读:226      评论:0      收藏:0      [点我收藏+]

标签:颜色理论   颜色游戏   测试   前端游戏   

今天在研究d3.js时,遇到一个颜色配对游戏,感觉特好玩,推荐给大家,大家可以玩玩看,测试下你对颜色了解多少。

1.颜色理论

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

1.1颜色的三要素,色相、饱和度、明度

色相(Hue)指的是色彩的外相,是在不同波长的光照射下,人眼所感觉不同的颜色,如红色、黄色、蓝色等。
饱和度(Saturation)指色彩的纯度,越高色彩越纯,低则逐渐变灰。
明度(Lightness)又称亮度,指的是颜色的明暗。
我们经常用的hsl颜色表示法就是利用颜色三要素表示颜色的。

1.2 色彩调和

颜色调和关系经常使用色环来表示,所有颜色都可以有三原色(红黄蓝)调和组成,如下面的flash所示。

1.3互补色(Complementary)

互补色,又称对比色,指的是色环中处于对立面的两种颜色,例如下图所示。
bubuko.com,布布扣

1.4 类似色(Analogous)

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

1.5 三色系(Triadic)

在色环上处于等边三角形的三个颜色,如下图所示。
bubuko.com,布布扣

1.6 四色系(tetradic

在色环上处在矩形点上的四个颜色,组成四色系,如下图所示。
bubuko.com,布布扣

2. 玩玩游戏

有d3制作的这个游戏测试你对颜色的了解程度,色盘中随着角度变化色相进行变换,同时内侧颜色饱和度低,外侧饱和度高,大家可以试试自己的水平。
bubuko.com,布布扣
上部左侧是游戏前的配置菜单,你可以通过设置你的显示器获得最佳的亮度效果,同时可以打开颜色混合提示工具更好的玩游戏。
底部是游戏关卡的导航菜单和反馈结果显示处,然后你就可以开始你的游戏了。
然后大家看看我的成绩。
bubuko.com,布布扣
也欢迎大家通过评论晒晒你的成绩!

----------------------------------------------------------

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

颜色你了解多少?,布布扣,bubuko.com

颜色你了解多少?

标签:颜色理论   颜色游戏   测试   前端游戏   

原文地址:http://blog.csdn.net/whqet/article/details/25724179

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!