网页设计配色实例
- 格式:doc
- 大小:3.46 MB
- 文档页数:81
网页设计配色应用实例剖析黑色系——黑色系黑色是暗色,是纯度、色相、明度最低的非彩色。
象征着力量,有时感觉沉默、虚空,有时感觉庄严肃穆,有时又意味着不吉祥和罪恶。
自古以来,世界各族都公认黑色代表死亡、悲哀黑色具有能吸收光线的特性,别有一种变幻无常的感觉。
黑色能和许多色彩构成良好的对比调和关系,运用范围很广。
黑色给人深沉、神秘、寂静、悲哀、压抑的感受。
黑色是最有力的搭配色。
黑色也常用来表示英俊的男人。
下面我们根据黑色系搭配不同的颜色所表现出的特性做不同的举例分析。
→黑色网页例图:黑色系分析:(明度对比:黑色+白色)从RGB和HBS模式可以看出,三组数字显示没有掺杂任何的数字,都统一到最高级0到255,即纯黑和纯白。
黑色白色属于没有色相和饱和度、只在明度两极的非色彩。
两种极端强烈对比的只在明度上有区别的颜色,与前面我们所说的三原色、对比色的对比还是有较大区别的。
该页面只有两种非色彩搭配,即黑色白色,衬映得该页面的设计元素也非常干净简练,旁边点缀大小得当的文字元素减小该页面有可能因此产生的单调感觉。
结论:黑白纯色在明度上反差非常大,视觉冲击强烈,主次分明,全站的贯穿运用,构成特色鲜明的设计风格,散发迷人的高品位的贵族气息。
黑白两种颜色的搭配使用通常可以表现出都市化的感觉,常用于现代派页面设计中。
黑色系分析:(非色彩系:黑白深灰色)该页面与上页配色类似,只是多了一组辅助色——灰色,黑、灰、白这三种非色彩在该页面里都运用到了。
大家从该页整体可以看到,多了辅助色灰色,令该页面层次感更丰富,过渡更柔和,空间感觉增强。
左上部点睛色白色块面的运用,使得这种空间感差距拉大,增强视觉层次感,同时突出标志品牌、主题思想。
另一作用在于突出文字的功能运用。
背景深灰色明度非常低,接近于黑色,稍不留心有可能会被忽略。
结合辅助色灰色再整体上看该色配色,主要起到丰富视觉层次感,缓和主色调黑色有可能带来的僵硬感。
结论:黑白灰非色彩色调所构成的页面较具特色,尤其灰色的加入更增添层次感。
网页设计配色应用实例剖析——蓝色系蓝色是色彩中比较沉静的颜色。
象征着永恒与深邃、高远与博大、壮阔与浩渺,是令人心境畅快的颜色。
蓝色的朴实、稳重、内向性格,衬托那些性格活跃、具有较强扩张力的色彩,运用对比手法,同时也活跃页面。
另一方面又有消极、冷淡、保守等意味。
蓝色与红、黄等色运用得当,能构成和谐的对比调和关系。
蓝色是冷色调最典型的代表色,是网站设计中运用得最多的颜色,也是许多人钟爱的颜色。
蓝色表达着深远、永恒、沉静、无限、理智、诚实、寒冷的多种感觉。
蓝色会给人很强烈的安稳感,同时蓝色还能够表现出和平、淡雅、洁净、可靠等。
下面我们根据蓝色系不同属性的同类色、邻近色、高纯度对比、相对对比色等色彩搭配做不同的举例分析。
→蓝色高纯度对比网页例图:蓝色系分析:(高纯度对比:蓝色+玫瑰色)蓝色的HSB数值H色相为240度时是正蓝色。
上图的HSB模式S数值显示,所有主要配色的饱和度都是100%。
从主色调、辅色调HSB模式的数值可看出,这两种颜色在明度上有较大的区别,色相上稍有轻度变化,饱和度相同。
RGB模式上看,主色调与辅色调R数值都为0,G绿色的数值和B蓝色数值分量的变化,得到了不同蓝色的两结果。
点睛色仅是R红色与B蓝色两色调和而得没有掺杂其他颜色,因此饱和度呈最高值100%。
整个页面配色的饱和度都为100%,页面整体配色看起来视觉冲击力异常强烈。
辅助色白色让页面上的颜色的特性发挥到极致,是不可缺少的辅助配色。
结论:响亮、强烈刺激的词语似乎都适用于上图页面,源于高纯度烘托、微妙的冷暖变化配色上,体现出现代都市张扬时尚的气息。
白色块面的线型使得这种高纯度高强度的配色变得响亮却也缓和。
辅色调蓝色的运用透露出设计师的大胆与魄力,玫瑰色在色轮表里算是冷色系,但是与蓝色广义上的对比来说是暖色,在这里与蓝色搭配算是绝配了。
整个页面无不体现出特色和个性。
→蓝色浅蓝色网页例图:/start.html蓝色系分析: (同类色:浅蓝色)主色调HSB数值H显示200度,色轮度稍向绿色方位倾斜,但是由于从180度到270度基本上给人的视觉呈现还是蓝色范畴,因此与视觉上广义的蓝色差别不大。
网页设计配色应用实例剖析——黄色系(1) 黄色是阳光的色彩,具有活泼与轻快的特点,给人十分年轻的感觉。
象征光明、希望、高贵、愉快。
浅黄色表示柔弱,灰黄色表示病态。
它的亮度最高,和其他颜色配合很活泼,有温暧感,具有快乐、希望、智慧和轻快的个性,有希望与功名等象征意义。
黄色也代表着土地、象征着权力,并且还具有神秘的宗教色彩。
黄色的性格冷漠、高傲、敏感、具有扩张和不安宁的视觉印象。
浅黄色系明朗、愉快、希望、发展,它的雅致,清爽属性,较适合用于女性及化妆品类网站。
中黄色有崇高,尊贵,辉煌、注意、扩张的心理感受。
深黄色给人高贵、温和、内敛、稳重的心理感受。
下面我们根据黄色系不同属性邻近色、同类色的高纯度低纯度色彩搭配做不同的举例分析。
→黄色系网页例图:黄色系分析:黄色是所有彩色中明度最高的颜色。
上图看到HSB模式的H数值是60度,正是正黄色,但RGB数值中加入了B蓝色数值为51,因此降低了HSB的饱和度S为80%,但是大面积的黄色仍使得该页面色彩明亮显眼。
辅助色是纯黑色,非色彩明度最低的颜色。
大面积显眼的正黄色有黑色的线条压制,黄色顿时显得沉稳,页面增添内容感。
白色虽然是点睛色,但由于非色彩的白色与黄色的明度最高,因此这里似乎没有起到"点睛"的作用。
结论:当鲜度、明度高的背景色与前景辅助色暗度低的黑色在明度形成较强烈的对比时,艳度降低,较能协调视觉。
整个页面配色单纯,却也不简单,形成另一种设计风格。
→黄色同类色网页例图:www.paralotna.pl黄色同类色分析该页面的配色很单纯,是同类色的黄色不同明度颜色,页面看起来干净、单纯。
点睛色白色淡黄色在深色黄色背景下比较显眼,且在最中间位置,是整个页面中的高调部分。
这三种黄色,明度都很高,只有背景辅助色明度稍低,点睛黄色H色相是三种颜色中黄色倾向最高的为57度,而60度是正黄色,因此明度也是最高的,充分的发挥其点睛色的作用。
背景色和前景色只在色相上明度上有非常微妙的变化,却也很巧妙,形成了变化较明显的空间层次感,削弱了同类色易产生的单调感。
网页设计配色应用实例剖析——橙色系(1)橙色具有轻快、欢欣、收获、温馨、时尚的效果,是快乐、喜悦、能量的色彩。
在整个色谱里,橙色具有兴奋度,是最耀眼的色彩。
给人以华贵而温暖,兴奋而热烈的感觉,也是令人振奋的颜色。
具有健康、富有活力、勇敢自由等象征意义,能给人有庄严、尊贵、神秘等感觉。
橙色在空气中的穿透力仅次于红色,也是容易造成视觉疲劳的颜色。
在网页颜色里,橙色适用于视觉要求较高的时尚,属于注目、芳香的颜色,也常被用于味觉较高的食品,是容易引起食欲的颜色。
下面我们根据橙色系不同属性邻近色、同类色、对比色的搭配做不同的举例分析。
橙色→橙色网页例图: 橙色系分析:主色调橙色HSB数值的H表示色相,显示的是30度,而30度正是橙色显示特征最标准的颜色——正橙色。
饱和度和亮度同时达到最高值,因此整个页面的视觉刺激是极其耀眼强烈的。
这里选取了三种面积相当又是整个页面使用得最少的颜色为点睛色,使页面生动的同时又运用于导航位置,从而达到突出主题的效果。
从HSB数值上看它们的明度纯度相对较低,与明度纯度较高的背景正橙色形成鲜明的对比。
通过围较大的背景白色、前景图片灰白色和小细节前景白色文字制造出明快气氛的同时,又呼应统一于整个页面。
辅助色在这里是橙色与白色的过渡色。
结论:饱和度与纯度很高特性明显的颜色,在达到视觉冲击力的同时,可适当采用少许对比色调和缓和于视觉,从而削弱视觉的疲劳度。
深橙红色系→深橙红色网页例图: .matisserestaurant.ca深橙红色系分析:从色相度中可以知道0度为正红色,30度为正橙色,而主色调的HSB数值H 显示22度可知,该深橙红色是橙色基础上加入少许邻近色红色,整体上降低了明度而得,因为红色本身较橙色明度低,因此这里橙红色的明度呈现出较低状态。
辅助色选取了明度相对于主色调更低的三种颜色,前面两种饱和度都较高,最后一种灰蓝色由于明度较高因此饱和度降低,是主色调与前面两种辅助色的协调色。
网页设计配色应用实例剖析——紫色系紫色是一种在自然界中比较少见的颜色。
象征着女性化,代表着高贵和奢华、优雅与魅力,也象征着神秘与庄重、神圣和浪漫。
另一方面又有孤独等意味。
紫色在西方宗教世界中是一种代表尊贵的颜色,大主教身穿的教袍便采用了紫色。
紫色的明度在有彩色的色度中是最低的。
紫色的低明度给人一种沉闷、神秘的感觉。
在紫色中红的成份较多时,显得华丽和谐。
紫色中加入少量的黑,沉重、伤感、恐怖、庄严的感觉。
紫色中加入白,变得优雅、娇气,并充满女性的魅力。
紫色通常用于以女性为对象或以艺术作品介绍为主的站点,但很多大公司的站点中也喜欢使用包含神秘色彩的紫色,但都很少做大面积使用。
不同色调的紫色可以营造非常浓郁的女性化气息,在白色的背景色和灰色的突出颜色的衬托下,紫色可以显示出更大的魅力。
下面我们根据紫色系不同属性的邻近色、高纯度低纯度配色、相对对比色等色彩搭配做不同的举例分析。
紫色高纯度网页例图紫色系分析:(高纯度对比:同类紫色+同类对比色)紫色的HSB数值H色相为300度时是正紫色。
上图的HSB模式S数值显示,上组颜色饱和度基本都比较高,加上部分较高的明度组合,使该页面异常奢华艳丽。
辅色调之一的黄色是紫色强度最高的对比色,主、辅色面积的大小不同是形成视觉冲击力最大的主要原因。
值得一提的是右下脚的浅蓝色的运用,它在整个页面配色上是很谦逊的角色,但却既突出上面的文字内容,又不张扬的压抑住其他颜色的配色,属于丰富于页面的辅助作用。
如果把它试换成别的颜色似乎还是没有这个浅蓝色效果好。
另一辅助色浅紫红色又称粉红色,粉红色主要用于包含少女在内的女性站点。
因为从明亮到浅白色调的粉红色能够表现出可爱、乖巧的感觉,这里只做少量运用。
其他点睛色使用得虽多但面积很小,主要是主色调紫色附近的过渡色,例如群青、青莲、玫瑰、红色等点缀,闪亮耀眼,增强页面的视觉感染力,有渲染出华丽凸显现代气息的作用。
结论:紫色结合红色的紫红色是非常女性化的颜色,它给人的感觉通常都是浪漫、柔和、华丽、高贵优雅,特别是粉红色可以说是女性化的代表颜色。
网页设计配色精彩十例一、网页颜色原理和象征意义我们所有网页上颜色,在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),菜单使用的为(112,119,112/#707770)。
这样的配色可以显示独特的个性,又不失大型网站的风采。
如图1图12)下面是一个娱乐类的综合性网站UGO,他的配色方案是背景色为黑色为(0,0,0)中嵌套RGB(0,0,82),字体白色RGB(255,255,255),菜单为RGB(77,114,159感觉是生机盎然,充满了互动色彩和青春气息。
网页设计的案例分析在我们美丽的地球村里,绿色随处可见,如草、叶等的绿。
绿色象征着生命、青春与和平。
绿色,是一种中性色,介于黄色与蓝色之间,是最适合人眼注视的色彩。
由于接近自然的特性,绿色给人沉稳、平静、舒适的感觉。
因此,绿色也是在网页设计中使用得最广泛的颜色之一。
下面笔者就通过不同的绿色搭配方式来分析下绿色在网页设计中的色彩和文字颜色搭配。
绿色设计可以结合任何其他颜色,纹理和阴影,可以直观地改变用户的印象。
添加纹理可以使颜色变暗,光滑的表面纹理则更加丰富性和富有深度。
1.绿色+白色+暗红色如下图所示,主色调、辅色调HSB模式的数值可看出,主色调与辅色调是同一种色,只是在明度上有所不同,让页面多了些空间感、层次感。
由于绿色本身的特性,所以整个网页看起来很清爽舒适。
中间使用白色块面,拉开了两种绿色之间距离,增加了视觉节奏感。
点晴色暗红色的加入为网页增添了一分光彩,极具诱惑感,页面瞬间活跃提神了不少,使得整个页面配色清新爽朗。
2.绿色同类色+多种点睛色上图中用色较多,主色调为明度稍低的黄绿色,辅助色则为高明度的黄绿色,二者形成强烈反差,增加了页面层次感。
此图的点晴色有4种,包括红色与主色调绿色、蓝色与橙红色,二者互相形成对比色。
虽说点晴色较多,但都按色相环顺序出现在页面上,形过一个缓和的过渡效果,让人感觉到舒服而非突兀。
整个页面色彩谐调,重点突出,层次分明,热闹多彩又不失井然有序。
这样的网页配色方案的设计适用于小清新类的服装网站。
现今的小清新取景都倾向于海边、公路,若是主色调仍是以白色、黄粉色为主,则会显得单调枯燥。
在此笔者建议可以试试看绿色加上多色点睛色的配色方案,你会大有收获。
3.突出绿色+强暗色系此图中大家一眼就能看出位于正中间的绿色植物,与周围纯度很高的黑色相比,这样的绿色显得醒目,形成鲜明的刺激对比。
这两组色彩虽然不是严格意义上的对比色,但足够在页面中形成鲜明对比,整个页面瞬间被烘托得鲜活起来。
情人节网页配色设计方案
情人节网页配色设计方案:
1. 红色系配色方案:
- 主色:深红色 #800000
- 辅助色1:亮红色 #FF0000
- 辅助色2:粉红色 #FFC0CB
- 背景色:浅红色 #FFB6C1
- 文字颜色1:白色 #FFFFFF
- 文字颜色2:浅灰色 #D3D3D3
2. 粉色系配色方案:
- 主色:粉红色 #FFC0CB
- 辅助色1:浅粉色 #FFB6C1
- 辅助色2:深粉色 #FF69B4
- 背景色:白色 #FFFFFF
- 文字颜色1:深灰色 #333333
- 文字颜色2:灰色 #666666
3. 红紫色系配色方案:
- 主色:葡萄紫 #800080
- 辅助色1:鲜红色 #FF2400
- 辅助色2:浅紫色 #DDA0DD
- 背景色:白色 #FFFFFF
- 文字颜色1:黑色 #000000
- 文字颜色2:深灰色 #666666
4. 黄红色系配色方案:
- 主色:深橙色 #FF8C00
- 辅助色1:红色 #FF0000
- 辅助色2:金色 #FFD700
- 背景色:白色 #FFFFFF
- 文字颜色1:深灰色 #666666
- 文字颜色2:浅灰色 #D3D3D3
5. 蓝紫色系配色方案:
- 主色:深紫罗兰色 #9400D3
- 辅助色1:淡蓝色 #ADD8E6
- 辅助色2:宝蓝色 #4169E1
- 背景色:白色 #FFFFFF
- 文字颜色1:黑色 #000000
- 文字颜色2:深灰色 #666666
请注意,在文中不能使用与标题相同的字词。
网页设计配色应用实例剖析——红色系红色的色感温暖,性格刚烈而外向,是一种对人刺激性很强的颜色。
红色容易引起人的注意,也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳的颜色。
在众多颜色里,红色是最鲜明生动的、最热烈的颜色。
因此红色也是代表热情的情感之色。
鲜明红色极容易吸引人们的目光。
红色在不同的明度、纯度的状态(粉红、鲜红、深红)里,给人表达的情感是不一样的。
在网页颜色的应用机率中,根据网页主题内容的需求,纯粹使用红色为主色调的网站相对较少,多用于辅助色、点睛色,达到陪衬、醒目的效果。
通常都配以其他颜色调和。
红色相对于其他颜色,视觉传递速度最快。
由于以上的这些红色传达出的特性,因此人们喜欢用红色作为警示符号的颜色,例如:消防、惊叹号、错误提示等等。
为了让大家对红色的理解做更好的区别,下面我们分别对红色系根据邻近色、同类色、对比色的搭配做不同的举例分析。
朱红色→ 朱红色网页例图:http://www.muchvibe.ca朱红色在红色系里倾向黄色方向,是大红色加入黄色而得。
在色环表中,纯红色在HSB里为0度,往360度方向呈现的是冷红色系,0度方向为黄色系。
整个页面里,主色调朱红色面积非常大、确定明显,辅助色主要由黑色、深红构成,(数值上选取的是深红色做标示)。
主色调的R呈现出255最高数值,S中100%,充分标明了红色最高特性。
辅助色的深红R为222,B87%,显示其充当辅助角色的这一特性。
结论:背景色朱红由于红色特性明显,饱和度、明度都非常的高,这里运用了辅助色深红、黑色压住并牵制朱红色抢眼的个性,也同样能达到突出前景主要图片内容的目的。
点睛色主要用于标志的突出上,其他导航文字、图片的部分运用等,调和并达到了不至于使得整个页面刺激中又透出的沉闷感。
这类颜色的组合比较容易使人提升兴奋度,红色特性明显,这一醒目的特殊属性,比较被广泛的应用于食品、时尚休闲等等类型的网站。
深红色→ 深红色网页例图:http:// 深红色在原有的红色基础上降低了明度而得,是红色系中的明度变化。
【干货】你想要的网页配色都在这里了(附色值)NO1.对比少量的暖色和大块的蓝绿,形成高对比度,既干净又突出了专业性。
NO2.艺术梵高美术馆官网,从他的作品提取配色灵感,温暖的黄,丰富的蓝,搭配清爽的绿。
NO3.优雅Martin Agency的网站,以金色和白色作为主调,简单、优雅。
NO4.现代橙色和蓝色打造出一个充满活力的明亮色调,再用轻灰去平衡两者。
NO5.大胆霓虹色调和暗黑背景形成鲜明对比,呈现出的效果也惊人~~NO6.冷静饱和色调中融入冷灰,既柔和又冷静。
NO7.奔放花式混合暖调和冷调,创造出一个独特氛围。
NO8.清爽蓝、灰、白打造出一个清爽的背景,而红色引领了画面的焦点。
NO9.温暖浅棕色作为中性背景,低调又不失温暖。
NO10.敏锐运用绿松石作为网站的焦点颜色,给人一种新鲜、现代的感觉。
NO11.酷炫冷调与暖调结合,调配出青铜感,做出大胆、动态的酷炫效果。
NO12.粉嫩明亮柔和的粉彩,加上一小片白,打造出一个轻松有趣的育婴网站。
NO13.明丽如果柔和的颜色不是很合你的胃口,你喜欢明亮,铿锵有力的,那么可以试试这种复古配色。
NO14.干净大块的紫作为主体色,干净利落。
NO15.活力黄色、橙色、蓝色作出飞溅的效果,再搭配中性灰,使整个画面活力四射。
NO16.成熟同样是灵感源自艺术的一个网站。
NO17.夏日设计师很精准地捕捉到夏日的调调,并通过色彩表现出来了。
NO18.权威用灰色搭配海军蓝和醒目黄,形成鲜明对比,给人一种现代而权威的即视感。
NO19.有力大胆地使用黑色和白色,强烈的反差使得画面更加有力、有趣。
NO20.清新将蓝和绿逐渐过渡,直到融为一体,看起来超清新!NO21.开朗用鲜亮的橙色和大量的空白作为主体,再用一个很酷的蓝色调和暖色,使得网站开朗、热情、现代。
NO22.奢华冷冷的海军蓝,加上温暖的褐色,再配以少量鲜艳的红,带来一个高端奢华的世界。
NO23.独特这不是一个充满活力的配色,低饱和度红,加上少量蓝,使其更加独特。
⽹页效果图设计之⾊彩配⾊⽅案及实例说明:红橙黄绿蓝紫⿊⽩灰1 红⾊是最具有视觉冲击⼒的⾊彩;暗⽰速度和动态;可以刺激⼼跳速度、加快呼吸、刺激⾷欲;红⾊的⾐服使⼈⾝形显⼤;红⾊的车最容易被偷,如图所⽰。
1.1 红⾊的具象联想⽕焰、鲜⾎、性、西红柿、西⽠瓤、太阳、红旗、⼝红、中国国旗。
1.2 红⾊的正⾯联想激情、爱情、鲜⾎、能量、热⼼、激动、热量、⼒量、热情、活⼒。
1.3 红⾊的负⾯联想侵略性、愤怒、战争、⾰命、残忍、不道德、危险、幼稚、卑俗。
1.4 红⾊的⽂化域· 在⾮洲,红⾊代表死亡。
· 在法国,红⾊代表雄性。
· 在亚洲,红⾊代表婚姻、繁荣、快乐。
· 在印度,红⾊是⼠兵的颜⾊。
· 在南⾮,红⾊是丧服的⾊彩。
1.5 实例说明为中企动⼒8周年主题⽹站()⽹页截图,整个页⾯使⽤红⾊作为主⾊调,给⼈以喜庆、热闹的感受。
如图所⽰.1.6 红⾊系配⾊⽅案红⾊系的配⾊⽅案如下,如图所⽰:1 在红⾊中加⼊少量的黄,会使其热⼒强盛,趋于躁动、不安。
2 在红⾊中加⼊少量的蓝,会使其热性减弱,趋于⽂雅、柔和。
3 在红⾊中加⼊少量的⿊,会使其性格变的沉稳,趋于厚重、朴实。
4 在红中加⼊少量的⽩,会使其性格变的温柔,趋于含蓄、羞涩、娇嫩。
2 橙⾊橙⾊能促进⾷欲;橙⾊的房间代表了友善,带给⼈愉快,能促使⼈谈话和思考;橙⾊能够⽤来强化视觉,这就是为什么海滩救⽣员的救⽣服采⽤橙⾊的原因,如图所⽰。
2.1 橙⾊的具象联想秋天、桔⼦、胡萝⼘、⾁汁、砖头、灯光。
2.2 橙⾊的正⾯联想温暖、欢喜、创造⼒、⿎舞、独特性、能量、活跃、模拟、社交、健康、奇想、活⼒、华美、明朗、⽢美。
2.3 橙⾊的负⾯联想粗鲁、时髦、喧嚣、嫉妒、焦躁、可怜、卑俗。
2.4 橙⾊的⽂化域· 在爱尔兰,橙⾊代表新教运动。
· 在美洲⼟著⽂化⾥,橙⾊代表学习和⾎缘关系。
· 在荷兰,橙⾊是国家的颜⾊,因为荷兰的君主来⾃于Orange-Nassau家族。
简单优雅的网站颜色方案-黑白网页设计网页设计的世界里,黑白两色仿佛是最纯粹的语言,它们简洁、有力,又充满无穷的变化。
今天,就让我们一起探索这个简单而优雅的黑白网页设计方案。
一、设计理念在设计之初,我们明确了这样一个核心理念:用最少的颜色,传达最丰富的情感和信息。
黑白两色,看似对立,实则互补,它们共同构筑了一个平衡、和谐、高级的视觉体验。
二、颜色搭配1.黑色背景黑色,作为网页的背景色,给人一种稳重、深邃的感觉。
它既能突出白色文字和图像的鲜明对比,又能营造出一种神秘、专业的氛围。
2.白色主体白色,作为网页的主体色,它纯净、简洁,让人眼前一亮。
我们将白色应用于文字、图像、导航栏等元素,使其成为视觉焦点。
3.灰色辅助灰色,作为黑白的过渡色,它既不会抢走黑白的视觉焦点,又能增加层次感。
在网页设计中,我们用灰色来表示辅助信息,如注释、标签等。
4.亮色点缀在黑白灰的基础上,我们可以适当地加入一些亮色,如红色、蓝色、绿色等,作为点缀。
这些亮色既能活跃氛围,又能引导用户关注重要信息。
三、布局设计1.简洁的导航栏导航栏作为用户浏览网页的重要工具,我们将其设计得简洁明了。
黑色背景上,白色文字清晰可见,灰色图标点缀其间,既美观又实用。
2.突出的是网页的核心内容,我们采用大号白色文字,搭配黑色背景,使其具有强烈的视觉冲击力。
同时,灰色辅助文字和保持一定的间距,层次感分明。
3.清晰的版式在版式设计上,我们遵循简洁、对称的原则。
黑色、白色、灰色三种颜色交替出现,形成一种视觉节奏。
同时,留白的设计使得整个网页看起来更加透气、舒适。
4.丰富的内容在内容呈现上,我们采用图文结合的方式。
白色文字搭配高质量的黑色或灰色图像,既保证了信息的传达,又增加了视觉美感。
四、交互设计1.清晰的按钮按钮作为用户与网页交互的重要元素,我们将其设计得简洁明了。
黑色背景上,白色文字搭配灰色图标,清晰可见,易于。
2.动态效果为了增加网页的趣味性,我们可以加入一些动态效果。
网页设计中红色系运用案例网页设计中红色系运用案例网页设计有为重要,无论是彩色搭配还是非彩色搭配,都应该注重。
接下来我们开始对每一种颜色进行分析,我们先探索红色系在网页设计中的运用。
众所周知,红色是一种很强烈的情感色彩,能使人感到兴奋,故此我们中国也将红色认为是一种喜庆的颜色,会给人带来快乐。
鲜明的红色往往能吸引到游客的目光,所以红色也是网页设计中常用到的一种颜色。
接下来我们进行分析,如何更好的运用来吸引读者的注意。
红色是一种刺激性的颜色,现在我对各种运用到红色的网页进行一个分析。
一.食品、饮食类网页设计案例一:红色+深红色+白色整个页面是以红色作为基调,具有很强的冲击效果,非常符合饮食类网页设计。
白色的字体在红色中形成反差,整体页面非常醒目给人一种视觉冲击,让读者热力强盛,产生食欲。
案例二:红色+深红色+灰色整个页面红色不占主调,但是却很好的突出了所要表达的内容。
用深红色的可乐瓶子使界面清晰,红色的外框、白色的背景,很简约却又很好的突出了所要表达的主题。
所以说,红色食品类网站不一定说要整个页面都是红色的,也可以是浅色垫底,红色突出。
二.公司展现类网站案例一:浅红色+深灰色+粉红色红色占了大部分的.面积,极易吸引了读者的视线,加上粉色(浅色系)的加入,整个画面非常融洽却能极易的突出文字和图中的图片。
深灰色与红色的搭配,使整个页面会更加生动而有活力。
四.女性用品网页案例一:白色+浅红色+粉红色以白色略红的颜色作为主色,搭配辅色红色和粉红色,能让读者一眼看出这个是一个女性类网站,整个页面非常协调又不单调。
感人感受到了女性的柔美。
五.其他类网页设计案例一:红色+白色+黄色+深红色(背景色)网页大部分以红色为主,加上黄色的搭配,整个页面似乎充满了活力。
白色的文字与背景深红色产生了鲜明的对比,让整个页面更加活跃,更有气氛。
这样有活力的版面,才能使火炬永久燃烧。
70+排版极简的网页设计配色方案标准的网页设计配色最多不超过三种颜色,复杂的配色方案看上去更为花哨,而反之一些极简的网页配色方案也流行起来,最近的Yahoo首页改版也能体验到未来的设计趋势,下面是排版整洁、极简的网页配色设计方案,放在你的项目中能给你带去灵感!1. Brilliancy2. OffSet Media3. PixelBot4. Pixel Umbrella5. Kristi HinesVery clean, yet professional web design.6 .Made By On7. Hot MeteorHot Meteor specializes in web, print, and branding. Their site looks really professional and clean, good design is one of the best ways how to attract new clients.8. Mark Boulton DesignExcellent accents leading your eye through whole page in the way author wants it. Follow me to this through – magazine photo + new(s) design is the first point which grabs attention, author explains there what is this site and company about –that first attention grabber is very important. Only then you look at his logo and read further –work, our clients, news, contact sections.9. BKWLD10. Concentric-Studio11. Vitor LourencoVisit his homepage –starting from index page you’ll get amazed how effectively Vitor Lourenco uses white space.12. Forget Foo13. GetFinch14. ShaunInMan15. Arty PapersBeautiful website using just few very subtle, monochrome colors and only pink color in logo is used to highlight most important links.16. Vesess17. SimpleBits18. DesignWorkPlan19. MadeBySofa20. 80/20 Studio21. Clear Left22. AentanOn this site so much is going on –I mean so many sections and categories, but still it looks pretty clean.23. Huge Inc24. Rustin Jessen25. Daniel Oliver26. Subtraction27. Information Architects28. The Man In The Sea29. Built By Buffalo30. Corporate Risk WatchSite looks really professional and clean aligned in left side of the screen, also try their navigation – really unique approach!31. Pixel Haven32. Design Hotels33. Jon Tangerine34. Winnie Lim35. Wonderful Union36. AppleObvious, but I could not resist myself and not to include Apple minimalist ethalon page, though everyone knows about it already I am sure.37. Darren Hoyt38. Ronnie San39. Shift PX40. 5ThirtyOne41. Andy Rutledge42. Anthony James Bruno43. Astheria44. Big Kid45. Cade Martin Photography46. David Airey47. Eight Face48. Feed A Fever49. Fell Swoop50. Hello Stefan51. Jamie Gregory。
网页设计色系案例分析网页设计色系案例分析橙色又称之为橙黄或者是橘色,它的穿透力仅次于红色,色感较红色更暖。
在网页设计中橙色是十分活泼的色彩,给人以华贵而温暖、兴奋而热烈、欢乐与活力的感觉,也是令人振奋的颜色。
橙色在网页中的使用范围非常广泛,可以通过变换色调营造出不同分气氛,不仅仅能表现出青春活力,也能达到一个稳重的效果。
橙色的波长居于红和黄之间,具有健康、富有活力、勇敢自由等象征意义,为了让大家对橙色有更好的理解,下面分别对不同类型网页进行分析。
一.食品饮食类网页设计案例分析推荐案例:橙色+黄色+深橙色整个页面以橙色为主,通过不同明度和纯度的“黄”进行调和,页面非常融洽而不显单调。
很好的突出了的图片,食品图片色调也是相近的,故不会非常的突兀。
而利用白色将网页分层,有层次感。
二.娱乐类网页案例分析推荐案例:深橙色+土黄色+黄色整个页面是利用深橙和浅黄色的搭配来展现的',使页面看起来更加的温暖,深色的铺垫,黄色的文字,达到一种突出而不突兀的视觉效果,赋予了网站生命力。
三.电子商务网站案例分析推荐案例:橙色+卡其色+绿色这一个案例使用的颜色相对较多,而橙色的导航辅佐明度较高的卡其色,不会显得非常凌乱,反而更加有特色,很活泼。
加上利用一些绿色的按钮来点缀页面,页面就显得不那么单调,有万橙之中一点绿的视觉效果。
四.科技发展机构网站案例分析页面用的色彩相对较杂,但让人感觉乱中有序。
大家可以注意到,页面都是采用深红色作为文字,而橙色出现在红色文字的附近,例如顶部的橙底红字,大标题红色小标题橙色,这些元素就使页面乱中有序。
总结:橙色运用的非常多,调整饱和度、纯度都可以达到非常好的视觉效果,当然在视觉冲击力的同时,可适当采用少许对比色调和缓和于视觉,从而削弱视觉的疲劳度。
下载全文。
网页设计配色颜色的使用在网页制作中起着非常关键的作用,有很多网站以其成功的色彩搭配令人过目不忘。
但是对于刚开始学习制作网页的人来说,往往不容易驾驭好网页的颜色搭配。
除了学习各种色彩理论和方法之外,笔者认为多学习一些著名网站的用色方法,对于我们制作美丽的网页可以起到事半功倍的作用。
所以,笔者总结了一些著名网站的颜色搭配方法,这些方法可以让我们的学习少走弯路,快速提高我们的网页制作水平。
一、网页颜色原理和象征意义我们所有网页上颜色,在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图12)下面是一个娱乐类的综合性网站UGO,他的配色方案是背景色为黑色RGB为(0,0,0)中嵌套RGB(0,0,82),字体白色RGB(255,255,255),菜单为RGB(77,114,159)。
这样的虽以黑蓝为主色调,但是配以漂亮的图片,给人的感觉是生机盎然,充满了互动色彩和青春气息。
如图2。
图23)下面的这个网站是大名鼎鼎的微软公司网站,微软不仅软件做的好,连网页制作也是世界一流。
他的每一个网页都是制作的样板。
从网页我们就可以看出微软公司的风格、作风,以及雄厚的实力。
背景颜色使用蓝色RGB为(0,151,254),菜单为黑色RGB(0,0,11),菜单为灰色RGB(200,200,200),字体为黑色RGB(0,0,0),如图3。
图34)现在介绍的网站相对简单,但是她的用色也别具匠心,现在我们来看一看,整体上使用的是白色RGB(255,255,255),辅助色为RGB(79,88,95),菜单色为RGB(48,64,64)和RGB(0,81,111)字体使用的是RGB(83,86,91)。
虽然简单,但颜色搭配非常的科学合理。
如图4图45)下面的网站采用黄色调为主,很体现公司的个性,现在我们就来看一看她的颜色搭配。
主色调为黄色RGB为(255,199,48/#FFC730),辅助色调为RGB(49,102,46)字体为棕色RGB(153,103,0),中间再配以抽象的图片,显得个性十足但又不单调。
如图5图56)橘红色如果运用得当的话是一种非常使用于网页上的颜色。
下面的这个网站就是一个非常著名的例子。
他的主色调为RGB(255,151,0)辅助色调为RGB(255,103,4),菜单RGB为(252,200,0)。
字体使用黑色RGB为(0,0,0)。
此种配色显得主人较为前卫,色彩热烈,给人的震慑力较强。
如图6图67)鲜红色也是一种震撼感很强的颜色,如果搭配不当,也可能使网站没有风格和特点。
下面的这个网站就是使用红色比较好的网站。
我们来看看他的颜色搭配。
他使用的主色调是RGB(200,9,0),配以抽象的图形,文字使用的是RGB(213,229,167)显得美观而不失独特,大气而不逼人。
如图7图78)下面介绍的这种色调是我们制作网页的时候不会经常用到的颜色,如果使用到你的网页中,肯定会给人耳目一新的感觉。
他的主色调为RGB(144,151,97)辅助色调为RGB (173,168,112)边饰为黑色RGB(0,0,0)字体为黑色RGB(0,0,0)。
这样的搭配显得风格独特,颜色和谐而庄重。
如图8图89)下面的设计更加的简单化,但是颜色的使用使网页并不呆板,反而让人感觉到一股浓浓的生活和家庭气氛,使人置身于美丽和爱中。
他的主体是由两种颜色构成,分别是RGB (239,200,161)和RGB(201,254,200)。
如此简单,但是却栩栩如生,跃然网上。
如图9图910)下面举出这个例子是想证明一个道理——只要你有足够的想象力,你就能够设计出漂亮的网页。
目前在网上非常流行一句话就是网页的搭配不要超过四种主要颜色,否则就有杂乱之感。
下面的这个网站远远的超过了三种颜色,但是她并不失美丽。
因此重要的还是色彩的驾驭能力。
下面这个例子的菜单就使用了7种颜色,但是我们看到的网页并不杂乱,相反感觉作者很有创意。
如图10图10网页设计的颜色搭配需要在实践中不断的摸索和不断的创新,认真学习别人的先进方法和经验,可以快速的提高我们的制作水平。
可以说。
网页颜色搭配得当,成功也就走了一半。
如果大家有什么好的方法,别忘了和别人交流,让我们共同进步!红色系红色的色感温暖,性格刚烈而外向,是一种对人刺激性很强的颜色。
红色容易引起人的注意,也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳的颜色。
在众多颜色里,红色是最鲜明生动的、最热烈的颜色。
因此红色也是代表热情的情感之色。
鲜明红色极容易吸引人们的目光。
红色在不同的明度、纯度的状态(粉红、鲜红、深红)里,给人表达的情感是不一样的。
在网页颜色的应用机率中,根据网页主题内容的需求,纯粹使用红色为主色调的网站相对较少,多用于辅助色、点睛色,达到陪衬、醒目的效果。
通常都配以其他颜色调和。
红色相对于其他颜色,视觉传递速度最快。
由于以上的这些红色传达出的特性,因此人们喜欢用红色作为警示符号的颜色,例如:消防、惊叹号、错误提示等等。
为了让大家对红色的理解做更好的区别,下面我们分别对红色系根据邻近色、同类色、对比色的搭配做不同的举例分析。
朱红色→ 朱红色网页例图:http://www.muchvibe.ca朱红色在红色系里倾向黄色方向,是大红色加入黄色而得。
在色环表中,纯红色在HSB 里为0度,往360度方向呈现的是冷红色系,0度方向为黄色系。
整个页面里,主色调朱红色面积非常大、确定明显,辅助色主要由黑色、深红构成,(数值上选取的是深红色做标示)。
主色调的R呈现出255最高数值,S中100%,充分标明了红色最高特性。
辅助色的深红R为222,B87%,显示其充当辅助角色的这一特性。
结论:背景色朱红由于红色特性明显,饱和度、明度都非常的高,这里运用了辅助色深红、黑色压住并牵制朱红色抢眼的个性,也同样能达到突出前景主要图片内容的目的。
点睛色主要用于标志的突出上,其他导航文字、图片的部分运用等,调和并达到了不至于使得整个页面刺激中又透出的沉闷感。
这类颜色的组合比较容易使人提升兴奋度,红色特性明显,这一醒目的特殊属性,比较被广泛的应用于食品、时尚休闲等等类型的网站。
深红色→ 深红色网页例图:http:// 深红色在原有的红色基础上降低了明度而得,是红色系中的明度变化。
通过上图的数值显示看出明度较低。
这类颜色的组合随着明度的变暗,比较容易制造深邃、幽怨的故事气氛。
传达的是稳重、成熟、高贵、消极的心理感受。
这个页面背景色运用了纹样,是以目前选取的主色调颜色和明度较暗的深红色结合而的,使得明度稍暗。
数值上看,主色调也就是背景色的饱和度较高,但是由于降低了明度,颜色变得较沉稳。
辅助色RGB添加了适量的其他颜色,G和B数值区别不大,因此饱和度降低,颜色趋于柔和稳定。
点睛色的加入提亮,页面视觉效果强化。
结论:前景色通常要较明显的区别于背景色,达到台前的宣传目的。
当饱和度较低的前景色与背景色变化不明显时形成的是另外一种柔和统一的效果。
玫瑰红色→ 玫瑰红色网页例图:http://www.gentverwent.be玫瑰红色在色环上实际已经接近冷色,是红色系中的色相的微妙变化,是红色系里的冷色系。
我们在HSB中H数值可看出,0度为红色的最高值,越接近0度数值红色特性越明显,否则逐渐冷色倾斜,而该数值偏离0度稍远。
这个页面主要由两种不同明度、纯度的玫瑰色调组成。
两色数值显示,我们看到RGB 数值中R呈现的数值最高,红色特性较明显。
辅助色调的玫瑰色,加入少许G,色调向冷色稍微偏移,也由于加入了G,在HSB数值里,饱和度轻微减弱,但随着明度增加,色彩趋于艳丽,符合突出前景的目的。
主色调虽然纯度达到最高饱和,但由于明度降低,相对于辅色调较沉稳,适合做背景色。
数值上看,由于背景色和前景色的明度较为接近,加入白色边框,强烈了前景色于背景色的区分,加强视觉强化效果。
结论:背景色和前景色的明度较接近,颜色给人的视觉表象较闷,加入少量白色划分使得色彩引导的主次块面更分明,页面明快许多。
这类颜色的组合多用于女性主题,例如:化妆品、服装等,容易营造出娇媚、诱惑、艳丽等气氛。
明度粉红色→ 明度粉红色网页例图:http:// .au粉红色主要是红色系中的明度的高亮度的变化。
是红色系里的冷色系。
RGB数值显示明度较高,因此HSB中S纯度下降,几乎呈最低值。
主色调和辅助色调数值对比可知:主色调混合的G的份量较多且明度较高,因此纯度较低,色调柔和,在框架区域内较适合做类似背景色的辅助性岗位。
辅助色R 数值比主色调的R数值稍高,红色性稍明显,加入的G相对少,B明度稍低,因此相对纯度要高,辅色位置应用在框架区域的导航位置,起到突出导航作用。
点睛色突出标志及购物主体的作用。
背景白色除了突出前面粉红色主体的作用,在前景也有出现,背景色与前景色的相互牵制,减少空间距离的效果。
结论:RGB数值中,数值同时呈现相近的高数值时,色彩越柔和协调,纯度相对降低,页面呈高明度灰色段,视觉刺激缓慢。