|
网站建设首页
|
网站制作
|
代码
|
教程
|
色调
|
SEO优化
|
推广
|
建设
|
您现在的位置: 华玉生活网 >> 网站建设 >> 色调 >> 正文>> 繁體中文

网页设计配色精彩十例

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

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

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

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

  二、网页颜色的使用风格

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

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

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

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

  三、设计用色十例

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

 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。

图3   4)现在介绍的网站相对简单,但是她的用色也别具匠心,现在我们来看一看,整体上使用的是白色RGB(255,255,255),辅助色为RGB(79,88,95),菜单色为RGB(48,64,64)和RGB(0,81,111)字体使用的是RGB(83,86,91)。虽然简单,但颜色搭配非常的科学合理。如图4

图4  

 5)下面的网站采用黄色调为主,很体现公司的个性,现在我们就来看一看她的颜色搭配。主色调为黄色RGB为(255,199,48/#FFC730),辅助色调为RGB(49,102,46)字体为棕色RGB(153,103,0),中间再配以抽象的图片,显得个性十足但又不单调。如图5

图5  

 6)橘红色如果运用得当的话是一种非常使用于网页上的颜色。下面的这个网站就是一个非常著名的例子。他的主色调为RGB(255,151,0)辅助色调为RGB(255,103,4),菜单RGB为(252,200,0)。字体使用黑色RGB为(0,0,0)。此种配色显得主人较为前卫,色彩热烈,给人的震慑力较强。如图6

图6

  7)鲜红色也是一种震撼感很强茨颜色,如果搭配不当,也可能使网站没有风格和特点。下面的这个网站就是使用红色比较好的网站。我们来看看他的颜色搭配。他使用的主色调是RGB(200,9,0),配以抽象的图形,文字使用的是RGB(213,229,167)显得美观而不失独特,大气而不逼人。如图7图7  

 8)下面介绍的这种色调是我们制作网页的时候不会经常用到的颜色,如果使用到你的网页中,肯定会给人耳目一新的感觉。他的主色调为RGB(144,151,97)辅助色调为RGB(173,168,112)边饰为黑色RGB(0,0,0)字体为黑色RGB(0,0,0)。这样的搭配显得风格独特,颜色和谐而庄重。如图8

图8  

 9)下面的设计更加的简单化,但是颜色的使用使网页并不呆板,反而让人感觉到一股浓浓的生活和家庭气氛,使人置身于美丽和爱中。他的主体是由两种颜色构成,分别是RGB(239,200,161)和RGB(201,254,200)。如此简单,但是却栩栩如生,跃然网上。如图9

图9

10)下面举出这个例子是想证明一个道理——只要你有足够的想象力,你就能够设计出漂亮的网页。目前在网上非常流行一句话就是网页的搭配不要超过四种主要颜色,否则就有杂乱之感。下面的这个网站远远的超过了三种颜色,但是她并不失美丽。因此重要的还是色彩的驾驭能力。下面这个例子的菜单就使用了7种颜色,但是我们看到的网页并不杂乱,相反感觉作者很有创意。如图10

图10

  网页设计的颜色搭配需要在实践中不断的摸索和不断的创新,认真学习别人的先进方法和经验,可以快速的提高我们的制作水平。可以说。网页颜色搭配得当,成功也就走了一半。如果大家有什么好的方法,别忘了和别人交流,让我们共同进步!


