6条网页设计配色原则让你秒变配色高手 网页颜色怎么搭配( 二 )


6条网页设计配色原则让你秒变配色高手 网页颜色怎么搭配

文章插图
文章插图
向上或向下移动你的滑块,你可以仔细选择你认为最合适的颜色 。
现在,你设计的页面有了三个基本的颜色:背景色、文本色和高亮色 。在以后你也可以选择一种以上的高亮色,但现在对于新手的你来说还是选择一种比较合适 。你现在已经掌握了基本的配色,如果你有信心,你以后还可以尝试更多种不同的方案 。
你刚刚学到:
学会了如何选择“色相” 。概括来说,色相是基本色,当你移动滑块,你会看到h值在颜色选择器中的变化 。
“H”代表色相,一旦你选择了你的高亮颜色,文本框中显示的就是你当前颜色的色相 。
四、如果有疑问,请使用蓝色如果你对你的高亮色的选择有疑惑的话,不妨使用蓝色 。蓝色是一种弹性比较大的颜色,可以和很多种颜色搭配 。黄色和紫色也很不错,但是如果使用不当会适得其反 。
另一方面,如果你是用蓝色,那么你用错颜色的概率就会很低 。如果你正犹豫着不知道用什么颜色好,不妨使用蓝色 。比较安全的蓝色包括从H235到H190,从海军蓝到深蓝色 。
6条网页设计配色原则让你秒变配色高手 网页颜色怎么搭配

文章插图
文章插图
目前我网站的背景也选择的是蓝色,如果你选定了一种颜色作为你的高亮色,那么也请你在其他需要的地方使用这种颜色 。如果你的按钮、标题等需要高亮,把它们的颜色也换成同一种蓝色 。在下面这个例子中我把白色换成了蓝色 。
6条网页设计配色原则让你秒变配色高手 网页颜色怎么搭配

文章插图
文章插图
五、给你的高亮色增加变化你一旦选择了高亮的颜色,从该点移动滑块来选择接下来的颜色 。在你的设计中也需要其他的颜色,高亮色的稍微变化会让你的颜色选择变得简单 。
6条网页设计配色原则让你秒变配色高手 网页颜色怎么搭配

文章插图
文章插图
使用这些类型的颜色变化的东西,如:
悬停效果:
6条网页设计配色原则让你秒变配色高手 网页颜色怎么搭配

文章插图
文章插图
六、尽量不要使用颜色选择器右上角的颜色颜色选择器的右上角是一块肥沃的土地 。在右上角的颜色就像F1赛车; 他们可以执行出惊人的效果,而且非常诱人,但通常想用好需要大量的经验 。如果没有这种经验,他们可能会导致事故的发生,所以最好以削弱你的颜色,最好都保持比较淡化的色彩 。
这就是为什么在本教程的第三部分,我问你点击的颜色在地图右上角的中心选择您的高亮颜色之前,要确保你有一个比较柔和的颜色拉开序幕 。
为了说明这一点,看如果我只是改变了我们设计的色调,到目前为止,会发生什么 。
6条网页设计配色原则让你秒变配色高手 网页颜色怎么搭配

文章插图
文章插图
看上去还是挺舒服的对吧?但是如果你把颜色调整为选择器右上角的颜色,我们再来看看效果如何:
6条网页设计配色原则让你秒变配色高手 网页颜色怎么搭配

文章插图
文章插图
分分钟亮瞎了访客的双眼!如果你想确保你不烧焦你的访客的视网膜,遵循留出颜色选择器的右上角的格子的一般原则 。
饱和度和亮度
当您拖动周围的颜色选择器区域的地图区域,你会看到“S”和“B”的值发生变化,这代表饱和度和亮度 。您还可以看到色相号保持不变 。所以,你通过改变你原有的色相的饱和度和亮度会产生颜色的变化 。
6条网页设计配色原则让你秒变配色高手 网页颜色怎么搭配

经验总结扩展阅读