如何让网页色彩搭配-让网页看起来更舒适

网页设计好不好看,颜色是毋庸置疑要排首位的,所以关于颜色的搭配技巧以及原则,对于每一个要网页设计师来说,这都是一个重要的学习过程.在这次程中我将与你分享6点颜色规律，你可以按照这些原则把握最基本的色彩规律。当然我们生活中也会遇到一些客户提供的logo色彩不是很好看 比如：等等。如果遇到类似的我们应该怎么办呢。我们有两种方案可以做 第一logo相邻色，第二实在没办法根据他们行业来用色调(这个记住要和客户沟通协商)；

6点网页配色原则:

一、需要配色的是你的画布，而不是你的图片

二、选择简单的灰色作为你网站的基调

三、只选择一种颜色突出显示

四、如果有疑问，请使用蓝色

五、给你的高亮色增加变化

六、尽量不要使用颜色选择器右上角的颜色 

第一点,需要配色的是你的画布,而不是你的图片

平时的网页设计中最根本的原则是，无论你花了多少时间创造了一个辉煌的设计，最终的作用是发挥出内容的核心位置。你的配色方案永远不应该比图文呈现的内容的更加“鲜艳”。你的配色应该是在画布，画布指的就是结构框架。目的是帮助突出网站的内容。下面请看两组图对比一下:

注释：淡色的画布突出了图像文案，而明亮的画布反而不能突出你的内容。不能让色彩目光吸引用户的眼球，夺取网站的内容，不然这个网站将毫无意义可言。

用Photoshop软件设计网站的时候，创建设计的过程往往是相互独立的。有些设计单个看起来很不错，也能被你的客户所接受，但是当它真正被设计成网页的时候不适当的配色往往会分散访客的注意力。事实上，网页设计的过程是和内容紧密相连的，很多制作高品质的网页看上去空空荡荡，几乎没有内容。

第二条,选择简单的灰色作为你网站的基调

你可以为你的网站基调选择无数种颜色，不过我建议你采用最简单的颜色，比如白色/浅灰色与深灰色的搭配文字背景。

你可以看看任何热门的网站、模版、主题，白色或浅灰色与深灰色搭配成了大多数的选择，这当然也是有充分理由的。这样的搭配对访客而言提高了你内容的可读性，并且把你的图片文案突出在最前方。我们来看看下面的图：

注释：一般来说，你的文字最好避免使用墨黑色，深灰色一般更容易阅读。我们提供一个比较舒服的文字颜色范围：大标题＃333到 中标题＃666。日期＃999或者eee。

对于你的背景色，全白色（#FFFFFFF）是可以搭配任何文本的最安全的颜色。如果你想选用其他的背景颜色，我们建议采用#FFFFFF到#CCCCCC当然，这些颜色的选择都不是固定死的。当我们对一些色彩还没把握，以上的配色方案建议你放心使用。我们现在来看一个案例： 不说格局 只说色彩搭配 这种耐看

三、只选择一种颜色突出显示

如果你选择好几种不同的色调来，那么你的配色方案绝大多数是有问题的。你颜色用得越多，你的页面就越来越难以控制。所以，在你网页以灰色基调的前提下，你最好只选择一种鲜艳的颜色来作为你想要突出的事物，比如标题、菜单、按钮等等。你的高亮颜色可以是蓝色、红色、绿色，等等。

你最好选择与你的基调颜色相关的高亮颜色。打开你的颜色选择器，并单击你彩色方块的中心。如下图：

向上或向下移动你的滑块，你可以仔细选择你认为最合适的颜色。

现在设计的页面有了三个基本的颜色：背景色、文本色和高亮色等。在非常熟练以后也可以选择多种以上的高亮色，但现在色彩把控不是很好的话还是选择一种到两种比较合适。如果你有信心，你以后还可以尝试更多种不同的方案。我搜了一些做的不错的案例给你们看看

我选了一些先对比较难把控色调看看   学习一下人家配色

