色彩学基础——网页配色原理
更新时间:2023-05-25 03:57:01 阅读量: 实用文档 文档下载
- 色彩学基础与实践推荐度:
- 相关推荐
基础的介绍了色彩学的一些知识,以及网页配色的原理和方法,指导网页制作者合理的搭配网页色彩。
随着因特网的发展与普及,越来越多的企业和个人都把与其相关的信息组织成五彩缤纷的网页,用于在网络上进行展示以达到信息交流的目的。
关于网页的制作技术,无论是Frontpage,Dreamwaver,Fireworks,还是Asp,Javascript,相信你都已经游刃有余。但在网页的设计过程中,你是否有过为了几种色彩的巧妙搭配而一筹莫展呢!
网页色彩的完美搭配,对于一个图形艺术设计师来说,那简直就是小菜一碟。但对于一个既想拥有自己的完美页面而又没有专业美术功底的普通大众来讲,那可就不是一件简单的事情了。
本文从“色环”的研究角度出发,就网页设计中如何利用色彩搭配的原则问题进行探讨,相信你看了此文之后,对你的网页设计能起到一定的帮助作用。
●基本色
我们知道可以把一条连续彩虹中的“可视光”分解成从蓝到红的色谱(图1)。
我们也看到,或许应用过,通过把两种或两种以上的颜色混合在一起,就可以得到一种特殊的颜色。从本质上讲,色环(图2)就是色谱可以看到的颜色所形成的线性连续环(如图2所示)。
一个色环通常包括12种明显不同的颜色。而对于艺术设计师充分理解的色环和色论的重要方面,也许不会被我们中的网页设计者们能够充分欣赏。缺少多这方面的了解,你将会把事情搞乱。
●三原色
从定义上讲,三原色是能够按照一些数量规定合成其他任何一种颜色的基色。为了确定三原色,你必须首先确切明确哪一种颜色是你正在使用的中间色。在上小学时,你可能就知道了三原色:红、黄、蓝,并且你现在用于展示的,仍然是红、黄、蓝三原色。但是如果你有喷墨打印机的话,花点时间把它的盖子打开,看看它的墨盒。你能看到红、黄,蓝吗?不能!你可能看到的是四种墨色:蓝绿(青)色、红紫(洋红)色、黄色和黑色。颜色的不同是由于你的电脑用的是正色,而你的打印机用的是负色。显示器发出的是彩色光,而纸上的墨则吸收灯光发出的颜色。更进一步的解释就超出了本文要探讨的范围。
除了发射与吸收光的不同之外,本文涉及的概念同样适用于正色和负色模式,出于本文的写作目的,我们仅探讨着正色模式的三原色:红、绿、蓝。
基础的介绍了色彩学的一些知识,以及网页配色的原理和方法,指导网页制作者合理的搭配网页色彩。
●次色
为了构造色环,我们将认识任两种相临基色通过合成得到的三种颜色,它们称作为“次色”:蓝绿(青)色、红紫(洋红)色和黄色。正色域中的“次色“同样可以作为负色域中的“原色”。由此你可以得出结论,正色中的次色就是负色中的原色。这是正色和负色模式之间的所有内部关系。
●三色
最后我们可以找出色环中当前填充色之间的中间色。幸运地是,三色对于正色域和负色域来讲是没有什么区别的。现在我们已经定义出所使用的12点色环之后,就能够讨论颜色间的相互关系了。
●近似色
近似色可以是我们给出的颜色之外的任何一种颜色。如果从橙色开始,并且你想要它的两种近似色,你应该选择红和黄。用近似色的颜色主题可以实现色彩的融洽与融合,与自然界中能看到的色彩接近起来。
●补充色
正如我们所知道的相对色一样,补充色是色环中的直接位置相对的颜色。当你想使色彩强烈突出的话,选择对比色比较好。假如你正在组合一幅柠檬图片,用蓝色背景将使柠檬更加突出。
基础的介绍了色彩学的一些知识,以及网页配色的原理和方法,指导网页制作者合理的搭配网页色彩。
●分离补色
分离补色由两到三种颜色组成。你选择一种颜色,就会发现它的补色在色环的另一面。你可以使用补色那一边的一种或多种颜色。
●组色
组色是色环上距离相等的任意三种颜色。当组色被用作一个色彩主题时,会对浏览者造成紧张的情绪。因为三种颜色形成对比。上面所讲的基色和次色组可以被称作两组组色。
●暖色
暖色由红色调组成。比如红色、橙色和黄色。它们给选择的颜色赋予温暖、舒适和活力,它们也产生了一种色彩向浏览者显示或移动,并从页面中突出出来的可视化效果。
基础的介绍了色彩学的一些知识,以及网页配色的原理和方法,指导网页制作者合理的搭配网页色彩。
●冷色
冷色来自于蓝色色调。譬如蓝色、青色和绿色。这些颜色将对色彩主题起到冷静的作用,它们看起来有一种从浏览者身上收回来的效果,于是它们用作页面的背景比较好。
需要注明的是,你将发现在不同的书中,这些颜色组合有不同的名称。但是如果你能够理解这些基本原则,它们将对你的网页设计是十分有益的。
●抽取对比
对比是在两种临近色间被认识到的不同色彩。因为白色和黑色并不是真正的颜色,它们被说成是非色彩的对比。白和黑也表现出对比的最高水平。色环中的补色表现的是高色彩的对比。这就是当你增加压缩比后把图象中的白色和黑色信息减少所造成的.JPG压缩算法使彩色信息减少的原因。
图12 白到黑:非色彩的对比坡
图13 采用蓝色的单色对比坡
当你使用一种单色,然后增加或降低亮度时,单色的对比就被提取出来了。
网页设计中的对比非常重要。并且有不同的应用方式,所有这些都基于上面所列的其他颜色。每个人都清楚的是,白底黑字看起来非常容易,这就是你所阅读的大部分印刷材料中为什么都是白底黑字的原因的一部分。同样地,黑底白字产生强烈对比,但是它阅读起来比较困难。因为黑色相对白色和其它的颜色来讲,看起来有一种沉重感和些许的压抑感。从图14所示的两种对比效果来看,相信你已经对对比色就有了进一步的体会。
图14 高对比色的搭配
类似的对比效果也同样发生在暖色和冷色之间。暖色有些微冲出荧屏的感觉,而冷色被认为有从荧屏后退的感觉。这就意味着暖色/暗色适合于文本,而冷色/亮色更适合于用作背景。但是,这样的方式不是十分固定的。让我们看看选择这两种对比色的一个简单例子。用一种(颜色)作为背景,用另一种(颜色)作为文本。
基础的介绍了色彩学的一些知识,以及网页配色的原理和方法,指导网页制作者合理的搭配网页色彩。
图15 补色的搭配
你将注意到得到的结果是十分糟糕的。这两种颜色之间不能形成恰当的对比,它们看起来就象伸向你的拳头,明确地讲,它们不是一个好的结合。但是保持这基本相同的颜色不变,调整一下它们的亮度/暗度,使它们之间更一致一些(见下图)。
图16 调整色的搭配
你可以看出这是一种较好的色彩搭配。这不但是从分析角度的判断思考,更是从视觉观点进行的阐释。
在背景图象上添加文本,对比色的使用也许是最重要的。使用这些对比的概念,你需要记住的是,页面上的文本成分必须和背景图象上的所有颜色形成足够强烈的对比。例如,你仅使用了上面所描述的一套“组色”,就会有三种显然的对比色给页面造成的糟杂喧嚣感。
图17 组色的搭配背景图象上的文本
一种较好的方法是去使用一套分离补色,近似色作为背景,补色作为文本(色)。在这种方式下,背景色之间完全地融合在一起,不会招来人们特别明显的注意,并且能够使文字突出出来。
图18 分离补色的搭配,文字在背景图象的上面
了解色彩理论,可以在你为你的站点选取一种主题颜色时起到作用。依赖于你需要的背景色,导航元素和不同的文本风格,你可以从色环中选用对比模式。那么使用一些比较安全的颜料图标,你可以容易地选取较暗较亮的颜色去增强你元素间的对比而达到一个适当的水平。有许多搭配适合于你的页面―提供一个好的色彩应用而不至于使你的用户头疼。 通过上面的讲述,你对网页设计中色彩的运用,应该有了一个较全面的了解。那你就马上开始行动吧,用你的双手与慧眼,把你的网站设计的更加靓丽多彩!
正在阅读:
色彩学基础——网页配色原理05-25
传动带设计手册 - 图文01-29
2014年南航复试03-18
焦化厂化产车间经济责任制考核细则05-01
大学体育网球专项理论题04-17
用VC++设计与实现扫雷系统03-14
- 教学能力大赛决赛获奖-教学实施报告-(完整图文版)
- 互联网+数据中心行业分析报告
- 2017上海杨浦区高三一模数学试题及答案
- 招商部差旅接待管理制度(4-25)
- 学生游玩安全注意事项
- 学生信息管理系统(文档模板供参考)
- 叉车门架有限元分析及系统设计
- 2014帮助残疾人志愿者服务情况记录
- 叶绿体中色素的提取和分离实验
- 中国食物成分表2020年最新权威完整改进版
- 推动国土资源领域生态文明建设
- 给水管道冲洗和消毒记录
- 计算机软件专业自我评价
- 高中数学必修1-5知识点归纳
- 2018-2022年中国第五代移动通信技术(5G)产业深度分析及发展前景研究报告发展趋势(目录)
- 生产车间巡查制度
- 2018版中国光热发电行业深度研究报告目录
- (通用)2019年中考数学总复习 第一章 第四节 数的开方与二次根式课件
- 2017_2018学年高中语文第二单元第4课说数课件粤教版
- 上市新药Lumateperone(卢美哌隆)合成检索总结报告
- 配色
- 色彩
- 原理
- 网页
- 基础
- 运动神经元病21例
- 2011上海高考语文作文试题及范文
- SEO教程之seoer创建百度百科的三大注意事项
- 中国物流设备网观后感
- 铸造技术培训内容
- 浅析我国农村剩余劳动力转移问题及对策
- XX项目08年运营报告
- 南京万科提案 房地产策划案
- 模拟电子技术课程设计报告
- 《角的分类》教学设计
- 3.1.2 文本信息的加工与表达1
- 中国免疫规划信息管理系统乙肝疫苗录入简明使用手册
- 2014版《中国泌尿外科疾病诊断治疗指南》:前列腺炎诊断治疗指南
- 生活与艺术中的花教案
- 冯冲在全市“解放思想改革创新跨越发展大讨论”活动动员大会上的讲话
- 建设企业文化必须坚持以人为本
- 高中历史复习(罗斯福新政和当代资本主义新变化)
- 锻炼上肢力量的方法
- 癌细胞诱导分化_凋亡的新途径
- 辽宁省大连市第二十高级中学2014-2015学年高一英语上学期期末考试试题