搞颜色指南|巧用色彩搭配,制作吸睛网站。

简介: 建站|全网最系统的色彩搭配指南,教你制作吸睛网站

看到这里的朋友,别往下翻了,这里有全网最全、最系统的网站色彩搭配指南。

为了写这个回答,我把工作以来关于建站的所有经验做了整合,这些年刷的上百个网站,读的几十本工具书,还「斥巨资」请公司的设计大神吃了碗麻辣烫求指导,最后总结出一套适用于几乎所有新手小白的网站色彩搭配教程。

相信我,看完你一定会对网站的色彩搭配有个全面认识。

话不多说,直接上干货。
全文包括以下几个方面:

认识色彩及网页的安全颜色。
如何处理色彩?
网页色彩搭配原理及色彩的搭配方案有哪些?
色彩搭配的技巧。

一、认识色彩及网页的安全颜色
在任何一个设计中,色彩对视觉的刺激都起到第一信息的传达作用。

打开一个网站,给用户留下第一印象的既不是网站的内容,也不是网站的页面布局,而是网站的色彩。

色彩对人的视觉效果非常明显,一个网站设计的成功与否,在某种程度上取决于设计者对色彩的运用和搭配。高明的设计师会运用颜色来表现网站的理念和内在品质。

认识色彩。
大家平时所看到的白光经过分析,呈现出红、橙、黄、绿、青、蓝、紫7种颜色,其中红、绿、蓝是三原色,三原色通过不同比例的混合可以得到各种颜色。

现实生活中的色彩可以分为彩色和非彩色两种,其中黑、白、灰属于非彩色系列,其他的色彩属于彩色系列。

根据专业研究机构研究表明:彩色的记忆效果是黑白的3.5倍。也就是说,在一般情况下,彩色页面较完全黑白页面更加吸引人。

什么是网页的安全颜色?
在网页中,通常以RGB模式来表示颜色的值。

RGB模式是显示器的物理色彩模式,这就意味着无论在软件中使用何种色彩模式,只要是在显示器上显示,图像最终都是以RGB方式出现。

RGB表示红(RED)绿(GREEN)蓝(BLUE)三原色。通常情况下,RGB各有256级亮度,用0-255表示。

按照计算,256级的RGB色彩总共能够组合出约1678万种色彩,即256256256=16777216,通常也称为24位色(2的24次方)。

但是由于浏览器的缘故,网页被浏览器识别后,只有216种颜色能在浏览器中正常显示,多于这个范围的颜色有的浏览器显示时就会发生偏差,不能正常显示。因此将能被所有浏览器正常显示的216种颜色成为网页安全颜色范畴。

二、如何处理色彩?
色彩是人的视觉最敏锐的要素。网页的色彩处理得好,可以达到锦上添花,事半功倍的效果。

不同的色彩会给浏览者不同的心理感受。
如红色,代表热情、活泼、温暖、幸福和吉祥。会让人激动、兴奋,网页使用过多红色会使人的眼睛产生视疲劳。但如果其中加入少量蓝色,会中和掉红色的抢眼;加入少量黑色,可以变得平稳,减少视觉疲劳;加入少量白色,可以使网页变得温柔一些。

绿色代表新鲜、充满希望、和平、安逸和青春。

绿色具有黄色和蓝色两种颜色成分。在绿色中,将黄色的扩张感和蓝色的收缩感中和,并将黄色的温暖与蓝色的寒冷感相抵消。绿色和金黄、淡白搭配可产生优雅、舒适的氛围。

蓝色代表深沉、永恒、理智、诚实、公正。蓝色和白色的搭配能体现浪漫、淡雅的氛围。

紫色代表优雅与神秘;白色代表纯洁、纯真与神圣;黑色代表深沉、压抑;黄色代表快乐与希望。

色彩也有季节性。
春天具有清新、明朗、年轻的感觉。色彩搭配以暖色系的黄色或绿色为基调。主要使用明度与纯度较高的颜色。通过明亮华丽的色调。使人感受到生命力与能量。