瑞达币购买
桂山秋竹_唐年桂2023年
桂北云雾图_唐年桂202

  • 扩展阅读
  • 上一篇文章:
  • 【返回网站首页】 【返回色调】
  • 下一篇文章:
  • 【字体: 】【】【发表评论】【加入收藏】【告诉好友】【打印此文
    文章 软件 电影 商品

    相关文章

    本站公告

    • 扫一扫,打赏给我们,谢谢!

      本站2016年12月16日起取消ruida.org.cn域名,该域名正式作废,该域名发布任何信息与本站无关。


      启用ruida.orghy928.net域名;

      瑞达网,瑞达科技网宣

    最 新 热 门

    附页内镶内容
    健康养生 商场新品 股市K线、指标知识
     六种药酒配制法[11月7日]
     气血双补党参、麦冬、黄芪炖[11月29日]
     参桂再造丸_红参、肉桂、麻黄[11月29日]
     臂丛神经痛该怎样治疗[11月29日]
     舒筋络酊、百宝丹擦剂、参桂[11月29日]
     臂丛神经痛针灸治疗[11月29日]
     枳椇子别名:鸡爪梨,鸡爪果[11月29日]
     三七、丹参、西洋参功效与作[8月17日]
     枸杞泡姜芽(嫩姜)的做法及功[5月20日]
     十二原穴,可治疗全身疾病_中[2月2日]
     瑞达币购买
     桂山秋竹_唐年桂2023年新作品
     桂北云雾图_唐年桂2023年新作品
     广西2019年《高考指南》+《招生计
     金士科前置过滤器
     金牛前置过滤器
     USB口24系列编程器第二版含USB延
     液晶电视、液晶显示器图纸、维修
     彩电、显示器、DVD、EVD打印机等
     高清CRT彩电、显示器图纸刻录 4G
     [理财]分享:各种短视频赚钱方法评论、关注…
     [会员]股票证券投资专业交易实战控制系统
     [理财]2023年新版1分2分5分硬币回收价格表(…
     [理财]2023年新版1分2分5分硬币回收价格表(…
     [理财]2022 年新版1分2分5分硬币回收价格表…
     [理财]微信收款码如何开通商业版收信用卡费…
     [指标]R平方_基金指标
     [指标]标准差_基金指标
     [指标]平均回报_基金指标
     [基金]一些重要基金指标的解读入门
    装修案例 网站建设 电器维修
     一般水电安装几个常用尺寸[1月29日]
     三相电表接法及度数的正确读…[5月8日]
     万能通用卧室房门锁更换步骤…[2月22日]
     乳胶漆的八大施工步骤及涂刷…[2月14日]
     旧墙翻新步骤及注意事项[2月14日]
     屋面防水施工工艺流程及注意…[1月16日]
     专利产品“防污吸气帽”新产…[1月8日]
     鲁班尺吉数对照表高清图片查…[10月29日]
     砂浆胶作用与危害[9月21日]
     4种处理水泥地面起砂方法[9月21日]
     网页html点击切换显示内容完[11月7日]
     动易SiteWeaver6.6网站管理系[7月31日]
     中国阴历农历JS支持 HTML网页[2月26日]
     java script error 容错处理[2月15日]
     几款还不错的网页特效显示日[2月14日]
     图片可以调大小的代码[12月14日]
     动易SW6.8网站系统改自适应支[11月20日]
     网站建设_套餐服务[12月4日]
     网站建设-费用明细[12月4日]
     不显示出来的代码[12月3日]
     联想 小新Air 14 2019笔记本…[6月15日]
     滚筒洗衣机脱水声音大原因及…[4月17日]
     智能电视不能开机强制恢复出…[1月16日]
     各大品牌智能电视机恢复出厂…[1月16日]
     洗衣机自己排水或不存水漏水…[6月15日]
     海尔冰箱出现-03还滴滴报警[5月29日]
     TCL电视通用教程安装教程[2月2日]
     TCL L43V7300A-3D液晶彩电出…[2月2日]
     先锋液晶电视LED-32B550无光…[1月17日]
     智能电视主板的应用与维修(…[1月11日]
    电器资料 下载 读书
     视得安750D6对讲门铃工作原理…[9月13日]
     什么是量子芯片和光子芯片[5月14日]
     沃尔沃S90汽车遥控钥匙失灵的…[1月19日]
     LED显示屏瑞合信PLus单双色全…[12月22日]
     Windows 照片查看器无法显示…[8月6日]
     已经设置IE主页,但是打开还…[7月6日]
     如何调整空压机压力?空压机…[6月8日]
     剪映-视频编辑软件手机版使用…[5月28日]
     锂电池保护板作用及同口和分…[3月18日]
     怎么样让电脑显示农历?win7…[1月26日]
     [电影]《抓娃娃》高清电影
     [联想]Lenovo S540-14API Compl 
     [书籍]《墨子》原文注释译文
     [LED条屏]瑞合信单双色/全彩控制系统
     [LED条屏]LED显示屏瑞合信手机APP6.
     [书籍]全本新注聊斋志异
     [书籍]广西2023年高考指南 招生计
     [书籍]个人防护手册(第二版)
     [书籍]关于印发新型冠状病毒肺炎
     [书籍]新型冠状病毒肺炎防控方案
     广西高考2024~2022年历史类([6月25日]
     近百年龙年龙月龙日龙时具体[10月9日]
     广西2024年普通高校招生录取[6月25日]
     卷十五 杂守 第七十一原文注[6月11日]
     卷十五 号令 第七十原文注释[6月11日]
     卷十五 旗帜 第六十九原文注[6月11日]
     卷十五 迎敌祠 第六十八原文[6月11日]
     卷十五 第六十七(今阙)原文注[6月11日]
     卷十五 第六十六(今阙)原文注[6月11日]
     卷十五 第六十五(今阙)原文注[6月11日]
    珠宝玉器 在线电视台
     鸡血石与鸡血玉有什么区别[6月12日]
     鸡血玉[6月12日]
     鸡血石 (bloodstone)[6月12日]
     什么是莫桑石(Moissanite)[6月12日]
     可以戴钻石洗澡吗[1月22日]
     钻石如何保养才好呢?[1月22日]
     PT容易花的问题和钻戒保养问…[1月22日]
     切工 钻石的雕刻艺术[1月22日]
     如何保养好钻戒[1月22日]
     钻戒保养方法[1月22日]
     中央体育台
     中央新闻台
     宁夏卫视
     湖北卫视
     西藏卫视
     辽宁卫视
     河北卫视
     北京卫视
     政法频道
     农民频道
     湖南经视
     湖 南 台
     河南频道
     湖南卫视
     兵团卫视
     江苏卫视
     旅游卫视
     湖南都市
     七彩戏剧
     动漫秀场
     游戏风云
     法制天地
     魅力音乐
     新 娱 乐
     南 方 TV
     浙江卫视
     齐鲁频道
     山西影视
     东南卫视
     上海卫视
     贵州电视台
     重庆电视台
     山东卫视
     《抓娃娃》在线电影
     流浪地球2剧情介绍
     《万里归途》完整版
     《阿凡达2:水之道》耗资3.1
     2021港剧《梅艳芳》5集全.HD
     误杀2 -电影-完整版视频在线
     亲爱的/亲爱的小孩/打拐/家之
     《第一炉香》-电影-完整版视
     《扬名立万》-电影-完整版视
     长津湖-电影-完整版视频在线
    网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
        没有任何评论

    | 服务声明 | 充值中心| 华安五金电器 | 收费标准| 论坛| 留言| 实用查询| 会员中心| 下载帮助| 设为首页|

    技术支持:瑞达科技 即时交谈QQ:237013889 QQ群:13810759 E-Mail:237013889@qq.com
    非盈利网站,如有侵权,请来信来电告知,第一时间处理,谢谢!
    桂ICP备17008104号 华玉生活网网站统计
    tj