色彩的搭配与选定

冷暖色
       暖色系：由太阳颜色衍生出来的颜色，红色、黄色，给人以温暖柔和的感觉，春天色系和秋天色系的人特别适合穿暖色系的衣服，化暖色系的妆。暖色系包括红紫,红,红橙,橙,黄橙;
　　冷色系：蓝色，绿色，紫色都属于冷色系，冬天色系和夏天色系的人是用冷色系的颜色。
 
中间色
就是黑、白、灰三种颜色。适用于任何色系的。
 
同色系
将同色系的颜色搭配在一起决不会出错，如粉红+大红，艳红+桃红，玫红+草莓红等这类同色系间的变化搭配可穿出同色系色彩的层次感，又不会显得单调乏味，是最简单易行的方法。

网页色彩搭配的原理

色彩的鲜明性：网页的色彩要鲜艳，容易引人注目。
色彩的独特性：要有与众不同的色彩，使得大家对你的印象强烈。
色彩的合适性：就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。
　　色彩的联想性：不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和你网页的内涵相关联。
网页色彩搭配的技巧

用一种色彩：这里是指先选定一种色彩，然后调整透明度或者饱和度，(说得通俗些就是将色彩变淡或则加深)， 产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。

　　用两种色彩：先选定一种色彩，然后选择它的对比色。

　　用一个色系：简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。
　　用黑色和一种彩色：比如大红的字体配黑色的边框感觉很"跳"。

一般情况下网站色调选择要注意以下几点：
忌讳使用强烈对比的颜色搭配做主色；
配色简洁，主色要尽量控制在三种以内；
背景和内容的对比要明显，少用花纹复杂的背景图片，以便突出显示文字内容。

色彩的世界多采多姿，不同的色彩计画常常左右了产品最终给人的感觉，而色彩并不会单独存在，良好的色彩搭配常常可以让你的色彩计画更加吸引人的目光。在《浅谈色彩学：对比色配色》中我们曾提到色彩比例分配的原则，透过一些公式化的配色技巧让大家在搭配色彩的时候有所依据而发展、不致于手足无措不知该从何开始。

以70％底色、25％主色与5％强调色的配色原则为例，由于底色与主色都是属于同一个色相的色彩（黄色系），因此以这个例子而言，其实是使用了两个色彩的配色方案：

在一般情况下，一个版面中使用的色彩建议不要超过三个色彩。这边所指的三种色彩通常是指「色相」上的不同。米黄色与铭黄色在人类的视觉感受上，都认为是温暖的黄色色调，因此并不会主观的认为他们是不同的色彩，而是同一个色系的色彩集。而紫色就很明显不属于黄色色系的一份子，因此在这个配色方案中可以算是一个独立的色彩

然而不管是两个颜色还是三个颜色，很明显都不够用。

设计师在为版面制作细节的时候，常常会需要使用许多同色系的色彩，例如需要利用明暗变化来营造元件立体感的时候：

抑或是同一个按钮在不同的状态下想利用透过些微的色彩变化来给予使用者回馈，例如这边利用加亮以及加暗来模拟「发光」以及「凹陷」的效果，这时候都会需要更多同色系的色彩来辅助：

想要取得这些色彩有许多方式：

1. 使用HSB 选择颜色：

几乎所有的绘图软体都提供了HSB 的选色工具，在大部分的情况下设计师可以轻易的使用HSB 快速取得各种同色系的色彩。HSB 使用三种数值来描述色彩：分别为色相（Hue）、饱和度（Saturation）以及明度，或称亮度（Brightness）：

在大部分的情况下，我们仅需调整明度的数值即可得到需要的色彩：

然而色彩有分高明度以及低明度的色彩，像是黄色就是高明度的色彩，因此色彩的明度数值就高达90％，当我们需要比黄色还更亮的色彩时怎么办呢？这时候可以去调整饱和度的数值，让色彩往白色接近一些，以取得更高明度的色彩。当然啦，在显示萤幕上是不存在比白色还要亮的色彩的。

关于HSB的更多细节可参考《浅谈色彩学：人性化的HSB色彩空间》一文

2. 利用绘图软体的透明度以及叠加工具来取得色彩：

比起HSB，这个方法似乎又更科学化了一些，适合设计的一开始就利用这个方法来定好一套色彩规范、方便后续作业、团体分工作业等等。

我们可以利用黑色与白色，透过不同透明度的叠加在原始色彩中，以取得同色系的色彩：

这个效果很接近直接调整饱和度以及明度数值所得到的色彩结果，很快速但是不一定可以取得吸引人的色彩。

绘图软体中提供了色彩混合的叠加模式，我们这边利用「柔光」(soft light)的叠加模式，以相同的方式叠加在原始色彩中，可以得到完全不同的色彩组合，比起透明度的叠加，取得的色彩更舒服、更调合：

当柔光的效果不够强烈的时候，我们另外可以尝试其他不同的叠加方式，例如以下就是使用「重叠」(overlay)的混合模式得到的色彩组合：

当然不同明度的色彩使用各种混合模式亦会得到不同的结果，高明度与低明度的色彩适用的混合方式并不同，建议可以依据自己的原始色彩多方尝试、快速取得最符合自己需要的色彩组合。

方法是死的，这些配色方法都只是透过科学化的方式、帮助我们更快的取得需要的色彩组合来应用，当然设计师们应该按照自己的需求来对色彩做调整。例如黄色系的高明度色彩，其实如果将「色相」做细微幅度的往红色（低明度）偏移，也可以得到降低明度的结果
、却也让人感受到是同一色系的延伸。

网页设计师配色工具集

这里将会介绍一些好用的配色工具，简单容易使用哦！