ps设计颜色配比方案

色彩入门

首先让我们熟悉一下色彩的某些基本概念。

三原色

一切颜色都来自三原色：红、黄、蓝。

在这个圆环中，相邻的两个原色相混合可以得到此外三个比较重要的颜色（下文将其称为二级原色）：红+黄=橙，红+蓝=紫，蓝+黄=绿

让我们再深入一步，三原色和三种二级原色可以深入混合得到更多的颜色，分别是橙红色、紫红色、蓝紫色、蓝绿色、橘黄色和黄绿色。这六种颜色可以称为三级原色。

按照同样的方式不停进行下去，这个圆环中颜色之间的分隔线就会消失，得到下图所示的“色彩圆环”，在某些绘图程序的调色板中我们可以看到这样的色彩圆环。

不过这个圆环仍然没有涵盖所有的颜色，对于圆环中的每一种颜色尚有饱和度、亮度和灰度等的变化。也就是说，将上述圆环中的任意一种颜色和黑色、白色、灰色按照不一样比例混合就可以得到更多的颜色，下面将详细简介。

常用的色彩术语

饱和度

某种颜色的饱和度是指这种颜色所包括的基本颜色的多少。例如RGB值为（0，0，255）的蓝色是纯蓝色，他的饱和度是100%。伴随饱和度的减少，颜色会越来越靠近灰色。

灰度

基本色彩和黑色进行不一样程度的混合可以得到不一样的灰度，例如

亮度

基本颜色和白色进行不一样程度的混合可以得到不一样的亮度，例如：:

色调

基本颜色和灰色进行不一样程度的混合可以得到不一样的色调，例如：

色彩方案的种类

不一样网站应当使用不一样的色彩方案，与站点的主题相吻合的色彩方案决不仅仅可以让网站“更好看”，更重要的是在访问者心目中建立对这个网站的感性认识。因此，色彩方案的选择决不能草率，并且色彩方案绝对是网站建设的第一种环节。假如选择色彩方案时过于草率，甚至主线不对网站进行色彩方案的整体规划，你将不也许制作出一种真正优秀的网站。

例如，一种销售婴儿用品的网站应当使用比较活泼的色彩方案，而一种艺术网站则应当使用比较执重的方案。

按照色彩方案中色彩使用方式的不一样，我们可以将色彩方案划提成多种类型，单色方案、相似色方案、补色方案和三合一色方案。

单色方案

单色方案是指在网站设计中终止使用一种基本颜色，为防止单调，我们可以通过调整这种基本颜色的灰度和亮度来得到更多的颜色，由于整个颜色方案中实际上只有一种基色，因此这种方案称为单色方案。例如：

在Photoshop的色彩选择窗口中，我们可以这样进行建立单色方案。首先调整H（也就是Hue的缩写）背面的值来调整色调。注意，H的单位是度，也就是基本颜色在颜色环上所处位置的角度。

设置好H的值之后，再调整B背面的数字调整亮度以及S背面的数字调整饱和度。注意，其中B和S的单位是比例，也就是向基本颜色中添加白色和黑色的比例。这样就可以得到一种单色方案了。

下面来看两个使用单色方案的成功实例。

单色方案实例之一：

这是一种女性网站，因此其基本颜色为粉红色，并通过调整粉红色的饱和度得到了其他几种颜色。总体颜色趋于淡雅，访问者的注意力会很自然地被吸引到几幅展示其产品的图片上。

单色方案实例之二：

这个色彩方案使用的基色颜色较深，并通过修改其亮度获得其他两种颜色，并用最浅的颜色作为主体部分的背景，使其突出出来。

总的来说，单色方案是一种比较稳重的方案，或者说比较保守的方案。单色方案给人整洁、经典的感觉，最适合于内容比较严厉的网站，例如政府网站，学术网站，企业网站，高雅艺术网站。

尤其值得一提的是，商业网站也比较适合使用此种颜色方案，由于这种方案可以给人一种稳定感，使访问者轻易建立对网站的信任感。当然，这种方案也有其灵活的一面，当使用较浅的基色时，这种颜色方案也可以用于时尚类网站，传达简约清雅的观念。相似色方案

在色彩圆环上选择彼此相邻的几种颜色构成的配色方案就是相似色方案。例如橙色、橙红色以及橙黄色就可以构成一种相似色方案。由于相似色方案中包括了多种基色，假如再加上亮度和饱和度的变化，可以构成的颜色就非常多。

