工作ps设计颜色配比方案

1、色彩入门首先让我们熟悉一下色彩的一些基本概念。三原色一切颜色都来自三原色：红、黄、蓝。在这个圆环中，相邻的两个原色相混合可以得到另外三个比较重要的颜色（下文将其称为二级原色）：红+黄=橙，红+蓝=紫，蓝+黄=绿让我们再深入一步，三原色和三种二级原色可以进一步混合得到更多的颜色，分别是橙红色、紫红色、蓝紫色、蓝绿色、橘黄色和黄绿色。这六种颜色可以称为三级原色。按照同样的方式不断进行下去，这个圆环中颜色之间的分隔线就会消失，得到下图所示的“色彩圆环”，在一些绘图程序的调色板中我们可以看到这样的色彩圆环。但是这个圆环仍然没有涵盖所有的颜色，对于圆环中的每一种颜色还有饱和度、亮度和灰度等的变化。也就是

2、说，将上述圆环中的任意一种颜色和黑色、白色、灰色按照不同比例混合就可以得到更多的颜色，下面将详细介绍。常用的色彩术语饱和度某种颜色的饱和度是指这种颜色所包含的基本颜色的多少。例如RGB值为（0，0，255）的蓝色是纯蓝色，他的饱和度是100%。随着饱和度的降低，颜色会越来越接近灰色。灰度基本色彩和黑色进行不同程度的混合可以得到不同的灰度，例如亮度基本颜色和白色进行不同程度的混合可以得到不同的亮度，例如：:色调基本颜色和灰色进行不同程度的混合可以得到不同的色调，例如：色彩方案的种类不同网站应当使用不同的色彩方案，与站点的主题相吻合的色彩方案决不仅仅可以让网站“更加好看”，更重要的是在访问者心目中

3、建立对这个网站的感性认识。所以，色彩方案的选择决不能草率，而且色彩方案绝对是网站建设的第一个步骤。如果选择色彩方案时过于草率，甚至根本不对网站进行色彩方案的整体规划，你将不可能制作出一个真正优秀的网站。例如，一个销售婴儿用品的网站应当使用比较活泼的色彩方案，而一个艺术网站则应当使用比较执重的方案。按照色彩方案中色彩使用方式的不同，我们可以将色彩方案划分成多种类型，单色方案、相似色方案、补色方案和三合一色方案。单色方案单色方案是指在网站设计中终止使用一种基本颜色，为避免单调，我们可以通过调整这种基本颜色的灰度和亮度来得到更多的颜色，由于整个颜色方案中事实上只有一种基色，因此这种方案称为单色方案。

4、例如：在Photoshop的色彩选择窗口中，我们可以这样进行建立单色方案。首先调整H（也就是Hue的缩写）后面的值来调整色调。注意，H的单位是度，也就是基本颜色在颜色环上所处位置的角度。设置好H的值之后，再调整B后面的数字调整亮度以及S后面的数字调整饱和度。注意，其中B和S的单位是百分比，也就是向基本颜色中添加白色和黑色的百分比。这样就可以得到一个单色方案了。下面来看两个使用单色方案的成功实例。单色方案实例之一：这是一个女性网站，因此其基本颜色为粉红色，并通过调整粉红色的饱和度得到了其余几种颜色。总体颜色趋于淡雅，访问者的注意力会很自然地被吸引到几幅展示其产品的图片上。tyslcs15.jpg

5、 (3.52 KB) 单色方案实例之二：这个色彩方案使用的基色颜色较深，并通过修改其亮度获得其他两种颜色，并用最浅的颜色作为主体部分的背景，使其突出出来。总的来说，单色方案是一种比较稳重的方案，或者说比较保守的方案。单色方案给人整洁、经典的感觉，最适合于内容比较严肃的网站，比如政府网站，学术网站，企业网站，高雅艺术网站。特别值得一提的是，商业网站也比较适合使用此种颜色方案，因为这种方案可以给人一种稳定感，使访问者容易建立对网站的信任感。当然，这种方案也有其灵活的一面，当使用较浅的基色时，这种颜色方案也可以用于时尚类网站，传达简约清雅的观念。相似色方案在色彩圆环上选择彼此相邻的几种颜色构成的配色

