色彩网页设计

1、如何在网页设计中使用正确的色彩以表达情感

笑天涯说：为什么Facebook的主题色是蓝色的?为什么淘宝的主题色是橙色的?如何在网页设计时，正确地使用色彩?欲知个中缘由和方法，且看本文分解! 作者是位顾问，曾帮多家做出适当转型，让其营利上升，来看看他有些什么秘诀。 色彩影响人类心情与思考这件事情是真的，当眼睛看到某种颜色时，会将此讯息传回大脑的下视丘，经由一系列的神经传达，甲状腺分泌贺尔蒙，进而造成情绪、情感或是实际反应。 经由线上 uickSprout 的研究显示，颜色可以影响 90% 的产品评价;数位行销专家 Neil Patel 指出，85% 购产品的原因是出自于颜色，而色彩对于网路上各式各样的设计当然也具有一定影响。 跟相亲一样，第一印象很重要;只要抓住色彩使用的箇中奥妙，就等于抓住读者的心。 什么是色彩心理学? 在我们开始谈色彩攻略之前，先来谈谈色彩心理学，字面上来讲就是研究色彩如何影响心理的学问，有些人因为还没有大量文献研究背书，而对色彩心理学抱持怀疑立场，而我接下来要探讨色彩对于人的观感影响也不是每一项都经由科学证实，但是色彩对于认知行为的影响实在非常巨大，因此仍有探讨的必要性存在。 在一篇文献探讨中，Satyendra Singh 认为顾客在 90 秒内就会决定一项产品的观感，其中色彩就占 62%-90% 的决定性因素，色彩心理学的重要性因此不证自明，产品要成功，选色很重要，领导者、经理人、建筑师、主厨、设计师等等都应该正视颜色带来的影响。 色彩用对地方才能穿透人心 跳到正题，既然颜色这么重要，那要用在哪里才能真正发挥功效?本文将讨论各种网页上的颜色设计运用，最主要将着重在的主色调上，包含网页主图、标题、隔线、背景色、连结纽以及弹出视窗都在讨论范围内。 例如下图，NinjaJump 在 logo、码、分类连结、副标题连结、侧边连结都使用绿、黄、红三色，我们要讨论的重点也可以运用到选项栏位、侧边栏位与色彩策略等等。 色彩学真的非常精妙，不仅要用对地方，连天时地利人为因素都要加进去考量，才能展现威力。如果要在网页上跳跳床，你绝对不会想到要用黑色，看看NinjaJump?。 身为一个跳跳床的，我们可以预期的是明亮有活力的配色，红色、绿色、再加上一点亮澄澄的黄色对孩童与父母而言都是不错的选择。若今天的消费主要客是女性，可能这招就不管用，L&rsuo;Oreal 的就仅使用简单的黑与白色，加上些许紫色增添层次感。 关于为何 L&rsuo;Oreal 使用黑白两色是正确的，我留到稍后解释，首先再一次提醒运用色彩要注意：用对地方、用对时间、针对客、针对目的，我们先来看看以下几点。 女性不喜欢灰、橘与棕色;她们喜欢蓝、紫与绿色。 Patel 利用性别来分类男女对于颜色有何不同的喜好，在一项颜色与性别的研究中，35% 的女性表示她们最喜欢蓝色;再来是紫色占 23%、绿色占 14%。33% 的女性表示橘色是她们最不喜欢的颜色，再来是棕色 33% 与灰色 17%。 其他研究也显示女性较不偏好大地色系，只要看看瞄准女性做为主要客的线上购物就可证实。 化妆品牌 Milani Cosmetics 专供女性场，其首页上没有任何一点橘、棕、灰色。 Won&rsuo;s Day 则是把所有女性最爱的颜色 (蓝、紫、绿) 都放上网页设计了。 还是有人以为女生最爱粉红色，请容我在这先翻个白眼，事实上只有少数女性会将粉红色选为最喜爱的颜色，虽然粉红色与女性柔若有相关联，但使用蓝、紫、绿色，反而能够有效增进女性购物者的造访率。 男性不喜欢紫、橘、棕色;他们喜欢蓝、绿与黑色 如果男性才是的主要针对客，最好别用紫、橘、棕色。蓝、绿与黑色在传统上较常与男性气息连结在一起，棕色竟然不在此列倒是让人有点讶异。 蓝色可以增进使用者的信任 蓝色事实上是最被普遍使用的颜色，而且很多人喜欢，所以蓝色是最温暖的颜色(喂!)。 只要看看有关蓝色的文献探讨，就可以发现蓝色被认为是信任、和平、秩序、忠诚的象徵;也会让人有冷静下来的作用;甚至还可以将蓝色直接代表宁静。 在颜色对于心理影响的调查中，蓝色传达信任感与宁静的作用是被证实过的，所以看看 Facebook 就知道，将蓝色运用在主页面上用以传达核心价值：透明与信任。 如果 Facebook 的例子还不够明显，我们再来看看 Paypal，作为一个线上支付平台，同样也选择蓝色增进使用者的信任。如果他们用的是红色或橘色，大概让人以为是在跳楼大拍的机率还会高一点。

