服务时间:8:30-18:00

首页 >web前端网

如何快速掌握网页的色彩搭配

发布时间:2023-03-01 11:26 字数:682字 阅读:54

如何快速掌握网页的色彩搭配?由于人们对于色彩美感的认识存在着共同性,因此对于网页色彩的搭配也有一些技巧可以充分利用。下面介绍几种容易上手的技巧。

1.先确定主色彩,再衍生出其他色彩

前面已经介绍过,任何一个设计良好的网页都会有一个主色彩,这样才不会使浏览者眼花缭乱。作为设计者,可以先根据实际情况选择好一种基本色彩。然后调整该色彩的透明度或者饱和度,在此基础上衍生出其他的色彩。例如,在RGB模式下的颜色,当R取值为54、G取值为126、B取值为194时的颜色如图1所示。

R取值为54、G取值为126、B取值为194时的颜色

图1 R取值为54、G取值为126、B取值为194时的颜色

当调整颜色的饱和度,使R、G、B分别取值为104、137、182时,颜色效果如图2所示。如果调整饱和度,也可以得到某些比较协调的颜色。图3显示的是把图1中的颜色的不透明度调整为63%时的效果,而图4显示的是将不透明度调整为40%时的效果。

调整色彩饱和度产生其他颜色

图2 调整色彩饱和度产生其他颜色

不透明度为63%时的效果

图3 不透明度为63%时的效果

不透明度为40%时的效果

图4 不透明度为40%时的效果

2.先确定主色彩,再使用其互补色

这种方法也比较简单,用户根据实际情况选择一种颜色,然后再获得该颜色的互补色。利用这两种颜色作为主要的颜色来进行网页配色。

在网页设计中,在适当的位置恰当地运用互补色,不仅能加强色彩的对比,拉开距离感,而且能表现出特殊的视觉对比与平衡效果。

例如,如果选择如图5所示的颜色作为基本色,则其互补色如图6所示。

选择基本色

图5 选择基本色

获得互补色

图6 获得互补色

获得互补色有个技巧,在Photoshop中首先使用基本色填充画布,然后按Ctrl+I快捷键,即可获得其互补色。