微谈网页设计颜色搭配原则与方法
颜色原理
色相:
指的是色彩的名称。这是色彩最基本的特征,是一种色彩区别于另一种色彩的最主要的因素。
比如说紫色,绿色,黄色等等都代表了不同的色相。同一色相的色彩,调整一下亮度,或者纯度很容易搭配,比如,深绿,暗绿,草绿,亮绿。
明度:
也叫亮度,指的是色彩的明暗程度,明度越大,色彩越亮。
比如一些购物,儿童类网站。用的是一些鲜亮的颜色,让人感觉绚丽多姿,生气勃勃。明度越低,颜色越暗。主要用于一些游戏类网站,充满神秘感;一些个人站长为了体现自身的个性,也可以运用一些暗色调来表达个人的一些孤僻,或者忧郁等性格。有明度差的色彩更容易调和。
纯度(饱和度):
指色彩的鲜艳程度,纯度高的色彩纯,鲜亮。纯度底的色彩暗淡,含灰色。
Photoshop中对应属性
色相
色相反差大人眼容易辨认
饱和度
饱和度高人眼容易辨认
明度
明度对比强人眼容易辨认
色彩所传达的涵义
红色 热情、浪漫、火焰、暴力、侵略、停止、警告、 禁止。
橙色 秋天、活跃、新鲜、愉快、能量、食欲
紫色 创造、谜、忠诚、神秘、稀有。
蓝色 忠诚、安全、保守、宁静、冷漠、悲伤。 (忧 郁;理智;冷静; 稳 重;成熟;诚信;商务)
绿色 自然、稳定、成长、忌妒、行(北美)、允许。
黄色 明亮、光辉、疾病、懦弱。
黑色 能力、精致、现代感、死亡、病态、邪恶。
白色 纯洁、天真、洁净、真理、和平、冷淡、贫乏、 死 亡(中国)。
网页安全色
? 网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合(调色板),也就是说这些颜色在任何终端浏览用户显示设备上的现实效果都是相同的。所以使用网页安全色进行网页配色可以避免原有的颜色失真问题。
? 网页顏色共216色
? 红色分為0,51,102,153,204,255
? 绿色分為0,51,102,153,204,255,
? 蓝色分為0,51,102,153,204,255.
? 然后就是组合了,6*6*6=216色了。
是不是一定要用页面安全色?
22种真正安全的网页安全色
是不是一定要用网页安全色?
216种颜色毕竟有限,仅仅为了保持统一严谨而采用安全色,会严重限制了创作发挥,也扼杀很多精彩纷呈的网页。
256×256×256=16777216 >>>>216
所以网页安全色要用,但不必过分追求
艺术规律
如果一个网站的色彩鲜明,很容易引人注意,会给浏览者耳目一新的感觉。
色彩的独特性:
要有与众不同色彩,网页的用色必须要有自己独特的风格,这样才能给人浏览者留下深刻的印象。
色彩的艺术性:
网站设计是一种艺术活动,因此必须遵循艺术规律。按照内容决定形式的原则,在考虑网站本身特点的同时,大胆进行艺术创新,设计出既符合网站要求,又具有一定艺术特色的网站。
色彩搭配的合理性
色彩要根据主题来确定,不同的主题选用不同的色彩。
颜色搭配方法
根据页面风格以及产品本身的诉求确定主色
色彩有心理暗示的作用,很多行业都有其行业色,很多品牌都有其品牌色:
例 如:就是麦当劳、肯德基这类快餐店不约而同的选择了红色作为主基调,因为红色有增进食欲的效果。红色代表热情、革命和危险;绿色代表希望、春天和环保;橙 色代表活跃和快乐;紫色代表华丽、妖艳、神秘。很多品牌都有一套自己的VI,里面颜色使用都是有一套的,奥迪/灰,可口可乐/红,百事可乐/蓝
根据主色确定配色
网页配色很重要,网页颜色搭配的是否合理会直接影响到访问者的情绪。好的色彩搭配会给访问者带来很强的视觉冲击力,不恰当的色彩搭配则会让访问者浮躁不安。
同种色彩搭配 邻近色彩搭配 对比色彩搭配
同种色彩搭配
同种色彩搭配是指首先选定一种色彩,然后调整其透明度和饱和度,将色彩变淡或加深,而产生新的色彩,这样的页面看起来色彩统一,具有层次感。网页
特点:
色相相同、明度或纯度不同
例子:
蓝与浅蓝(蓝+白),绿与粉绿(绿+白)与墨绿(绿+黑)
优劣:
对比效果统一、文静、雅致、含蓄、稳重,但易产生单调、呆板的弊病
同种色彩搭配
相近色色彩搭配
特点:
色相环上相邻二至三色对比,距离大约30度左右,为弱对比类型
例子:
红橙与橙与黄橙色
优劣:
效果感觉柔和、和谐、雅致、文静,但感觉单调、模糊、乏味、无力,必须调节差来加强效果
相近色搭配
类似色色彩搭配
邻近色是指在色环上相邻的颜色,如绿色和蓝色、红色和黄色即互为邻近色。采用邻近色搭配可以里是网页避免色彩杂乱,易于达到页面和谐统一的效果。
特点:
色相距离约60度左右,为较弱对比类型。
例子:
红与黄橙色对比等等
优劣:
效果丰富活泼,但又不失统一雅致、和谐的感觉。
类似色色彩搭配
对比色彩搭配
一 般来说,色彩的三原色(红、黄、蓝)最能体现色彩间的差异。色彩的强烈对比具有视觉诱惑力,能够起到几种实现的作用。对比色可以突出重点,产生强烈的视觉 效果。通过合理使用对比色,能够使网站特色鲜明、重点突出。在设计时,通常以一种颜色为主色调,其对比色作为点缀,以起到画龙点睛的作用。
特点:
色相对比距离120度左右,为强对比类型
例子:
黄绿与红紫色
优劣:
效果强烈、醒目、有力、活泼、丰富,但也不易统一而感杂乱、刺激、造成视觉疲劳。一般需要采用多种调和手段来改善对比效果
对比色彩搭配
补色色彩搭配
是广义上的对比色。在色环上划直径,正好相对(即距离最远)的两种色彩互为补色。
特点:
色相对比距离180度左右
例子:
红色是绿色的补色;橙色是蓝色的补色;黄色是紫色的补色。
优劣:
两种颜色互为补色的时候,一种颜色占的面积远大于另一种颜色的面积的时候,就可以增强画面的对比,使画面能够很显眼。一般情况下,补色运用有得有失。
补色色彩搭配
暖色与冷色色彩搭配
暖色色彩搭配
是指使用红色橙色黄色集合色等色彩的搭配。这种色调的运用可为网页营造出稳性、和谐和热情的氛围。
冷色色彩搭配
冷色色彩搭配是指使用绿色、蓝色及紫色等色彩的搭配,这种色彩搭配可为网页营造出宁静、清凉和高雅的氛围。冷色点色彩与白色搭配一般会获得较好的视觉效果。
暖色系
暖色比冷色更有亲近感。因此说来,一个较暗的暖色可能看起来和一个在数值上较亮的冷色一样亮。
红色:动力,力量,热情,爱
橙色:快乐,热情,吸引力,成功
黄色:欢乐,刺激,焦点
冷色系
冷色比比暖色更有距离感。因此说来,一个较亮的冷色可能看起来和一个在数值上较暗的暖色一样亮。
绿色:清爽,新鲜,威望,凉爽,冷静,
蓝色:可靠,可信,可依赖,宁静
紫色:灵性,仪式,神秘,转生,皇权
中性色
中性色对情绪的影响更小,因此常被考虑用来做客观介绍。然而,若用得好,中立色依然可以有自己的暗示。“纯”黑和“纯”白是我们的理想的“光明”和“黑暗”的色彩代表。
黑色:性感,神秘,服从,危险
白色:纯洁,无辜,恢复,中立,永恒
搭配消色
所 谓的消色,就是指黑白灰(也有说是黑白金银灰),这类颜色由于本身没有色性,所以可以说是万用搭配色。当然,说是说万用搭配色,但是也是有一些需要注意的 地方:首先,由于本身没有色性,他们必须和色性比较强的颜色搭配会比较出效果;其次,消色与其他颜色搭配的时候,比例一定要控制好,尤其是灰色,灰色是一 种很“高档”的颜色,但是问题是使用的过多,会使得页面灰蒙蒙没有质感。
调整色彩在页面中的比例
主颜色、背景色、辅助颜色、突出颜色
主颜色:
主要颜色,起到在整体上显示出站点整体内容和风格的重要作用。
背景色:
用于背景的颜色。
辅助颜色:
辅助主颜色的次要颜色,用于协调主颜色凝造整体气氛。
突出颜色:
用于突出,强调显示,主要使用于占用范围较小的按钮、标签等处。
产品:色相对比强烈 明暗反差大
标题:色相对比较弱或无 明暗反差大
内容:明暗反差较强,无色相区别
配色器
http://www.jd100.net/ip/color.htm
http://kuler.adobe.com/#themes/rating?time=30
wellstyled.com/tools/colorscheme2/index-en.html
转载于:https://www.cnblogs.com/webqiand/p/4315790.html
微谈网页设计颜色搭配原则与方法相关推荐
- 网页设计中色彩搭配原则及方法
from:http://www.cyhd.net/theory/2008/1117/article_1054.html 在这一篇中将介绍色彩搭配原则和方法! 一.色彩搭配原则 在选择网页色彩时 ...
- 网页/设计颜色搭配技巧
http://www.58pic.com/peisebiao/#ps11 转载于:https://my.oschina.net/u/3504376/blog/1162738
- 网页设计有哪些布局的方法和技巧?
网页设计布局的重要性,相信做设计的人都能明白,一个优秀的布局往往会给用户带来更好的体验,从而使用户愿意再次访问该网站.那么网页设计有哪些布局的方法和技巧呢?下面为大家总结了布局的六个方法,其实设计思路 ...
- 移动网页设计9大原则——第1部分
2019独角兽企业重金招聘Python工程师标准>>> [编者按]本文作者为来自 Mainstreethost 的站内营销专家 Kim Speier,主要介绍移动网页设计的九个原则, ...
- html网页设计思路,极简主义网页设计思路与原则
极简主义是一种风格,也是很多高级设计师都信奉的原则之一.它在室内装修设计,人物造型设计,时尚搭配服装设计,平面vi包装设计以及本文重点提到的网页设计等方面,都有着很多经典的案例.素马设计分享频道也分享 ...
- html网页特效微课,网页设计与制作(HTML5+CSS3+JavaScript)(第4版)(微课版)
网页设计与制作(HTML5+CSS3+JavaScript)(第4版)(微课版) 编辑 锁定 讨论 上传视频 <网页设计与制作(HTML5+CSS3+JavaScript)(第4版)(微课版)& ...
- 浅谈网页设计中的构图
网页给人最直观的感受就是它的页面框架与构造,就像一座大楼的主体框架与形态,你可能记不起东方明珠塔和艾菲尔铁塔是用什么颜色或什么材料涂的外 墙,但我想你一定记得起它们的什么样的形状.同样,网页设计中的构 ...
- 浅谈网页设计的形式美法则
不知为什么会突然想起写这方面的内容,作为一个前端开发人员,设计能力不是主要的,但是我觉得艺术或者关于美学方面的知识,了解多些对提升自我是大有裨益的.它不仅仅对前端开发的用户体验方面有较大的帮助,也会提 ...
- 浅谈网页设计中的色彩理论
无可争议的是,色彩是任何设计领域中最重要的一方面. 设计师在决定了一个网站风格的同时,也决定了网站的情感,而情感的表达很大程度上取决于颜色的选择.颜色是很有力的工具,所有设计师在设计网页时就应该明白这 ...
最新文章
- 新站上线后应该做哪些有利于seo的工作
- spark rdd map java_如何在spark RDD(JavaRDD)中获取记录的文件名
- Swift - 文本输入框(UITextField)的用法
- 迪杰斯特拉算法 php,Dijkstra算法的复杂度
- asp.net FileUpload上传文件夹并检测所有子文件
- 技术人写作和写代码一样重要
- 【炼数成金 NOSQL引航 三】 Redis使用场景与案例分析
- 【flink】Flink 1.12.2 源码浅析 :Task数据输出
- 用C# Regex类实现的一些常规输入判断
- bex5 3.7版本
- 如何编制一份软件项目开发计划书
- CTFhub—弱密码(web)
- win2012金蝶服务器不能运行,解决在win7、win10 下无法安装 金蝶KIS 12.3 专业版 的问题...
- 根据数据库中提供的坐标(经纬度) 在前端地图上标示坐标点、并显示
- Android Studio连接手机教程
- 比热容相关的热量计算机应用,关于比热容的计算.ppt
- luogu P2801 教主的魔法
- 微信公众平台搭建与开发揭秘
- DVWA——暴力破解
- 蓝桥杯包子凑数java解析,蓝桥杯之包子凑数