2、网页设计中的色彩有何应用原则

看看优秀的网站能够给我们带来很多启示。下面我们就先看看这些主色调的象征意义和这些色调中做的比较优秀的网站。

灰色：象征冷静、中立；（苹果、维基百科、纽约时报……）

绿色：象征健康、生命；（BP石油、食品超市whole foods、星巴克……）

蓝色：象征可靠、力量；（戴尔、大众汽车、IBM……）

紫色：象征智慧、想象；（雅虎、T-Mobile、科幻主题电视台Syfy……）

红色：象征血气、年轻；（可口可乐、乐高、肯德基……）

橙色：象征欢乐、信任；（芬达、亚马逊、火狐……）

黄色：象征温暖、透明；（百思买、法拉利、麦当劳……）

网页设计色彩搭配原则

网页美工设计中，最常用的几个颜色为蓝色、绿色、橙色，以及暗红色。

蓝为主调。蓝色多与白、橙搭配，。白底，蓝标题栏，橙色按钮或ICON做点缀;蓝天白云，沉静整洁的感觉。

绿为主调。绿色多与白、兰两色搭配。白底，绿标题栏，兰色或橙色按钮或ICON做点缀，绿白相间，雅致而有生气。

橙为主调。橙色多与白、红搭配。白底，橙标题栏，暗红或桔红色按钮或ICON做点缀，橙色活泼热情，标准的商业色调，因此多用于商业网站的网页美工设计。

暗红为主调。暗红色显得宁重、严肃、高贵，需要配黑和灰来压制刺激的红色。黑或灰底，暗红标题栏，文字内容背景为浅灰色。

网页设计师需要注意的几点

尽管三原色的相互搭配创造出了无数颜色，可不是所有的颜色都适用于网页设计，不同的颜色在搭配上也有着其中的学问，网页设计就相当于平面设计，网页设计师可以将平面设计中的审美观点套用到这上面来，所以平面设计上的审美的观点在网页设计上非常实用。

在网页设计师中对于色彩的使用特别忌讳脏、纯、跳、花、粉这几种情形。

忌脏是指背景与文字内容对比不强烈，灰暗的背景令人沮丧!

忌纯是指艳丽的纯色对人的刺激太强烈抗议，缺乏内涵。

忌跳是指再好看的颜色，也不能脱离整体。

忌花是指要有一种主色贯穿其中，主色并不是面积最大的颜色，而是最重要，最能揭示和反映主题的颜色，就象领导者一样，虽然在人数上居少数，但起决定作用。

忌粉是指颜色浅固然显的干净，但如果对比过弱，显得苍白无力了，就象病夫一样无可救药。

另外，蓝色忌纯，绿色忌黄，红色忌艳。

当然，作为网页设计师，我们最需要时刻提醒自己的是不要为了设计而设计。

一切的设计都要以用户的需求为导向。一个优秀的网站，会给用户非常直观简介明了的体验和简明的导航。

3、网页设计的色彩如何搭配

并不固定，只是与人的视觉有关。要看你的总的颜色基调，比如冷色基调，就大都以冷色，如要用暖色（多指亮色）就要多加注意，大多会影响视觉，使游览者眼睛不适。
我认为你的问题不应放在什么配什么！而是色彩应用的风格（基调）！就是你的一面必须有一个颜色为主线，后在围绕这条主线搭配，目的是为从整体视觉优秀，使游览者感到舒适！
当然，亮色的使用是更吸引人的眼球的，但极难搭配。比如在过节时，各大网站会加强温馨度，多用红、黄、橙来渲染。
不知道我的回答你是否满意？

4、网页设计需要色彩基础吗

网页设计需要了解电脑操作意外 还需要美术设计方面的了解 其实都是一系列的。。 现在的美术生在抱专业的时候就有设计这一块的 包括平面设计和服装等许多的 所以当然需要 不过也不是一定的 大多数人对美的感觉都是差不多的 如果你的美术或这方面的天赋很好 那也差不多了 基本上了解下色彩的搭配就可以了 如果想更深一步美化自己的网页 当然还是有些色彩的基础比较好 使用一些互补的颜色会使得画面等价美观的（这是我一个一个字打得，希望采纳，谢谢）

5、RGB色彩与CMYK色彩区别在哪里？网页设计用什么色彩模式，为什么？

网页设计用RGB模式，色彩多。