夏天给人热烈、有风度的感受。色彩搭配更适合以冷色系的颜色为基调,选择朴素色调和明色调的冷色作为主色和辅助色,点缀色适宜采用纯度较高的颜色。

秋天具有智慧又宁静的感觉,色彩搭配以暖色系的黄色为基调,并通过低纯度与低明度展现出深沉而丰饶的形象。

冬天则具有干练、硬朗、冰冷的气质。色彩搭配以冷色系或偏暖色的颜色为基调,所有色系的颜色都可以作为点缀色。

三、网页色彩搭配原理及色彩的搭配方案。
网站色彩是树立网站形象的关键要素之一。
色彩搭配既是一项技术性工作,也是一项艺术性很强的工作。

明白网页色彩搭配的原理有助于了解网页的背景、文字、图标、边框、链接等应该采用什么样的色彩,搭配什么样的色彩才能最好的表达出网站的内涵和主题。

网站色彩搭配需要遵循以下原理:
色彩的鲜明性与独特性:一个网站的用色必须要有自己独特的风格,这样才能显得个性鲜明,给浏览者留下深刻的印象。

色彩的艺术性:网站设计也是一种艺术活动,需要遵循艺术规律。在考虑到网站本身特点的同时,应当按照内容决定行使的原则,大胆的进行艺术创新,设计出既符合网站要求,又有一定艺术特色的网站。

色彩搭配的合理性:色彩搭配在遵循艺术规律的同时,还要考虑人的生理特点。色彩和表达的内容气氛相适合,能够给人一种和谐、愉悦的感觉。

给大家推荐两个超棒的网站,Brand Colors和阿里云·速成美站
前者Brand Colors网站收集了上千种世界知名品牌的配色方案,并且按照字母表顺序排列方便查找。

像阿迪达斯、爱彼迎、亚马逊、安卓、微软、百度、苹果、CNN等这些大品牌都在其中。如果对于色彩搭配没有灵感,可以学习世界知名品牌的配色方案。
最重要的是,这些都是经典的配色,看到喜欢的直接点击色彩,就能显示色值,拿去套用就好了。

另一个云·速成美站是阿里云的建站产品,网站设计最重要的是什么,实操呀!
云·速成美站只需要500元不到,就可以购买一个完整的建站模板。不仅可以学习如何建设网站,还能把学习到的网站色彩搭配应用到实际的网站建设中。网站设计是否合理,色彩搭配是否吸睛,一目了然。

四、有哪些色彩搭配的技巧。
使用单色。
尽管网站设计要尽量避免采用单一色彩,以免产生单调的感觉,但是通过调整色彩的饱和度和透明度,也可以产生变化,使网站避免单调,做到色彩统一有层次。

使用邻近色。
所谓邻近色,就是色带上相邻近的颜色,如绿色和蓝色,红色和黄色。采用邻近色设计网页可以使网页避免色彩杂乱,易于达到页面的色彩丰富,和谐统一。

使用对比色。
对比色可以突出重点,产生强烈的视觉效果。在设计时,一般以一种颜色为主色调,对比色作为点缀,这样可以起到画龙点睛的作用。

黑色的使用。
黑色一般作为背景色,与其他纯度的色彩搭配使用。
但是如果使用恰当、设计合理,也能产生很强的艺术效果。

背景色的使用。
背景的颜色不要太深,否则会显得过于厚重,影响整个页面的显示效果。
其次,背景色要与文字的色彩对比强烈一些。但也有例外,如黑色背景衬托亮丽的文本和图像,会给人一种另类的感觉。

色彩的数量。
一般来说,网站用色应控制在4种色彩以内,通过调整色彩的各种属性来产生颜色的变化,保持整个网页的色调统一。
使用的颜色过多会使网页变得很“花”,缺乏统一和协调,给人一种繁杂的感觉。

要和网站内容匹配。
首先要了解网站所要传达的信息和品牌,进而选择可以加强这些信息的颜色。
如设计一个金融机构网站时,要选择冷色系、柔和的颜色,像蓝、灰或绿,如果使用暖色系、活泼的颜色,则会破坏网站品牌的调性。

