网站建设中的配色方案教程

zxh5566  2017-03-04 21:46   Hits: 

 
基于色相,色调的网页配色方案
 
为了后续谈及的色相,色调的配色方法,我们先来看一下色相环上的色彩关系,以及色调表中的色彩调子的名称与关系图
 
色相关系图
 
上图是以色相环中的红色为基准进行的色调方案分析,采用不同色调的同一色相时,称之为同一色相配色,而采用两侧相近颜色时,称之为类似色相配色,类似色相是指色相环中相邻两种色相,同一色
 
相配合和相邻色相配色时,会给人一种安静整齐的感觉,红色和蓝色是补色关系,在色相环上是正对相反位置,补色配色时,给人一种强烈的反差对比,画面比较激烈,相反色相配色时指搭配使用色相
 
环中相距较远颜色的配色方案,它比以上3种配色方案具有更多的变化感
 
类似色调是指色调相近的配色方式,相反色调是色调较远的配色方式,如明清色调与暗青色调的配色方式
 
读者应该亲自尝试配色表,观察纯色加白,加黑,加灰后的色彩感觉,有助于开展配色研究强化对色彩关系的理解
 
鲜艳色调,鲜艳色调的功能特点是色彩艳丽鲜明,强烈生动,有视觉冲击力,色彩感觉强的设计容易减弱形态感,在有大量配图的网页上,设计时要引起注意
 
明亮色调,可以称为宝石的色调,清澈而有光辉,由于他的明度与纯度都比较高,因此在配色中容易突出,使整个色彩活泼明朗,温和快乐,在需要体现柔美,轻快的网站风格时常用这一色调,
 
朴素色调,这一组色调都是浊色调,因为他们都含有不同程度的灰色,明度,纯度都不高,这些色调的配色容易却得稳重,朴实,传统和古典的效果,偏于保守,但又能显出一定的格调
 
深谙色调,有彩色中最深谙的3个色调,属案情色调,它的色彩厚实,有趣味感,能使人感到厚重,致密,严肃,能表达古典美,机械美
 
无彩色色调,没有色彩感觉,只有浓淡区分的一组色调,给人以冷淡而理智的印象,无彩色本身容易调和,与有彩色配色也易于取得调和效果
 
在众多的色彩调和配色形式中,有5种最基本,最重要的配色方式,有了这5种配色形式,基本可以解决网页设计色彩方面的常见问题,配色原理可能有些枯燥,读者可以以理解的方式逐渐运用到日常工
 
作中,在欣赏优秀网站的同时,可以做一些分析归类,看看这些网站属于那类配色形式,如果有机会,也可以常联系配置色彩方案,以帮助加深对配色应用的理解
 
这是一组基于色调同一的配色方式,例如深浅不同的蓝搭配在一起,或是红色,橘色的统一色调的调和关系,他们的对比不强烈,画面容易达到统一的和谐效果,是十分常见的配色方案。
 
同一或类似色相、类似色调配色
 
该网站首页使用的是类似色相配色,类似色调的配色方式,后两个内页采用的是同一色调柔和的明清色调,给人的感觉十分亲切,在同一个网站内,也许会使用多种配色方式,但要保持统一和谐的气氛
 
,如同天下星,给人以专业,传统的感觉,这是一组暗青色调的配色方案,与上一组的明清色调的柔和气氛完全不同,这是一种暗青色调的深沉的感觉,虽然色彩有些深暗,但营造出了冷静整齐的效果
 
,紫色还透露出一丝神秘感,色彩与网站内容比较相似
同一或类似色相,相反色调配色,色调反差大时,和面色彩对比强烈,若是同一色相的配色,对比度会略小一些,色调的落差正好可以制造出色彩突出部分,有引导视线的作用。
发白的黄色与鲜艳的红色搭配,红色的广告部分十分突出,通常进入网站,浏览者会先寻找导航条,然而进入这个网站后,色彩落差把浏览者的目光轻易的吸引到广告上,画面彩色对比强烈,但十分和
 
谐,主要是红里也加了少量的淡灰,并不是纯色
 
这是一组黄色和黄绿色的类似色相配色形式,色调的反差较大,黄绿色是鲜艳色调,艳丽,醒目,黄色则是深谙色调,是代表泥土的深土黄色,网站的所有信息都在土黄色的格子里,十分活泼,有趣,
 
整体网站的色彩给人一种轻快的,有个性的心理感受
相反色相的配色,使画面有更多的变化,色调的统一,可以调节色相制造的视觉落差,采用明清色调的时候,会出现柔美的感觉,比如淡雅的紫色搭配大雁的黄色,绿色,明清色调时会给人一种沉闷,
 
稳定的心理感受。
 这是著名的设计专业网络杂志天津网站建设的网站,它带领起来的像素设计风格几乎席卷了全球各类信息类型的网站,是难得一见的优秀作品
这是一个十分典型的色调统一,色相相反的配色形式,网站中使用了多种色相,统一的色调减小了色彩对比关系,达到了一种柔和的视觉效果,此站点的其他方面也非常突出,导航按钮的风格,框架结
 
构风格,插图与作品等都是像素风格的典范作品
这是一个图书馆的网站,庄严而优雅,采用了浊色的蓝与浊色的黄点出带有庄重而有智慧的网站气氛,是一组典型的色相相反,色调一致的配色形式
 
相反色相,相反色调配色
 
相反色相,相反色调的色彩配色形式可以营造出具有强烈的变化感和视觉落差的效果,强烈的色彩对比可以加深印象,产生特殊的色彩情感,为了达到作品的和谐统一,可适当调整色彩部分的面积,位
 
置等。
这是提供网络服务的公司的网站,鲜艳的红色与明清色调的正统蓝色搭配,可以看出设计师用色非常大胆,是十分少见的色彩组合,强烈的对比并没有使浏览者感觉到任何的不适应,实际上重点突出了
 
导航部分和产品信息,同时插图的风格十分鲜明,增加了浏览者对企业信息和产品信息的认识,这个网站的主色彩是淡棕色,然而相反色相的红,蓝,绿占据了浏览者的视线,相反色相,相反色调的配
 
色给人以其不意的效果,在网络上也是十分常见的配色形式
 
无彩色和彩色配色
 
无彩色是指黑,白,灰三色,也叫做非彩色,无彩色与彩色进行配色时常用的配色形式,网站采用多种不同色相时或画面中含有过于强烈的对比色彩时,都可以加入黑色进行调和,黑色可以稳住跳跃的
 
色彩,使画面和谐,利于达到统一的视觉效果,同时黑色给人以稳重的心理感觉,常与其他的色彩搭配
在网络上,白色和灰色以常用的做背景,他们明视度低,对视觉没有刺激,适合阅读,人们总是忽略他们,其实白玉灰在各种色彩关系上起了很大的作用,可以分割色彩,使对比弱化,以便容易在视觉
 
上统一
这是一个展示作品的网站,在网页上部的区域以图片的形式更换作品,网站的主题色彩是黑色,暗青色的紫和暗清色的绿是辅助色彩,除可以主题色彩作品中色色彩也对网站的整体效果有一些影响
这是一个大气的韩国设计杂志网站,黑色的导航条给人以稳重,庄严的心理感受,不论网站插图更换成色彩艳丽的红,绿或其他色彩,黑色都可以很好的与之搭配,网站中除了导航条是黑色的意外,没
 
有其他部分使用黑色,但仅仅这一点黑色对网站气氛影响非常大。

净化设备公司网站建设
上一篇:网页色彩象征与分析:黄色和黄绿色,蓝色和蓝绿
下一篇:信息门户类网站建设知识