网页设计配色精彩十例

江湖雨哥

江湖雨哥

2016-01-29 12:32

网页设计配色精彩十例,网页设计配色精彩十例

  颜色的使用在网页制作中起着非常关键的作用,有很多网站以其成功的色彩搭配令人过目不忘。但是对于刚开始学习制作网页的人来说,往往不容易驾驭好网页的颜色搭配。除了学习各种色彩理论和方法之外,笔者认为多学习一些著名网站的用色方法,对于我们制作美丽的网页可以起到事半功倍的作用。所以,笔者总结了一些著名网站的颜色搭配方法,这些方法可以让我们的学习少走弯路,快速提高我们的网页制作水平。

一、网页颜色原理和象征意义

  我们所有网页上颜色,在HTML下看到的是以颜色英文单词或者十六进制的表示方法(如#000000表示为黑色)。不同的颜色有着不同的含义,给人各种丰富的感觉和联想。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)

  红色:热情、奔放、喜悦、庄严
  黄色:高贵、富有、灿烂、活泼
  黑色:严肃、夜晚、沉着
  白色:纯洁、简单、洁净
  蓝色:天空、清爽、科技
  绿色:植物、生命、生机
  灰色:庄重、沉稳
  紫色:浪漫、富贵
  棕色:大地、厚朴

  二、网页颜色的使用风格

  不同的网站有着自己不同的风格,也有着自己不同的颜色。网站使用颜色大概分为几种类型:

  1、 公司色
  在现在企业中,公司的CI形象显得尤其重要,每一个公司的CI设计必然要有标准的颜色。比如新浪网的主色调是一种介于浅黄和深黄之间的颜色,同时形象宣传、海报、广告使用的颜色都和网站的颜色一致。再比如国富投资公司的主色调是C:100%,M:60%,Y:0%,K:0%。这样的颜色使用到网站上显得色调自然、底蕴深厚。

  2、 风格色
  许多网站使用颜色秉承的是公司的风格。比如海尔使用的颜色是一种中性的绿色,即充满朝气有不失自己的创新精神。女性网站使用粉红色的较多,大公司使用蓝色的较多……这些都是在突出自己的风格。

  3、 习惯色
  这些网站的颜色使用很大一部分是凭自己的个人爱好,以个人网站较多使用,比如自己喜欢红色、紫色、黑色等,在做网站的时候就倾向于这种颜色。每一个人都有自己喜欢的颜色,因此这种类型称为习惯色。

  三、设计用色十例

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/html/)

三、设计用色十例

  以下我将分别介绍十个配色较好的网站,大家可以学习和借鉴一下,培养对色彩的敏感以及独到的审美能力。

   

  1)这是个大型的NBA网站。通常我们经常看到的此类网站以白色为背景,但是这个网站却用灰黑色RGB为(48,48,48/#333333)(以下颜色都用RGB表示),文章标题用色为RGB为(203,201,153/#CCCC99),菜单使用的RGB为(112,119,112/#707770)。这样的配色可以显示独特的个性,又不失大型网站的风采。如图1



图1

    

  2)下面是一个娱乐类的综合性网站UGO,他的配色方案是背景色为黑色RGB为(0,0,0)中嵌套RGB(0,0,82),字体白色RGB(255,255,255),菜单为RGB(77,114,159)。这样的虽以黑蓝为主色调,但是配以漂亮的图片,给人的感觉是生机盎然,充满了互动色彩和青春气息。如图2。  



图2

      3)下面的这个网站是大名鼎鼎的微软公司网站,微软不仅软件做的好,连网页制作也是世界一流。他的每一个网页都是制作的样板。从网页我们就可以看出微软公司的风格、作风,以及雄厚的实力。背景颜色使用蓝色RGB为(0,151,254),菜单为黑色RGB(0,0,11),菜单为灰色RGB(200,200,200),字体为黑色RGB(0,0,0),如图3。

展开更多 50%)
分享

猜你喜欢

网页设计配色精彩十例

Html CSS布局 Div+CSS XHTML
网页设计配色精彩十例

网页设计配色基本概念 网页设计怎么配色

网页设计 配色 设计
网页设计配色基本概念 网页设计怎么配色

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

网页设计配色应用——色调

Web开发
网页设计配色应用——色调

网页设计高级布局40例参考

Web开发
网页设计高级布局40例参考

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

网页设计配色基础:RGB与HSB

Web开发
网页设计配色基础:RGB与HSB

网页设计的十要十不要

Web开发
网页设计的十要十不要

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

在word中如何控制graph控件

在word中如何控制graph控件

Eric的无限级Tree演示

Eric的无限级Tree演示
下拉加载更多内容 ↓