网页设计中颜色搭配的技巧

  对于网站建设来说，使用什么色彩是掌握在网站所有者的手中，对于网站设计人员来说，一般都是先考虑网站所有者的意见，然后根据这个进行设计规划。虽然这样很被动，不能否认，大多数能存活下来的网站都是因为其有很强的商业功能，很少人把它当做艺术品去欣赏，而且我们这里说到的色彩搭配，也是为了迎合用户体验，获得好感而设计的，这自然需要符合大多数的审美特性，很多时候，在确定整体颜色之后，只能在细节上下功夫。

  今天，长沙天琥设计培训学校主要想谈谈网页设计中颜色搭配的技巧，希望能对大家起到帮助哦~~

  一、颜色选择

  我们要做的头等步是颜色选择，在网站刚开始要设计的时候，这一点就要着手去做了，在这里要注意的是颜色的选择并不是凭空想象的，而是要根据服务产品的定位、风格、还有要传达给用户的理念，将这几点考虑到，在进行选取，而不是根据自己的经验或者嗜好来。

  我们来举个例子，假如说为一家大型企业设计官网，这家企业的要求是 VI 风格，采用统一配色，那么这家企业官网的配色我们就应该选取 VI 的风格配色。

  选色的方法：

  (1) 工具流：这个链接包含大量选色工具12个适合设计师的在线色彩搭配工具

  (2) 参考流：寻找别人的网站作为参考选取颜色(但是注意要风格类似，比如你的客户要求高雅风格，你就去找类似风格的网站选色)，这个方法适用于初学者。

  二、颜色的分配

  当你选取好了主色系之后，那就应该要考虑如何将它们分配到网页的每一个位置中去了，这里的操作也要讲究的，我们要注意的是，如果在红绿两色之间加其它的颜色的话，进行调和是可以搭配出很好看的色彩的，大家可以看看圣诞节各大电子商务网站的banner。

  颜色选择好之后我们就开始对颜色进行搭配，这个时候设计师就要利用上色彩基础知识了，色彩分为主色、辅助色、点缀色这三个叫法，如果可以的话还可以细分，一个网站的主色调，是可以传达网站的整体风格的，面积也是较大的，所以在选择色阶段选取的几个颜色中选一个作为主色，然后用在网页中需求较多的地方，如果banner的颜色，导航的背景色、文字标题的颜色等等，辅助色是比主色百分比略少的颜色，点缀色一般是饱和度较高的颜色，一般用在网页中的强调内容或者突出的内容，如按钮、链接等，三种颜色在整个网页的比重大概是60%、30%、10%。

  网页色彩搭配的原理：

  1、色彩的鲜明性。网页的色彩要鲜艳，容易引人注目。

  2、色彩的独特性。要有与众不同的色彩，使得大家对你的印象强烈。(参考设计思考第二篇网站CI的标准色彩一节)

  3、色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。

  4、色彩的联想性。不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和你网页的内涵相关联。

  配色方案技巧：

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

  2、用两种色彩。先选定一种色彩，然后选择它的对比色(在photoshop里按ctrl+shift+I)。我的主页用蓝色和黄色就是这样确定的。整个页面色彩丰富但不花稍。

  3、用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿;或者土黄，土灰，土蓝。确定色彩的方法各人不同，我是在photoshop里按前景色方框，在跳出的拾色器窗中选择"自定义"，然后在"色库"中选就可以了:)

  4、用黑色和一种彩色。比如大红的字体配黑色的边框感觉很"跳"。

  在网页配色中，忌讳的是：

  1、不要将所有颜色都用到，尽量控制在三种色彩以内。

  2、背景和前文的对比尽量要大，(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。

  网页设计中的颜色搭配：

  蓝色：商务流行色。较安全的web颜色。受设备偏色影响较小，搭配效果较好。

  红色：热情、冲动、刺激、勇气、恐怖、暴力、血腥、残忍。

  粉红色：浪漫、幸福、迷茫、困惑。

  桃红：绯闻、挑逗、时尚、明亮。

  暗红：神秘、深奥、稳健、深沉。

  黄色：有多个变种，每个变种很容易与其他颜色搭配，但同一种黄色在不同环境中所表现出来的视觉和心理效应往往有很大差别。

  橙色：快乐、时尚、温馨、感动。有红色热情奔放的特点，但又不像红色那样光彩夺目。有黄色明快爽朗的一面，而又不容易产生平庸带涩之感。视觉和心理效应较稳定，不会有太大起伏和变化。

  紫色:浪漫、优雅、高贵、深沉、忧郁、神秘。

  白色：白色、灰色、黑色、没有明显感情色彩或心理倾向，称为中性色。可以营造出强烈视觉效果。

  灰色：大面积灰色背景可以让白色、红色、前景信息更加醒目，可以让整个网页充满现代气息。用灰色过渡可以让极难搭配的颜色变得容易搭配。

  黑色：可以轻松从其他颜色中凸现出来，让其他颜色更加惹眼。黑白红可以构成简洁明快的布局。可以和绿、紫色描绘阴森恐怖的气氛。

  更多设计资讯，培训课程，开班时间，学校地址等学校信息，请进入长沙天琥设计培训学校。

尊重原创文章，转载请注明出处与链接：http://cstianhu.5zix.com/news/47132/ 违者必究！ 以上就是长沙天琥设计培训学校 小编为您整理网页设计中颜色搭配的技巧的全部内容。

---

• ← 这三个UI设计细节决定了产品的成功与否
• 提升平面设计创意的方法 →