下面是相似色方案的实例。

相似色方案实例一：

这个网站使用了由橙黄色、橙红色和橙色构成的配色方案。Bullseye是一家ISP服务商，面向一般客户。选用这种方案和行业内常用的蓝色系形成鲜明对照，个性凸现。

相似色方案实例之二：

这个网站使用了绿色和黄色这两种相似色构成配色方案。页面上诸多绿色植物，因此文字使用了绿色，整个页面看上去自然清新，和网站的内容相得益彰。

一般，相似色配色方案可以给人非常协调的感觉，因此在网站设计中非常常用。经典的运用措施就是，用一种颜色作为页面背景，而此外一种在颜色环中与其相邻的颜色作为前景色。除了上面简介的绿色和黄色之外，蓝色和绿色以及红色和褐色也是比较常用的相似色配色方案。

补充色

补充色方案

在色彩圆环上沿直径相对应的两种颜色构成一对互补色，下图中小箭头所指的黄色和蓝色就互为互补色。

下图是三组互补色，每组中具有两对互补色。

在理解了互补色是怎么回事之后，我们再来看双重互补色。在色彩圆环上选择一组互补色，然后分别在这两个互补色的旁边选择两个相似色就可以得到一种由四种颜色构成的双重互补色。

例如在下图中，绿色和红色为互补色，绿色旁边的深绿色和蓝绿色以及红色旁边的橙红色以及深红色就构成了一组双重互补色。

与双重互补色相类似的尚有分割互补色，也就取是一组互补色中的某一种颜色的相似色得到三种颜色构成一组分割互补色。例如下图中的蓝色和橙黄色是一组互补色，加上橙黄色旁边的橙红色就构成了一种分割互补色方案。

互补色方案的配置虽然略显繁琐，不过在目前的网站设计中非常流行，由于互补色适合于制作活泼时尚的效果，让你的网站魅力四射。

来看一种使用互补色的实例。

互补色配方案实例：

这个网站使用了蓝色（导航栏）和橙黄色（内容背景）这样一对互补色作为配色方案。

由于互补色所具有天生的动感，因此定位在时尚、青春、活力、动感、新科技、新见解或者类似主题的网站可以采用这种配色方案。互补色配方案尚有一种妙用。前面简介单色方案时曾提到，单色方案比较适合比较严厉、庄严或者清新淡雅的网站。不过假如你觉得这样的配色方案显得“稳重有余，活力局限性”，那么你不妨在网页的合适地方（例如标题栏、导航栏）中使用互补色，这样可以在不破坏整体稳重清新的效果的同步，为页面添加几分动感。

三色

三色方案

三色方案是指在色彩圆环中选择一种等边三角形三个顶点上的颜色构成的配色方案。在Photoshop中，要想构造一种三色方案是非常轻易。首先选中一种颜色，记下他的H（Hue）值，然后为这个值加120（记住，H的单位是“度”，也就是沿色彩圆环旋转120度），以此类推得到第三种颜色，构成一种三色方案。

来看三色方案的实例。

三色方案实例：

这个网站使用蓝色为底色，黄色和红色为前景色，红黄蓝恰恰就是三原色，因此这是一种非常经典的三色方案。

三色方案中使用了三种彼此之间差异明显的颜色，因此页面显得相称不稳定，是一种可以带来比较另类的感觉的配色方案，假如你要设计的网站是这种类型的，不妨使用这种配色方案。

方案选择

配色方案的选择

色彩方案在网站设计中必须谨慎选择，尤其对于企业网站而言，绝大多数企业网站都会不停改版，不过在改版的过程中，色彩方案一般会保持稳定。

经典的例子是IBM企业的网站，作为声名遐迩的“蓝色巨人”，用蓝色作为配色方案的主色是理所当然事情，数年保持不变，为了使页面不过于呆板。页面中还使用了少许的黄色（蓝色的补色）合绿色，来增长页面的活力，愈加符合IBM业界巨头的身份。

实际上，以蓝色为主色的网站可以使用上面简介的四种配色方案中的任何一种，如下图。显然IBM使用了第三种，也就是互补色方案。假如你设计的网站也打算使用蓝色作为主色，那么你可以根据网站的内容和定位在这四种配色方案中进行选择。

假如主色多于一种，构造配色方案时也很轻易。假设有两种主色，并且这两种颜色在色彩圆环上是相邻