围绕网页主题。
色彩要能烘托出主题。根据主题确定网站颜色,同时还要考虑网站的访问对象,文化的差异也会使色彩产生非预期的反应。
还有,不同地区与不同年龄层对颜色的反应也有所不同,年轻人一般比较喜欢饱和色,但是却无法吸引高年龄层人群的兴趣。

总之,色彩的使用并没有一定的法则,它与每个人的审美、喜好、地域、知识层次等有关。

一般先确定一种能体现主题的主体色,然后根据具体的需要应用近似色或对比色来完成整个页面的配色方案。使整个页面达到和谐、赏心悦目的视觉效果。

相关文章
|
4月前
|
机器学习/深度学习 编解码 算法
宣传技能培训2——《图片后期处理与制作》光影魔术师:一小时速成Lightroom图片后期软件 + 案例分析
宣传技能培训2——《图片后期处理与制作》光影魔术师:一小时速成Lightroom图片后期软件 + 案例分析
88 0
|
4月前
|
图形学
如何在微信小游戏制作工具中做出好看的粒子效果?
如何在微信小游戏制作工具中做出好看的粒子效果?
44 1
|
11月前
五款炫酷精美动态登录页面,彩虹气泡动态云层深海灯光水母炫酷星空蛛网HTMLCSS源码
五款炫酷精美动态登录页面,彩虹气泡动态云层深海灯光水母炫酷星空蛛网HTMLCSS源码
72 0
|
11月前
|
图形学
如何做出好看的粒子效果
嗨!大家好,我是小蚂蚁。 微信小游戏制作工具提供了简单的粒子插件,使用起来简单明了(如果你用过Unity的粒子组件就知道这个有多简单明了了),虽然功能相对简单,可设置的属性也有限,但是我们仍然能够用它在游戏中做出漂亮的效果。 比如说在彩虹星球大冒险中,所有的爆炸都是使用的粒子效果来实现的。
97 0
|
11月前
|
IDE 编译器 开发工具
|
前端开发 JavaScript
阿狸(Hans设计卡通形象)的幸福生活 ---- 充满趣味性(可自定义更改)
阿狸(Hans设计卡通形象)的幸福生活 ---- 充满趣味性(可自定义更改)
82 0
阿狸(Hans设计卡通形象)的幸福生活 ---- 充满趣味性(可自定义更改)
|
缓存 人工智能 小程序
【零基础微信小程序】基于百度大脑人像分割的证件照换底色小程序实战开发
通过小程序配合百度的人体分割接口进行简单的照片渲染,本期做一个小工具,对学生党、工作人员、打印店铺以及涉及到求职简历办公等需求的人员都很有用,这个项目由于一些原因不再做维护了,于是打算出个教程将证件照小程序分享给大家,这里采用百度AI接口是因为现在网上开源的py脚本对边缘计算不是很优秀,会有很多模糊点没办法处理,识别人体的轮廓范围,与背景进行分离,适用于拍照背景替换、照片合成、身体特效等场景。输入正常人像图片,返回分割后的二值结果图、灰度图、透明背景的人像图(png格式);并输出画面中的人数、人体坐标信息,
409 0
【零基础微信小程序】基于百度大脑人像分割的证件照换底色小程序实战开发
|
算法 C++
【硬核教程】,如何摆脱黑白框编程,1小时学会用c++做一个飞机大战
【硬核教程】,如何摆脱黑白框编程,1小时学会用c++做一个飞机大战
|
存储 前端开发 JavaScript
文字到底能玩出多少花样(一) 炫酷文字粒子效果实现
文字到底能玩出多少花样(一) 炫酷文字粒子效果实现
161 0
|
存储 C++ Windows
眼前一亮!2款免费手绘风流程图绘制工具
“这种风格的流程图好漂亮啊,请问是用什么工具画的啊?”
眼前一亮!2款免费手绘风流程图绘制工具