先来说一下RGB的理论知识：RGB是Photoshop中默认的模式（屏幕显示一般是RGB），RGB是一种“光”可以反映到人们的眼中，RGB是有红、黄、蓝三种颜色构成。所有绘图工具和滤镜都可以使用，通道调板中有3个8位的颜色通道，从而形成24位图像，可以容纳1670多万种颜色。
步骤阅读
再来说一下CMYK的理论知识：CMYK是一种“油墨“主要用于打印或是印刷色泽连续的图像，CMYK可以进行四色印刷有4个8位的颜色通道，是32位图像。四种油墨是：（C青色、M洋红、Y黄色、K黑色）

CRGB和CMYK的区别：RGB模式下处理图像比较方便，比CMYK文件小得多，可以节省很多空间，但是打印出来的图像却会和电脑显示屏出现的图像出现较大差异，而CMYK则接近电脑显示屏中的图像，因此在实际的广告印刷中，通常都是用CMYK模式，也就是4色印刷。
文件—新建的参数中就有颜色模式，根据自己的需要选择建立图像的模式。

在菜单栏中的图像—模式可以知道自己的图像现在是RGB模式。

也可以在自己的标题属性栏中看到是RGB模式

如果想要打印照片，就必须转成CMYK模式，这样的话，图像打印出来的效果才会和电脑上的图片出现较小的色，怎么改呢？点击菜单栏中的图像—模式—CMYK颜色
步骤阅读

检查一下，是否转化成功，看标题属性即可。

6、设计作品的色彩,特别是网页的色彩应注意什么?

无论你是个怎样的死硬派，你不得不承认色彩和生活的亲密程度，差不多到了难舍难离的地步。小如每天上班该穿著什么颜色的衣服，大如设计一国之国旗应用什么颜色，全反映出色彩在我们的生活中，担当了个吃重的脚色。事实上，除了黑白影片的人物外，没有人可以生活在一个无色世界中。色彩令这个世界变得缤纷，它能改变我们的心情，影响我们对某事某物的看法。企业因此愿意把花绿绿的钞票投资在设计代表企业的颜色上，设计师绞尽脑汁去表现每种颜色的特质，为的是他们相信，在你和颜色相遇的一刹那，你可以意会到在那或温柔，或暴烈的色彩底下，它所传递给你的讯息。

色彩运用是门学问，它在设计中占的位置到底有多重要？就这方面我们专诚向设计师蔡启仁先生请教。蔡启仁先生表示，一件设计作品，一般包含三个元素：色彩、图像、文字。这三个元素中，以色彩较为重要。蔡先生解释，人对色彩是相当敏感，当他们首次接触一件设计作品，最先攫取其注意力的，就是作品的颜色，其次是图像，最后才是文字。色彩给其他人的印象特别强烈，所以设计师最容易通过色彩去表达他的设计意念，而身为设计师，就必须懂得和色彩沟通，了解他们。
..........

我们以前做过这个课题的

可以和我们探讨###

7、网页设计基本能用到的颜色都是多少RGB值？求大神帮助

这样说吧: 先看看8位色深的RGB色值代表.例如白色: R:255 G:255 B:255. 然后用网页代码表示为: #ffffff 再如 黑色: R:0 G:0 B:0 网页代码表示为: #000000 你在Photoshop的调色板中可以直接找到代表当前颜色的网页代码; 其中的奥秘就是其实网页代码就是RGB的16进制写法.表示方式是#RRGGBB. 0的16进制表示为 00, 255的16进制是ff. 结论: 网页代码可以表示8位色深的RGB的任意颜色. 可以通过软件查询网页代码的方式得到.photoshop.Dreamweaver.flash都可以.(当然,如果不嫌弃麻烦,已知RGB色分值,自己换算也能得到相应代码 (*^__^*) )

8、怎样学会网页设计色彩搭配

去看看相关色彩搭配书籍吧

9、网页设计中的色彩设计有哪些注意事项？

学会使用色轮

一半是科学，一半是艺术，色轮是我们认识颜色关系的工具。

那里有光，那里就有颜色。有时我们会认为颜色是独立的——这是蓝色，那是红色，但事实上，颜色不可能单独存在，它总是与另外的颜色产生联系，就象音乐的音符，没有某一种颜色是所谓的“好”或“坏”。只有当与其它颜色搭配作为一个整体时，我们才能说，是协调或者不协调。色轮告诉我们颜色之间的相互的关系。我们在本文中将阐述这一点。

将无穷的颜色简化：

白色光包含了所有的可见颜色，我们看到是由紫到红之间的无穷光谱组成的可见光区域，就象你所看到的彩虹颜色。为了在使用颜色时更加实用，人们对它进行了简化，将它们分为 12 种基本的色相。 12 种颜色——记起来了吗，和你小时候第一次买彩色蜡笔时，盒子里装了那 12 只蜡笔差不多。