6、方案就是相似色方案。例如橙色、橙红色以及橙黄色就可以组成一个相似色方案。由于相似色方案中包含了多种基色，如果再加上亮度和饱和度的变化，可以构成的颜色就非常多。0031.jpg (8.5 KB) 0032.jpg (4.87 KB) 0033.jpg (4.75 KB) 2009-9-7 21:080034.jpg (4.98 KB) 下面是相似色方案的实例。0035.jpg (31.44 KB) 0036.jpg (3.67 KB) 相似色方案实例一：这个网站使用了由橙黄色、橙红色和橙色组成的配色方案。Bullseye是一家ISP服务商，面向普通客户。选用这种方案和行业内惯用的蓝色系形成鲜明对

7、照，个性凸现。0037.jpg (47.11 KB) 0038.jpg (3.54 KB) 相似色方案实例之二：这个网站使用了绿色和黄色这两种相似色构成配色方案。页面上很多绿色植物，因此文字使用了绿色，整个页面看上去自然清新，和网站的内容相得益彰。通常，相似色配色方案可以给人非常协调的感觉，因此在网站设计中非常常用。典型的运用方法就是，用一种颜色作为页面背景，而另外一种在颜色环中与其相邻的颜色作为前景色。除了上面介绍的绿色和黄色之外，蓝色和绿色以及红色和褐色也是比较常用的相似色配色方案。补充色补充色方案在色彩圆环上沿直径相对应的两种颜色构成一对互补色，下图中小箭头所指的黄色和蓝色就互为互补色。

8、下图是三组互补色，每组中含有两对互补色。在了解了互补色是怎么回事之后，我们再来看双重互补色。在色彩圆环上选择一组互补色，然后分别在这两个互补色的旁边选择两个相似色就可以得到一个由四种颜色组成的双重互补色。例如在下图中，绿色和红色为互补色，绿色旁边的深绿色和蓝绿色以及红色旁边的橙红色以及深红色就构成了一组双重互补色。与双重互补色相类似的还有分割互补色，也就取是一组互补色中的某一种颜色的相似色得到三种颜色构成一组分割互补色。例如下图中的蓝色和橙黄色是一组互补色，加上橙黄色旁边的橙红色就构成了一个分割互补色方案。互补色方案的配置虽然略显繁琐，但是在现在的网站设计中非常流行，因为互补色适合于制作活泼时

9、尚的效果，让你的网站魅力四射。 来看一个使用互补色的实例。互补色配方案实例：这个网站使用了蓝色（导航栏）和橙黄色（内容背景）这样一对互补色作为配色方案。由于互补色所具有天生的动感，因此定位在时尚、青春、活力、动感、新科技、新见解或者类似主题的网站可以采用这种配色方案。 互补色配方案还有一个妙用。前面介绍单色方案时曾提到，单色方案比较适合比较严肃、庄重或者清新淡雅的网站。但是如果你觉得这样的配色方案显得“稳重有余，活力不足”，那么你不妨在网页的适当地方（比如标题栏、导航栏）中使用互补色，这样可以在不破坏整体稳重清新的效果的同时，为页面添加几分动感。三色三色方案三色方案是指在色彩圆环中选择一个等边

10、三角形三个顶点上的颜色构成的配色方案。在Photoshop中，要想构造一个三色方案是非常容易。首先选中一种颜色，记下他的H（Hue）值，然后为这个值加120（记住，H的单位是“度”，也就是沿色彩圆环旋转120度），以此类推得到第三种颜色，构成一个三色方案。 来看三色方案的实例。三色方案实例：这个网站使用蓝色为底色，黄色和红色为前景色，红黄蓝恰恰就是三原色，因此这是一个非常典型的三色方案。三色方案中使用了三种彼此之间差别明显的颜色，因此页面显得相当不稳定，是一种可以带来比较另类的感觉的配色方案，如果你要设计的网站是这种类型的，不妨使用这种配色方案。方案选择配色方案的选择色彩方案在网站设计中必须慎

11、重选择，尤其对于企业网站而言，绝大多数企业网站都会不断改版，但是在改版的过程中，色彩方案通常会保持稳定。典型的例子是IBM公司的网站，作为声名遐迩的“蓝色巨人”，用蓝色作为配色方案的主色是理所当然事情，多年保持不变，为了使页面不过于呆板。页面中还使用了少量的黄色（蓝色的补色）合绿色，来增加页面的活力，更加符合IBM业界巨头的身份。事实上，以蓝色为主色的网站可以使用上面介绍的四种配色方案中的任何一种，如下图。显然IBM使用了第三种，也就是互补色方案。如果你设计的网站也打算使用蓝色作为主色，那么你可以根据网站的内容和定位在这四种配色方案中进行选择。如果主色多于一种，构造配色方案时也很容易。假设有两种主色，并且这两种颜色在色彩圆环上是