不论你做什么样的设计,色彩都是一个不容忽视的问题。色彩以一种“隐蔽”的方式传达的各种信息,这些信息会影响观看者的心理和感受,左右他们的判断和选择,色彩对于设计而言实在太重要。这篇文章就要比较系统地介绍一些在网页设计中如何使用色彩的入门知识。

  色彩是设计者的得力助手,前提是应用得当。对于网站设计而言,色彩的重要性尤其突出,不过经常被粗心的站长忽视。我们经常说“第一映像最重要”,于是设计网站时,设计者经常会花很多精力制作一个“富于冲击力”的LOGO或者BANNER,当然,它们很重要。但是,访问者访问网站时的第一映像实际上并不来自这些LOGO或者BANNER,而是——色彩!

  好了,在了解了色彩对于网站设计的重要性之后,我们开始探寻色彩的奥秘。

  色彩入门

  首先让我们熟悉一下色彩的一些基本概念。

  三原色

  一切颜色都来自三原色:红、黄、蓝。
[img] [/img]
 在这个圆环中,相邻的两个原色相混合可以得到另外三个比较重要的颜色(下文将其称为二级原色):红+黄=橙,红+蓝=紫,蓝+黄=绿

让我们再深入一步,三原色和三种二级原色可以进一步混合得到更多的颜色,分别是橙红色、紫红色、蓝紫色、蓝绿色、橘黄色和黄绿色。这六种颜色可以称为三级原色。

按照同样的方式不断进行下去,这个圆环中颜色之间的分隔线就会消失,得到下图所示的“色彩圆环”,在一些绘图程序的调色板中我们可以看到这样的色彩圆环。

但是这个圆环仍然没有涵盖所有的颜色,对于圆环中的每一种颜色还有饱和度、亮度和灰度等的变化。也就是说,将上述圆环中的任意一种颜色和黑色、白色、灰色按照不同比例混合就可以得到更多的颜色,下面将详细介绍。
常用的色彩术语

  饱和度

  某种颜色的饱和度是指这种颜色所包含的基本颜色的多少。例如RGB值为(0,0,255)的蓝色是纯蓝色,他的饱和度是100%。随着饱和度的降低,颜色会越来越接近灰色。

灰度

  基本色彩和黑色进行不同程度的混合可以得到不同的灰度,例如

亮度

  基本颜色和白色进行不同程度的混合可以得到不同的亮度,例如::

色调

  基本颜色和灰色进行不同程度的混合可以得到不同的色调,例如:

色彩方案的种类

  不同网站应当使用不同的色彩方案,与站点的主题相吻合的色彩方案决不仅仅可以让网站 “更加好看”,更重要的是在访问者心目中建立对这个网站的感性认识。所以,色彩方案的选择决不能草率,而且色彩方案绝对是网站建设的第一个步骤。如果选择色彩方案时过于草率,甚至根本不对网站进行色彩方案的整体规划,你将不可能制作出一个真正优秀的网站。

  例如,一个销售婴儿用品的网站应当使用比较活泼的色彩方案,而一个艺术网站则应当使用比较执重的方案。

  按照色彩方案中色彩使用方式的不同,我们可以将色彩方案划分成多种类型,单色方案、相似色方案、补色方案和三合一色方案。

单色方案

  单色方案是指在网站设计中终止使用一种基本颜色,为避免单调,我们可以通过调整这种基本颜色的灰度和亮度来得到更多的颜色,由于整个颜色方案中事实上只有一种基色,因此这种方案称为单色方案。例如:


在Photoshop的色彩选择窗口中,我们可以这样进行建立单色方案。首先调整H(也就是Hue的缩写)后面的值来调整色调。注意,H的单位是度,也就是基本颜色在颜色环上所处位置的角度。

  设置好H的值之后,再调整B后面的数字调整亮度以及S后面的数字调整饱和度。注意,其中B和S的单位是百分比,也就是向基本颜色中添加白色和黑色的百分比。这样就可以得到一个单色方案了。

  下面来看两个使用单色方案的成功实例。


单色方案实例之一:

  这是一个女性网站,因此其基本颜色为粉红色,并通过调整粉红色的饱和度得到了其余几种颜色。总体颜色趋于淡雅,访问者的注意力会很自然地被吸引到几幅展示其产品的图片上。


单色方案实例之二:

  这个色彩方案使用的基色颜色较深,并通过修改其亮度获得其他两种颜色,并用最浅的颜色作为主体部分的背景,使其突出出来。

  总的来说,单色方案是一种比较稳重的方案,或者说比较保守的方案。单色方案给人整洁、经典的感觉,最适合于内容比较严肃的网站,比如政府网站,学术网站,企业网站,高雅艺术网站。

  特别值得一提的是,商业网站也比较适合使用此种颜色方案,因为这种方案可以给人一种稳定感,使访问者容易建立对网站的信任感。当然,这种方案也有其灵活的一面,当使用较浅的基色时,这种颜色方案也可以用于时尚类网站,传达简约清雅的观念相似色方案

  在色彩圆环上选择彼此相邻的几种颜色构成的配色方案就是相似色方案。例如橙色、橙红色以及橙黄色就可以组成一个相似色方案。由于相似色方案中包含了多种基色,如果再加上亮度和饱和度的变化,可以构成的颜色就非常多。

下面是相似色方案的实例。


相似色方案实例一:

  这个网站使用了由橙黄色、橙红色和橙色组成的配色方案。Bullseye是一家ISP服务商,面向普通客户。选用这种方案和行业内惯用的蓝色系形成鲜明对照,个性凸现。