色轮由 12 种基本的颜色组成。首先包含的是三原色（ Primary colors ），即蓝、黄、红。原色混合产生了二次色（ Secondary colors ），用二次色混合，产生了三次色（ tertiary colors ）。

原色是色轮中所有颜色的“父母”。在色轮中，只有这三种颜色不是 由其它颜色调合而成。上图可以看出，三原色在色环中的位置是平均分布的。

二次色所处的位置是位于两种三原色一半的地方（见上图）。每一种二次色都是由离它最近的两种原色等量调合而成的颜色。

三次色是由相邻的两种二次色调合而成。

共同的颜色：

你可能会发现，每一种颜色都拥有部分相邻的颜色，如此循环成一个色环。共同的颜色是颜色关系的基本要点，必须对此有深入的了解。

在上图这七种颜色中，都共同拥有蓝色。越远的颜色（如草绿色）含有的蓝色就越少。绿色及紫色这两种二次色都含有蓝色。

在上图七种颜色中，都拥有黄色。同样的，离得越远的颜色，拥有的黄色就越少。绿色及橙色这两种二次色都含有黄色。

在上图七种颜色中，都拥有红色。向两边散开时，红色就含得越少。橙色及紫色这两种二次色都含有红色。

颜色有明暗之分——或者称为颜色数值。为了显示颜色的明暗，所以色轮有多个环。两个外围的大环是暗色（ Shadow colors ），里面两个小环是明色 (tint colors) 。

色轮有五个同心环组成，从暗到亮——暗色处于大环，明色处于小环，而中间是颜色的基本色相。

从上图我们可以看出，处于右边的暗色就是加上黑色，而左边的明色则是加上白色。五个圆环已经清楚表示了颜色如何由暗到亮的过程。但这种明色及暗色的关系只是相对而言。

颜色关系

下面我们列出六种基本的颜色关系。每一种颜色关系都可以有无数种搭配的可能，当你掌握它们时，你对颜色的视野才会显得开阔。

单色搭配（ Monochromatic ）：

一种色相由暗、中、明三种色调组成。这就是单色。单色搭配上并没有形成颜色的层次，但形成了明暗的层次。这种搭配在设计中应用时，出来的效果永远不错，其重要性也可见一斑。

类比色搭配（ Analogous ）

相邻的颜色我们称为类比色。类比色都拥有共同的颜色（在上图中，是黄色及红色）。这种颜色搭配产生了一种令人悦目、低对比度的和谐美感。类比色非常丰富，在设计时应用这种搭配同样让你轻易产生不错的视觉效果。

补色搭配（ Complement ）

在色轮上直线相对的两种颜色称为补色，在上图中，是橙色及蓝色。补色形成强列的对比效果，传达出活力、能量、兴奋等意义。补色要达到最佳的效果，最好是其中一种面积比较小，另一种比较大。比如在一个蓝色的区域里搭配橙色的小圆点。

分裂补色（ Split complement ）

如果我们同时用补色及类比色的方法来确定的颜色关系，就称为分裂补色。这种颜色搭配既具有类比色的低对比度的美感，又具有补色的力量感。形成了一种既和谐又有重点的颜色关系。如在上面三种颜色中，红色就显得更加突出。

原色搭配（ Primary ）

除了在一些儿童的产品中，三原色同时使用是比较少见的。但是，无论是在中国还是在美国的文化中，红黄搭配都是非常受欢迎。红黄搭配应用的范围很广——从快餐店到加油站，我们都可以看见这两种颜色同时在一起。蓝红搭配也很常见，但只有当两者的区域是分离时，才会显得吸引人，如果是紧邻在一起，则会产生冲突感。

二次色搭配 (Secondary)

二次色之间都拥有一种共同的颜色——其中两种共同拥有蓝色，两种共同拥有黄色，两种共同拥有红色——所以它们轻易能够形成协调的搭配。如果三种二次色同时使用，则显得很舒适、吸引，并具有丰富的色调。它们同时具有的颜色深度及广度，这一点在其它颜色关系上很难找到。

看了这么多理论，还是考一下自己吧：

下面这四个封面中，都各自运用了我们在上面所述的其中一种颜色搭配。你能说出它们是运用了哪一种颜色搭配吗？（提示：眼睛只集中在一些大区域的颜色，不要理会细微的颜色区域。也不用理会黑白两种颜色）

（答案见本页底部）

答案:

当我们用色轮对其分析后，就很容易得到答案:

A:单色搭配;

B:补色搭配;

C:三原色搭配;

D:类比色搭配

原文出自：http://www.bamagazine.com