色彩入门
色彩方案的种类
不同网站应当使用不同的色彩方案,与站点的主题相吻合的色彩方案决不仅仅可以让网站 “更加好看”,更重要的是在访问者心目中建立对这个网站的感性认识。所以,色彩方案的选择决不能草率,而且色彩方案绝对是网站建设的第一个步骤。如果选择色彩方案时过于草率,甚至根本不对网站进行色彩方案的整体规划,你将不可能制作出一个真正优秀的网站。
例如,一个销售婴儿用品的网站应当使用比较活泼的色彩方案,而一个艺术网站则应当使用比较执重的方案。
按照色彩方案中色彩使用方式的不同,我们可以将色彩方案划分成多种类型,单色方案、相似色方案、补色方案和三合一色方案。
单色方案
单色方案是指在网站设计中终止使用一种基本颜色,为避免单调,我们可以通过调整这种基本颜色的灰度和亮度来得到更多的颜色,由于整个颜色方案中事实上只有一种基色,因此这种方案称为单色方案。例如:
![](http://www.juntuan.net/d/file/hkjc/xinshou/2005-10-20/e9e819b3ffdba3ff879f962b06fe9c23.jpg)
![](http://www.juntuan.net/d/file/hkjc/xinshou/2005-10-20/6f61d553212349795bdc5848d25843d8.jpg)
在Photoshop的色彩选择窗口中,我们可以这样进行建立单色方案。首先调整H(也就是Hue的缩写)后面的值来调整色调。注意,H的单位是度,也就是基本颜色在颜色环上所处位置的角度。
设置好H的值之后,再调整B后面的数字调整亮度以及S后面的数字调整饱和度。注意,其中B和S的单位是百分比,也就是向基本颜色中添加白色和黑色的百分比。这样就可以得到一个单色方案了。
下面来看两个使用单色方案的成功实例。
![](http://www.juntuan.net/d/file/hkjc/xinshou/2005-10-20/9459479fbaec500c6299e152b906f2cb.jpg)
![](http://www.juntuan.net/d/file/hkjc/xinshou/2005-10-20/aee1aedd118c7bbfeb6c445a43edd0da.jpg)
单色方案实例之一:
这是一个女性网站,因此其基本颜色为粉红色,并通过调整粉红色的饱和度得到了其余几种颜色。总体颜色趋于淡雅,访问者的注意力会很自然地被吸引到几幅展示其产品的图片上。
![](http://www.juntuan.net/d/file/hkjc/xinshou/2005-10-20/30a6bdfc4606cd9accaa6ddfad13a9f3.jpg)
![](http://www.juntuan.net/d/file/hkjc/xinshou/2005-10-20/da27532bc35268b8d814abb02d40c5fd.jpg)
单色方案实例之二:
这个色彩方案使用的基色颜色较深,并通过修改其亮度获得其他两种颜色,并用最浅的颜色作为主体部分的背景,使其突出出来。
总的来说,单色方案是一种比较稳重的方案,或者说比较保守的方案。单色方案给人整洁、经典的感觉,最适合于内容比较严肃的网站,比如政府网站,学术网站,企业网站,高雅艺术网站。
特别值得一提的是,商业网站也比较适合使用此种颜色方案,因为这种方案可以给人一种稳定感,使访问者容易建立对网站的信任感。当然,这种方案也有其灵活的一面,当使用较浅的基色时,这种颜色方案也可以用于时尚类网站,传达简约清雅的观念相似色方案
在色彩圆环上选择彼此相邻的几种颜色构成的配色方案就是相似色方案。例如橙色、橙红色以及橙黄色就可以组成一个相似色方案。由于相似色方案中包含了多种基色,如果再加上亮度和饱和度的变化,可以构成的颜色就非常多。
![](http://www.juntuan.net/d/file/hkjc/xinshou/2005-10-20/9276323d8766a5ab47760c065b9be6a0.jpg)
下面是相似色方案的实例。
![](http://www.juntuan.net/d/file/hkjc/xinshou/2005-10-20/04c16800dbcdf08f5d26f91b9a5efe32.jpg)
![](http://www.juntuan.net/d/file/hkjc/xinshou/2005-10-20/65b3648c474e3854bac19530155d74f2.jpg)
相似色方案实例一:
这个网站使用了由橙黄色、橙红色和橙色组成的配色方案。Bullseye是一家ISP服务商,面向普通客户。选用这种方案和行业内惯用的蓝色系形成鲜明对照,个性凸现。
![](http://www.juntuan.net/d/file/hkjc/xinshou/2005-10-20/7c0cf686250940a1cb47e301915c6c8e.jpg)
![](http://www.juntuan.net/d/file/hkjc/xinshou/2005-10-20/a672a3cb11a325b104752611a4ee2694.jpg)
相似色方案实例之二:
这个网站使用了绿色和黄色这两种相似色构成配色方案。页面上很多绿色植物,因此文字使用了绿色,整个页面看上去自然清新,和网站的内容相得益彰。
通常,相似色配色方案可以给人非常协调的感觉,因此在网站设计中非常常用。典型的运用方法就是,用一种颜色作为页面背景,而另外一种在颜色环中与其相邻的颜色作为前景色。除了上面介绍的绿色和黄色之外,蓝色和绿色以及红色和褐色也是比较常用的相似色配色方案。
不同网站应当使用不同的色彩方案,与站点的主题相吻合的色彩方案决不仅仅可以让网站 “更加好看”,更重要的是在访问者心目中建立对这个网站的感性认识。所以,色彩方案的选择决不能草率,而且色彩方案绝对是网站建设的第一个步骤。如果选择色彩方案时过于草率,甚至根本不对网站进行色彩方案的整体规划,你将不可能制作出一个真正优秀的网站。
例如,一个销售婴儿用品的网站应当使用比较活泼的色彩方案,而一个艺术网站则应当使用比较执重的方案。
按照色彩方案中色彩使用方式的不同,我们可以将色彩方案划分成多种类型,单色方案、相似色方案、补色方案和三合一色方案。
单色方案
单色方案是指在网站设计中终止使用一种基本颜色,为避免单调,我们可以通过调整这种基本颜色的灰度和亮度来得到更多的颜色,由于整个颜色方案中事实上只有一种基色,因此这种方案称为单色方案。例如:
![](http://www.juntuan.net/d/file/hkjc/xinshou/2005-10-20/e9e819b3ffdba3ff879f962b06fe9c23.jpg)
![](http://www.juntuan.net/d/file/hkjc/xinshou/2005-10-20/6f61d553212349795bdc5848d25843d8.jpg)
在Photoshop的色彩选择窗口中,我们可以这样进行建立单色方案。首先调整H(也就是Hue的缩写)后面的值来调整色调。注意,H的单位是度,也就是基本颜色在颜色环上所处位置的角度。
设置好H的值之后,再调整B后面的数字调整亮度以及S后面的数字调整饱和度。注意,其中B和S的单位是百分比,也就是向基本颜色中添加白色和黑色的百分比。这样就可以得到一个单色方案了。
下面来看两个使用单色方案的成功实例。
![](http://www.juntuan.net/d/file/hkjc/xinshou/2005-10-20/9459479fbaec500c6299e152b906f2cb.jpg)
![](http://www.juntuan.net/d/file/hkjc/xinshou/2005-10-20/aee1aedd118c7bbfeb6c445a43edd0da.jpg)
单色方案实例之一:
这是一个女性网站,因此其基本颜色为粉红色,并通过调整粉红色的饱和度得到了其余几种颜色。总体颜色趋于淡雅,访问者的注意力会很自然地被吸引到几幅展示其产品的图片上。
![](http://www.juntuan.net/d/file/hkjc/xinshou/2005-10-20/30a6bdfc4606cd9accaa6ddfad13a9f3.jpg)
![](http://www.juntuan.net/d/file/hkjc/xinshou/2005-10-20/da27532bc35268b8d814abb02d40c5fd.jpg)
单色方案实例之二:
这个色彩方案使用的基色颜色较深,并通过修改其亮度获得其他两种颜色,并用最浅的颜色作为主体部分的背景,使其突出出来。
总的来说,单色方案是一种比较稳重的方案,或者说比较保守的方案。单色方案给人整洁、经典的感觉,最适合于内容比较严肃的网站,比如政府网站,学术网站,企业网站,高雅艺术网站。
特别值得一提的是,商业网站也比较适合使用此种颜色方案,因为这种方案可以给人一种稳定感,使访问者容易建立对网站的信任感。当然,这种方案也有其灵活的一面,当使用较浅的基色时,这种颜色方案也可以用于时尚类网站,传达简约清雅的观念相似色方案
在色彩圆环上选择彼此相邻的几种颜色构成的配色方案就是相似色方案。例如橙色、橙红色以及橙黄色就可以组成一个相似色方案。由于相似色方案中包含了多种基色,如果再加上亮度和饱和度的变化,可以构成的颜色就非常多。
![](http://www.juntuan.net/d/file/hkjc/xinshou/2005-10-20/9276323d8766a5ab47760c065b9be6a0.jpg)
下面是相似色方案的实例。
![](http://www.juntuan.net/d/file/hkjc/xinshou/2005-10-20/04c16800dbcdf08f5d26f91b9a5efe32.jpg)
![](http://www.juntuan.net/d/file/hkjc/xinshou/2005-10-20/65b3648c474e3854bac19530155d74f2.jpg)
相似色方案实例一:
这个网站使用了由橙黄色、橙红色和橙色组成的配色方案。Bullseye是一家ISP服务商,面向普通客户。选用这种方案和行业内惯用的蓝色系形成鲜明对照,个性凸现。
![](http://www.juntuan.net/d/file/hkjc/xinshou/2005-10-20/7c0cf686250940a1cb47e301915c6c8e.jpg)
![](http://www.juntuan.net/d/file/hkjc/xinshou/2005-10-20/a672a3cb11a325b104752611a4ee2694.jpg)
相似色方案实例之二:
这个网站使用了绿色和黄色这两种相似色构成配色方案。页面上很多绿色植物,因此文字使用了绿色,整个页面看上去自然清新,和网站的内容相得益彰。
通常,相似色配色方案可以给人非常协调的感觉,因此在网站设计中非常常用。典型的运用方法就是,用一种颜色作为页面背景,而另外一种在颜色环中与其相邻的颜色作为前景色。除了上面介绍的绿色和黄色之外,蓝色和绿色以及红色和褐色也是比较常用的相似色配色方案。