网站色彩设计与搭配技术（上）
网页访客第一眼看到的网站，不是优美的版式或者美丽的图片，而是网页的色彩。可见网页色彩对于网页设计是多么重要，本篇重点讲述网页色彩设计与搭配的技术。
在任何一个设计中，色彩对视觉的刺激都起到的是第一信息传达的作用。网页中的色彩设计是最直接的视觉效果，不同颜色的运用会给人以不同的感受。
高明的设计师会运用颜色来表现网站的理念和内在品质。为了能更好地应用色彩来设计网页，需要掌握以下色彩基础知识。
一、认识色彩
自然界中的颜色五颜六色、千变万化，比如红色的玫瑰，蓝色的大海，橙色的橘子……但最基本的色彩其实只有3种：红、黄、蓝。其他的色彩都可以由这3种色彩调和而成，通常称这3种色彩为“三原色”。
大家平时看到的白色光经过分析，在色带上可以看到，它包括红、橙、黄、绿、青、蓝、紫7种颜色，各种颜色之间自然过渡，其中红、绿、蓝是三原色，三原色通过不同比例的混合可以得到各种颜色。
现实生活中的色彩大致可以分为彩色和非彩色两种，其中黑、白、灰属于非彩色系列，其他的色彩都属于彩色系列。任何一种彩色都具备三个特征：色相、明度和饱和度，非彩色只有明度属性。
同一色相的色彩调整一下亮度或纯度很容易搭配，如深绿、暗绿、草绿、亮绿。例如，一些购物、儿童类网站用的是一些鲜亮的颜色，让人感到绚丽多彩、生气勃勃。明度越低，则颜色越暗。明度主要用于一些游戏类网站，可使网站充满神秘感。
非彩色只有明度属性，没有色相和饱和度属性。那么网站设计时用彩色还是非彩色好呢？根据专业研究表明：彩色的记忆效果是黑白色的3.5倍。也就是说，在一般情况下，彩色页面相比黑白页面更加吸引人。
通常是将主要内容（比如文字）用非彩色（黑色），边框、背景、图片这些用彩色。这样整体页面显得不单调，和谐统一。
二、网页的安全颜色
在网页中，常以RGB模式来表示颜色的值，RGB表示红（Red）、绿（Green）、蓝（Blue）三原色。通常情况下，RGB各有256级亮度，用0~255表示。
对于单独的R、G或B而言，当数值为0时，代表这种颜色不发光；如果为255，则代表这种颜色为最高亮度。当RGB这3种色光都发到最强的亮度时（RGB值为255、255、255），表示纯白色，用十六进制数表示为“FFFFFF”。
相反，纯黑色的RGB值是0、0、0，用十六进制数表示为“000000“。纯红色的RGB值是255、0、0，意味着只有红色R存在且亮度最强，G和B都不发光。同理，纯绿色的RGB值是0、255、0，纯蓝色的RGB值是0、0、255。
按照计算，256级的RGB色彩总共能组合出约1678万种色彩，即256256256=16777216，通常也被简称为1600万色或千万色，也称为24位色（2的24次方）。既然理论上可以得出16777216种颜色，那为什么又出现了网页安全颜色范畴为216种颜色呢？这是因为浏览器的缘故。
网页被浏览器识别以后，只有216种颜色能在浏览器中正常显示，多于这个范围的颜色有的浏览器显示时就可能发生偏差，不能正常显示。因此将能被所有浏览器正常显示的216种颜色称为网页安全颜色范畴。
现在浏览器的性能越来越高，网页的安全颜色范畴也越来越广，但最安全的还是216种颜色。在Dreamweaver中，提供了具有网页安全颜色范畴的调色板，可将网页的颜色选取控制在安全范围之内。
RGB模式是显示器的物理色彩模式，这就意味着无论在软件中使用任何色彩模式，只要是在显示器上显示，图像最终就是以RGB方式出现。
网页色彩的搭配
打开一个网站，给用户留下第一印象的既不是网站的内容，也不是网站的版面布局，而是网站的色彩。色彩对人的视觉效果非常明显。一个网站设计得是否成功，某种程度上取决于设计者对色彩的运用和搭配。因为网页设计属于一种平面效果设计，在平面图上，色彩的冲击力是最强的，它最容易给用户留下深刻印象。
三、如何处理色彩
色彩是人的视觉中最敏感的要素。网页的色彩处理得好，可以锦上添花，达到事半功倍的效果。
1.色彩的感觉
①色彩的冷暖感
红、橙、黄代表太阳、火焰；青、蓝、紫代表大海、晴空；绿、紫代表不冷不暖的中性色；无色系中的黑代表冷，白代表暖。
②色彩的软硬感
高明度，高纯度的色彩能给人以软的感觉，反之则感觉硬。
③色彩的强弱感
亮度高的明亮、鲜艳的色彩感觉强，反之则感觉弱。
④色彩的兴奋与沉静
红、橙、黄偏暖色系，高明度，高纯度，对比强的色彩感觉兴奋；青、蓝、紫偏冷色系，低明度，低纯度，对比弱的色彩感觉沉静。例如，下图为大气漂亮的果农蔬菜基地公司网站（该网站由阿里云模板建站产品-「云·速成美站」提供）
⑤色彩的华丽与朴素
红、黄等暖色和鲜艳而明亮的色彩能给人以华丽感；青、蓝等冷色和浑浊而灰暗的色彩能给人以朴素感。
⑥色彩的进退感
对比强、暖色、明快、高纯度的色彩代表前进，反之代表后退。对色彩的这种认识早在10多年前就已经被国外众多企业所认可和接受，并由此产生了色彩营销战略。
许多企业将此作为市场竞争的有利手段，和再现企业形象特征的方式，通过设计色彩抓住了商机。像绿色的“鳄鱼”、红色的“可口可乐”、红黄色的“麦当劳”以及黄色的“柯达”等。在欧美和日本等发达国家，设计色彩早就成了一种市场竞争力，被广泛适用。
2.色彩的季节性
春季处处是生机，所以会流行一些活泼跳跃的色彩；夏季气候炎热，人们渴望凉爽，所以流行以白色和浅色调为主的清爽亮丽的色彩；秋天秋高气爽，流行的是沉重的暖色调；冬天气候寒冷，深颜色有吸光、传热的作用，人们渴望能暖和一些，喜欢穿深色衣服。
这就很明显地形成了四季的色彩流行趋势，春夏以浅色、明艳色调为主；秋冬以深色、稳重色调为主。每年色彩的流行趋势都会因此而分成春夏和秋冬两大色彩趋向。
3.颜色的心理感觉
不同的颜色会给网站访客不同的心理感受。
①红色
红色是一种激奋的色彩，代表热情、活泼、温暖、幸福和吉祥。红色极易引起人的注意，容易使人兴奋、激动、热情、紧张和冲动，也是一种容易给人造成视觉疲劳的颜色。
②绿色
绿色代表新鲜、充满希望、和平、柔和、安逸和青春，显得和睦、宁静、健康。绿色具有黄色和蓝色两种颜色成分。在绿色中，将黄色的扩张感和蓝色的收缩感中和，将黄色的温暖感与蓝色的寒冷感相抵消。绿色和金黄、淡白搭配，可产生优雅、舒适的气氛。
③蓝色
蓝色代表深远、永恒、沉静、理智、诚实、公正、权威，是最具凉爽、清新特点的色彩。蓝色和白色混合，能体现柔顺、淡雅、浪漫的气氛（天空的色彩）。
④黄色
黄色具有快乐、希望、智慧和轻快的个性。它的明度最高，代表明朗、愉快、高贵，是色彩中最为娇气的一种色。只要在纯黄色中混入少量的其他色，其色相感和色性格均会发生较大程度的变化。
⑤紫色
紫色代表优雅、高贵、魅力、自傲和神秘。在紫色中加入白色，可使其变得优雅、娇气，并充满女性魅力。
⑥橙色
橙色也是一种激奋的色彩，具有轻快、欢欣、热烈、温馨、时尚的效果。
⑦白色
白色代表纯洁、纯真、朴素、神圣和明快，具有洁白、明快、纯真、清洁的感觉。如果在白色中加入其他任何色，都会影响其纯洁性，使其性格变得含蓄。
⑧黑色
黑色具有深沉、神秘、寂静、悲哀、压抑的感受。
⑨灰色
在商业设计中，灰色具有柔和、平凡、温和、谦让、高雅的感觉，具有永远流行性。在许多的高科技产品中，尤其是和金属材料有关的，几乎都采用灰色来传达高级、科技的形象。使用灰色时，大多利用不同的参差变化组合和其他色彩相配，才不会过于平淡、沉闷、呆板和僵硬。
色彩在饱和度、亮度上略微变化，都会产生不同的感觉。以绿色为例，黄绿色有青春、旺盛的视觉意境，而蓝绿色则显得幽静、深沉。
色彩设计既是一项技术性工作，也是一项艺术性很强的工作。因此在设计网页时，除了要考虑网站本身的特点外，还要遵循一定的艺术规律，从而设计出色彩鲜明、个性独特的网站。
以上，是有关网站色彩设计（选取）的基础内容，掌握这些以后就可以轻松设计出符合网站风格的色彩，也可以将这些知识运用到生活中的其他地方。限于篇幅，我将本节内容分为了上下两篇，此为上篇。关于网站色彩搭配技术的内容我会在下篇文章中讲述，请持续关注。
以上内容是阿里云建站技术研发人【北柯】原创， 转载请注明出处。
网站色彩设计与搭配技术（上）相关推荐
- 网站色彩设计与搭配技术（下）
近些年来我一直在建站这个小圈子深耕,我负责或者参与过的网站不下百个,对国内国外的一些网站设计技巧了如指掌.下面这篇文章是我总结出的关于网站色彩搭配的精华所在,供大家参考,希望你在建站这条路上少走弯路. ...
- 主板上的jrgb接口干什么用_用思维导图，解读选配主板的过程，重点解读兼容与接口的搭配技术...
本文用思维导图,解读选配主板的过程,重点解读兼容与接口的搭配技术,选择了5块不同主板,说明主板内容.重点提示,主板决定一台计算机能否稳定运行. 任务描述:重点解读兼容与接口的搭配技术,解读选配主板的过 ...
- 个人网站模板颜色搭配技巧
在网站建设中,网站是由页面组成的,许多网站都是通过应用模板进行布局的.由于应用模板构建网站,它节省了大量的时间,并将提高网站的构建速度.然而,在模板构建中,颜色匹配是一个非常重要的组成部分.由于网站选 ...
- java旅游网站毕业论文,基于JAVA技术的旅游网站的开发.doc
摘要: 这次毕设主要是为了实现基于JAVA技术的旅游网站的开发,方便人们近距离的出行游玩.网站的开发过程中用到了很多方法技术,最主要的是JAVA技术,用于编写后台的功能实现代码:框架采用的是Sprin ...
- 从技术上还原入侵雅虎服务器是怎么一回事
本文讲的是从技术上还原入侵雅虎服务器是怎么一回事,5月20日晚上,我花了几天时间研究雅虎的Messenger应用程序.但是我依然无法搞清楚背后的工作管理.所以我走出了外面走走,决定找到一个新的目标.我 ...
- 把 14 亿中国人都拉到一个微信群，程序员在技术上能实现吗？
点击蓝色"架构文摘"关注我哟 加个"星标",每天上午 09:25,干货推送! 根据国家统计局的数据,截至 2017 年末,中国大陆总人口为 13 亿 9008 ...
- 数据分析师前景怎样？为什么企业每年都会在数据分析技术上“砸钱”？
小编先从一张图片的数据(数据来源:BOSS直聘)和大家讲起. 对于以上的企业,想必大家并不陌生.以上企业涉足了物流.建筑.教育和电商等多个行业,他们都在以高薪诚聘数据分析师.同样的招聘信息还有很多,在 ...
- 颠覆平庸：在技术上持续精进
本文很长,约 9200 字,需要认真阅读 30 分钟,赶时间的朋友,看看下面的导图也会有一些帮助. 转载请联系订阅号"程序视界"获得授权,并在文章开始处声明作者信息:安晓辉(fo ...
- 颠覆平庸 在技术上持续精进
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 本文很 ...
最新文章
- Hazelcast集群服务(2)
- 笔记 VRRP基本原理 主备备份 负载均衡
- Binary Search O(log n) algorithm to find duplicate in sequential list?
- window 注册表五大类
- Centos7 Docker Jenkins ASP.NET Core 2.0 自动化发布和部署
- ITK:单相Chan和Vese密集域水平集分割
- 跟计算机断层扫描相关的技术,计算机断层扫描技术（简称PET）
- 网络数据采集（AngleSharp）-使用AngleSharp做html解析
- 数学江湖中的“独孤九剑”
- C#常用类库----CSV文件操作类
- 开源 免费 java CMS - FreeCMS1.5 标签 visit
- ES6系列：什么是ES6? 新手应该怎么理解
- str split函数 php,怎么在php中利用str_split函数分割字符串
- ORA-01031:insufficient privileges
- Java设计模式4：单例模式
- axvspan函数--Matplotlib
- SIFT、SURF、Harris、BRIEF、FAST、DAISY、FAST经典描述子简介
- mac 剪切移动文件
- 每天坚持“踮脚尖”，时间久了，身体会收获什么？每天踮多久？
- BMC-web的介绍（一）