相似色方案实例之二:

  这个网站使用了绿色和黄色这两种相似色构成配色方案。页面上很多绿色植物,因此文字使用了绿色,整个页面看上去自然清新,和网站的内容相得益彰。

  通常,相似色配色方案可以给人非常协调的感觉,因此在网站设计中非常常用。典型的运用方法就是,用一种颜色作为页面背景,而另外一种在颜色环中与其相邻的颜色作为前景色。除了上面介绍的绿色和黄色之外,蓝色和绿色以及红色和褐色也是比较常用的相似色配色方案。

转载于:https://www.cnblogs.com/arcana1985/archive/2007/05/15/747015.html

发一个色彩学的转帖.相当有感触相关推荐

  1. Google比Baidu快(发一个无聊的帖)

    一天又快过去,在这里发一个无聊的帖. 发现Google比Baidu快,这里的快我指的是被收录的情况. 昨天早上写了篇<Garmin Nuvi 350试用手记>,我去刷刷搜索引擎试试被收录的 ...

  2. 闲聊色彩学(Chromatology)

    (此处为人肉维护的镜像,原文请见:http://csbabel.wordpress.com/翻墙请用Google Reader查看:http://csbabel.wordpress.com/feed/ ...

  3. 发一个招聘软件开发人员的帖子

    又到年底了,员工和学生忙找工作,发一个招聘帖,以求志同道合者. 我们需要三类人: 1.系统架构师: 要求: A.3年以上工作经验: B.熟悉C\C++\VC语言: C.熟悉软件架构.设计模式.重构理论 ...

  4. 计算机专业勤学善思感悟,做一个勤学善思的人演讲稿

    做一个勤学善思的人演讲稿 李时珍一心为民,他为了改进<本草经>的不足,走遍了出产药材的名山,学到了许多书本上并没有记载的知识,增添了许多药理 学问.他花了整整27年的时间,终于编写成了一部 ...

  5. Photoshop学习笔记之色彩学的概念与常识

    色彩的种类 丰富多样的颜色可以分成两个大类:无彩色系和有彩色系. 1.无彩色系 无彩色系是指白色.黑色和由白色黑色调合形成的各种深浅不同的灰色.无彩色按照一定的变化规律,可以排成一个系列,由白色渐变到 ...

  6. 色彩学基础知识(转)

    源:色彩学基础知识 加法混色  采用红(Red).绿(Green).蓝(Blue)三种色光进行混色来显示其他颜色.色光越混合越亮,因此称为加法混色.电视.电脑的显示就采用加法混色原理. 红(R)绿(G ...

  7. 大年初七,发paper、学Python...分享一下你的学习计划吧~

    今天是大年初七,今天是人日,上天造物顺序一鸡二狗三羊...七人!快快恢复元气,努力工作! 欢迎参与今天的话题讨论:发paper.学Python...分享一下你的学习计划吧~ 欢迎留言,参与今天的话题讨 ...

  8. python有哪些方向、应该怎么学-终于找到深圳学Python,有几个方向?怎么从一个方向学到底...

    深圳学Python,有几个方向?怎么从一个方向学到底,近日很多临近毕业的大学生朋友来邮件询问关于深圳Python培训的一些事情,觉得很有代表性,所以就想探讨一下:为什么要选择深圳Python培训?经过 ...

  9. 发一个sgs0.9.9的例子

    发一个sgs0.9.9的例子 下载:http://code.google.com/p/hudo/downloads/list

最新文章

  1. air调用java,AIR2.0入门教程:与Java应用交互
  2. db2 linux 导入数据_「软件资料」-「软件使用」-Linux 导入、导出 MySQL 数据库命令...
  3. Hadoop_MapReduce的基本应用
  4. Consul 服务注册与发现02—— 服务提供者
  5. OSCache-JSP页面缓存(2)
  6. 五大板块(4)——链表
  7. Linux连接状态为syn_recv,linux 服务器 syn*** 大量SYN_RECV状态处理
  8. Linux Shell文本处理工具集锦
  9. macos无法验证此app不包含恶意软件_macOS 平台的一款后门样本(TinyTim)的分析
  10. python虚拟环境搭建learning_log_vscode Python 虚拟环境搭建
  11. TCP发送接收数据2
  12. 【微信扫码登录】以及【微信扫码支付】解决方案
  13. flash图片如何镜像翻转_FLASH 翻转动画
  14. 【联想小新笔记】win10查看本机wifi无线网络密码
  15. gst-launch-1.0用法小记
  16. 4、nerf(pytorch)
  17. 趣图 | 小哥哥你怎么那么高冷呀?
  18. 用c打印26个小写字母
  19. 正则表达式去掉以 开头和结尾的
  20. 【Python绘图】学习绘图第一步,先要知道哪些操作是常用的

热门文章

  1. 为什么Word只能用安全模式打开
  2. vue文档熟读之---深入了解组件
  3. 雷达阵列天线孔径的概念及其相关意义
  4. dwz 图片查找带回处理
  5. 圣卡塔利娜海岸5K Mac高清壁纸
  6. 管理类联考计算机,管理类联考逻辑能力提高有法可循_计算机专业考研
  7. 知网文件CAj转pdf(可选中文字)的开源工具
  8. UE5 CommonUI初学笔记
  9. 2021-2027中国智能网站无障碍访问工具市场现状及未来发展趋势
  10. 高等数学 第八章 向量代数和空间解析几何