红色：                                 

黄色：                   

紫色：             

四、如果有疑问，请使用蓝色

如果你对你的高亮色的选择有疑惑的话，不妨使用蓝色。蓝色是一种弹性比较大的颜色，可以和很多种颜色搭配。其实每一种颜色都很不错，但如果使用不当会适得其反。

另一方面，如果你是用蓝色，那么你用错颜色的概率就会很低。你正犹豫着不知道用什么颜色好，不妨使用蓝色。比较安全的蓝色包括从H230到H190，从海军蓝到深蓝色。

目前我做网站的背景也选择的是蓝色，如果你选定了一种颜色作为你的高亮色，那么也请你在其他需要的地方使用这种颜色。

如果你的按钮、标题等需要高亮，把它们的颜色也换成同一种蓝色。

在下面这个例子中我把白色换成了蓝色。

举个列子网址：

五、给你的高亮色增加变化

你一旦选择了高亮的颜色，从该点移动滑块来选择接下来的颜色。在你的设计中也需要其它的颜色，高亮色的稍微变化会让你的颜色选择变得简单。这些高亮色通常会使用到标题、菜单、按钮、鼠标移动上去的效果等如下图：

使用这些类型的颜色变化的东西，我们通常会往上调整 让他们有点差别。如下图：

悬停效果：

六、尽量不要使用颜色选择器右上角的颜色

颜色选择器的右上角是比较鲜艳的色调。在右上角的颜色就像F1赛车; 他们可以执行出惊人的效果，而且非常诱人，但通常想用好需要大量的经验。如果没有这种经验，他们可能会导致事故的发生，所以最好以削弱你的颜色，最好都保持比较淡化的色彩。            这就是为什么在第三部分点击的颜色在地图右上角的中心选择您的高亮颜色之前，要确保你有一个比较柔和的颜色拉开序幕。

为了说明这一点，看如果我只是改变了我们设计的色调，到目前为止，会发生什么。

看上去还是挺舒服的对吧，但是如果你把颜色调整为选择器右上角的颜色，我们再来看看下面这一张效果如何：

分分钟刺眼看花访客的双眼！如果你想确保你不烧焦你的访客的视网膜，在颜色上尽量不要去选择器的右上角的鲜艳色。好了说到这里我想问问大家在Photoshop中HSB模型 H代表什么 S又代表什么  B分别是什么。有哪位同事还记得吗

HSB模型 色调-饱和度-亮度

这种调色我相信大家很少有人用到，一般都是很多年的大神级别的人才会去用，这个好比就是七种颜料，然后你是一个画家、当你想要什么色调的时候自己拿来倒入画桶里自己调配色用，这个在下一页解释。现在说说当你拖动周围的颜色选择器区域的地图区域，你会看到“H”和“S”和“B”的值发生变化，这代表色调—饱和度—亮度。您还可以看到色调号保持不变。所以，通过改变你原有的色相的饱和度和亮度会产生颜色的变化。

现在我们来说说上一页色调当你混合灰色到彩色这被称为创造了色调。如果你调节饱和度和亮度，那么你就创造了一种新的色调。所以基本上任何时候无论你的饱和度和亮度均小于100％，这就是一种色调。

同样，当你在不断调节饱和度和亮度的时候 色彩是不断在变化的，色彩这个词来源于油漆混合。这个实我个人理解的没有官方认证的所以不要当真。既然说到了这， 我们在说最后一点单色配色方案

单色配色方案

单色的配色方案是，你以一个基本的色调和扩展它的色相，饱和度和亮度。因此，通过采摘一大亮点的颜色和它创造的变化，你实际上创建了一个单色方案。

当你感觉很舒服，可以增加一个额外的高亮颜色。我建议尝试不同的颜色，因为他们往往是最简单的二重奏。然后尝试绿色和蓝色，这在我的经验中是第二个最简单的。这两种往往是与客户和访客都会称赞的搭配。 配色网址：如下图：