- 浏览: 3315788 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (567)
- Web前端-html/表单 (19)
- Web前端-CSS (24)
- Web前端-CSS框架 (4)
- Web前端-JS语言核心 (50)
- Web前端-JS客户端 (26)
- nodejs生态+grunt (10)
- seajs和requirejs (9)
- backbone等框架 (7)
- 模板基础 (7)
- Web前端-deps(不改动) (6)
- Web前端-component (10)
- Web前端-jquery-plugin (13)
- 浏览器兼容性 (6)
- Web前端-使用jQuery (25)
- Web前端-使用jqueryui (6)
- Web前端-性能优化 (3)
- Web协议-HTTP (6)
- ExtJS (13)
- PHP (22)
- PHP面向对象 (4)
- PHP扩展-SOAP (6)
- PHP扩展-curl (4)
- PHP与HTML(导出) (5)
- PHP扩展-综合 (7)
- mysql基础应用 (18)
- 技术心情 (18)
- 算法和面试题 (17)
- 工具(开发)使用 (36)
- memcached原理 (2)
- session和cookie (4)
- UML (2)
- Web前端_FusionCharts (5)
- Web前端_Flex (4)
- Web前端_JSP (3)
- JavaSE (10)
- JavaEE (4)
- tomcat (2)
- Servlet开发 (3)
- Spring开发 (1)
- REST相关 (2)
- 大访问量、高并发 (2)
- 网络编程 (1)
- YII (21)
- linux命令和内核 (12)
- yii与数据库 (10)
- yii与表单 (12)
- yii view层 (1)
- perl (7)
- yii扩展 (7)
- shell (4)
- photoshop (7)
- 视觉设计 (2)
- 我关注的名人在路上 (4)
- 1-自学能力 (1)
- 2-人际沟通能力 (3)
- 3-职业规划能力 (7)
- 4-项目管理能力 (2)
- python (3)
- django (4)
- Mysql高级应用 (6)
- prototype.js (4)
- Web系统安全 (1)
- Web前端-mobile (2)
- egret (6)
- jQuery源码分析 (5)
- fis (4)
最新评论
-
yzq21056563:
感谢作者分享~请教下,http://www.lisa33xia ...
CSS基础:text-overflow:ellipsis溢出文本 -
u012206458:
$.ajax的error,complete,success方法 -
DEMONU:
谢谢,虽然不能给你赞助,但是要给你顶
mysql中key 、primary key 、unique key 与index区别 -
njupt_tolmes:
阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿滕庆亚 ...
CSS基础:text-overflow:ellipsis溢出文本 -
zenmshuo:
用过SpreadJS,也包含数据可视化的图表
推荐几个web中常用js图表插件
作者:zccst
在网上搜:网站配色。
可以搜到配色网:http://www.peise.net/palette/2.html
网页色彩搭配原理及技巧
随着网页制作经验的积累,我们用色有这样的一个趋势:单色->五彩缤纷->标准色->单色。一开始因为技术和知识缺乏,只能制作出简单的网页,色彩单一;在有一定基础和材料后,希望制作一个漂亮的网页,将自己收集的最好的图片,最满意色彩堆砌在页面上;但是时间一长,却发现色彩杂乱,没有个性和风格;第三次重新定位自己的网站,选择好切合自己的色彩,推出的站点往往比较成功;当最后设计理念和技术达到顶峰时,则又返朴归真,用单一色彩甚至非彩色就可以设计出简洁精美的站点。
色彩搭配原理分析及技巧
一、红色系
红色系是从色相环上的红紫色到朱红色之间的色彩。它的刺激作用很大,具有很高的注目性和视认性。大红色是暖色系里温度最高的色彩,红色系原色彩对人的心理能产生很大的鼓舞作用。
1.纯色使人产生如下心理感受:热的、活泼的、宽大的、引人注目、辣辣的、令人疲劳、不透明、健康的、血、热闹、圣诞节、太阳、口红、干燥、喜气洋洋、结婚、愉快、热情、热心、热爱、艳丽、危险、火灾、权势、活力、幸福、吉祥、丰富、野蛮、忠诚、大方、革命、暴力、残忍、贪婪、愤怒、浪漫、开放、庄重、公正、激昂、恐怖。
2.纯色加白(清色)使人产生如下心理感受:健康、圆满、幼稚、婴儿、温水、浪漫的、快甜蜜的、化妆品、优美、娇柔。
3.纯色加黑(暗色)使人产生如下心理感受:枯萎、黄昏、固执、孤僻、憔悴、烦恼、秋天、不安、古老、独断。
4.纯色加灰(浊色)使人产生如下心理感受:恶心、污泥、烦闷、哀伤、忧郁、阴森、寂寞、昏昏沉沉。
二、黄色系
黄红色系的性质和红色系性质很接近,该色系大致以橘红色为中心,另有橙色、黄丹、柿红、赭石、琥珀等色彩组成黄红色系。其色彩刺激没有红色那么大,但其色彩性质轻浮而冲动,所以具有很大的视觉警戒力,具有很强的视认性和引人注目的感觉。喜欢高纯度黄红色的人不太多,而当该色系变浅或变浊时,喜欢的人就很多。日常生活上见到的许多物品均是这一类色彩,尤其是淡米黄类的色彩,具有促进食欲的作用;茶褐色一类的色彩使人感觉沉着安定,这样的色彩均是理想的设计色彩。
1.纯色使人产生如下心理感受:橘子、柿子、火焰的尖端、强烈的、冲动的、开朗的、跳动的、热烈摇滚、嬉皮、华丽、艳阳天、丰富、甜蜜、甘美、光明、欢乐、兴奋、少壮、力量充沛、顽皮、疑惑、暴躁、厌烦、嫉妒、悲伤、勇气十足、容易轻举妄动、野心。
2.纯色加白(清色)使人产生如下心理感受:细嫩、温馨、暖和、柔润、回忆、和谐、柔顺、怡情、轻巧、慈祥。
3.纯色加黑(暗色)使人产生如下心理感受:大地、沉着、安定、古香古色、老朽、悲观、情深、雅宴、严肃、拘谨。
4.纯色加灰(浊色)使人产生如下心理感受:灰尘、沙滩、故土、怀思、呆痴、灰心、退休。
随着网页制作经验的积累,我们用色有这样的一个趋势:单色->五彩缤纷->标准色->单色。一开始因为技术和知识缺乏,只能制作 出简单的网页,色彩单一;在有一定基础和材料后,希望制作一个漂亮的网页,将自己收集的最好的图片,最满意色彩堆砌在页面上;但是时间一长,却发现色彩杂 乱,没有个性和风格;第三次重新定位自己的网站,选择好切合自己的色彩,推出的站点往往比较成功;当最后设计理念和技术达到顶峰时,则又返朴归真,用单一 色彩甚至非彩色就可以设计出简洁精美的站点。
“到底用什么色彩搭配好看呢?你能不能推荐几种配色方案?”别急,这里有一点技巧,可以帮助你迅速成为调色大师:)
1.用一种色彩。这里是指先选定一种色彩,然后调整透明度或者饱和度,(说得通俗些就是将色彩变淡或则加深),产生新的色彩,用于网页。这样的页面看起来色彩统一,有层次感。
2.用两种色彩。先选定一种色彩,然后选择它的对比色(在photoshop里按ctrl+shift+I)。我的主页用蓝色和黄色就是这样确定的。整个页面色彩丰富但不花稍。
3.用一个色系。简单的说就是用一个感觉的色彩,例如淡蓝,淡黄,淡绿;或者土黄,土灰,土蓝。确定色彩的方法各人不同,我是在photoshop里按前景色方框,在跳出的拾色器窗中选择"自定义",然后在"色库"中选就可以了:)
4.用黑色和一种彩色。比如大红的字体配黑色的边框感觉很"跳"。
在网页配色中,忌讳的是: 1.不要将所有颜色都用到,尽量控制在三种色彩以内。2.背景和前文的对比尽量要大,(绝对不要用花纹繁复的图案作背景),以便突出主要文字内容
■ 主色调
页面色彩的主要色调、总趋势,其他配色不能超过该主要色调的视觉面积。(背景白色不一定根据视觉面积决定,可以根据页面的感觉需要。)
■ 辅色调
仅次与主色调的视觉面积的辅助色,是烘托主色调、支持主色调、起到融合主色调效果的辅助色调。
■ 点睛色
在小范围内点上强烈的颜色来突出主题效果,使页面更加鲜明生动。
■ 背景色
衬托环抱整体的色调,协调、支配整体的作用。
→ 色调网页例图:http://www.robinssondivision.com
一、主色调
红色---是一种激奋的色彩。刺激效果,能使人产生冲动,愤怒,热情,活力的感觉。
绿色---介于冷暖两中色彩的中间,显得和睦,宁静,健康,安全的感觉。 它和金黄,淡白搭配,可以产生优雅,舒适的气氛。
橙色---也是一种激奋的色彩,具有轻快,欢欣,热烈,温馨,时尚的效果。
黄色---具有快乐,希望,智慧和轻快的个性,它的明度最高。
蓝色---是最具凉爽,清新,专业的色彩。它和白色混合,能体现柔顺,淡雅,浪漫的气氛(象天空的色彩:)
白色---具有洁白,明快,纯真,清洁的感受。
黑色---具有深沉,神秘,寂静,悲哀,压抑的感受。
灰色---具有中庸,平凡,温和,谦让,中立和高雅的感觉。
二、辅色调
颜 色 搭 配
一、红色的色感温暖,性格刚烈而外向,是一种对人刺激性很强的色。红色容易引起人的注意,也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳的色。
a) 在红色中加入少量的黄,会使其热力强盛,趋于躁动、不安。
b) 在红色中加入少量的蓝,会使其热性减弱,趋于文雅、柔和。
c) 在红色中加入少量的黑,会使其性格变的沉稳,趋于厚重、朴实。
d) 在红中加入少量的白,会使其性格变的温柔,趋于含蓄、羞涩、娇嫩。
二、黄色的性格冷漠、高傲、敏感、具有扩张和不安宁的视觉印象。黄色是各种色彩中,最为娇气的一种色。只要在纯黄色中混入少量的其它色,其色相感和色性格均会发生较大程度的变化。
a) 在黄色中加入少量的蓝,会使其转化为一种鲜嫩的绿色。其高傲的性格也随之消失,趋于一种平和、潮润的感觉。
b) 在黄色中加入少量的红,则具有明显的橙色感觉,其性格也会从冷漠、高傲转化为一种有分寸感的热情、温暖。
c) 在黄色中加入少量的黑,其色感和色性变化最大,成为一种具有明显橄榄绿的复色印象。其色性也变的成熟、随和。
d) 在黄色中加入少量的白,其色感变的柔和,其性格中的冷漠、高傲被淡化,趋于含蓄,易于接近。
三、蓝色的色感冷嘲热讽,性格朴实而内向,是一种有助于人头脑冷嘲热讽静的色。蓝色的朴实、内向性格,常为那些性格活跃、具有较强扩张力的色彩,提供一 个深远、广埔、平静的空间,成为衬托活跃色彩的友善而谦虚的朋友。蓝色还是一种在淡化后仍然似能保持较强个性的色。如果在蓝色中分别加入少量的红、黄、 黑、橙、白等色,均不会对蓝色的性格构成较明显的影响力。
a) 如果在橙色中黄的成份较多,其性格趋于甜美、亮丽、芳香。
b) 在橙色中混入小量的白,可使橙色的知觉趋于焦躁、无力。
四、绿色是具有黄色和蓝色两种成份的色。在绿色中,将黄色的扩张感和蓝色的收缩感相中庸,将黄色的温暖感与蓝色的寒冷感相抵消。这样使得绿色的性格最为平和、安稳。是一种柔顺、恬静、潢足、优美的色。
a) 在绿色中黄的成份较多时,其性格就趋于活泼、友善,具有幼稚性。
b) 在绿色中加入少量的黑,其性格就趋于庄重、老练、成熟。
c) 在绿色中加入少量的白,其性格就趋于洁净、清爽、鲜嫩。
五、紫色的明度在有彩色的色料中是最低的。紫色的低明度给人一种沉闷、神秘的感觉。
a) 在紫色中红的成份较多时,其知觉具有压抑感、威胁感。
b) 在紫色中加入少量的黑,其感觉就趋于沉闷、伤感、恐怖。
c) 在紫色中加入白,可使紫色沉闷的性格消失,变得优雅、娇气,并充满女性的魅力。
六、白色的色感光明,性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。如果在白色中加入其它任何色,都会影响其纯洁性,使其性格变的含蓄。
a) 在白色中混入少量的红,就成为淡淡的粉色,鲜嫩而充满诱惑。
b) 在白色中混入少量的黄,则成为一种乳黄色,给人一种香腻的印象。
c) 在白色中混入少量的蓝,给人感觉清冷、洁净。
d) 在白色中混入少量的橙,有一种干燥的气氛。
e) 在白色中混入少量的绿,给人一种稚嫩、柔和的感觉。
f) 在白色中混入少量的紫,可诱导人联想到淡淡的芳香。
三、点睛色
暂无
四、背景色
对于做网页的初学者可能更习惯于使用一些漂亮的图片作为自己网页的背景,但是,浏览一下大型的商业网站,你会发现他们更多运用的是白色、蓝色、黄色等,使得网页显得典雅,大方和温馨。更重要的是,这样可以大大加快浏览者打开网页的速度。
一般来说,网页的背景色应该柔和一些、素一些、淡一些,再配上深色的文字,使人看起来自然、舒畅。而为了追求醒目的视觉效果,可以为标题使用较深的颜 色。下面是我做网页和浏览别人的网页时,对网页背景色和文字色彩搭配积累的经验,这些颜色可以做正文的底色,也可以做标题的底色,再搭配不同的字体,一定 会有不错的效果,希望对大家在制作网页时有用。
BgcolorΚ″#F1FAFA″———做正文的背景色好,淡雅
BgcolorΚ″#E8FFE8″———做标题的背景色较好
BgcolorΚ″#E8E8FF″———做正文的背景色较好,文字颜色配黑色
BgcolorΚ″#8080C0″———上配黄色白色文字较好
BgcolorΚ″#E8D098″———上配浅蓝色或蓝色文字较好
BgcolorΚ″#EFEFDA″———上配浅蓝色或红色文字较好
BgcolorΚ″#F2F1D7″———配黑色文字素雅,如果是红色则显得醒目
BgcolorΚ″#336699″———配白色文字好看些
BgcolorΚ″#6699CC″———配白色文字好看些,可以做标题
BgcolorΚ″#66CCCC″———配白色文字好看些,可以做标题
BgcolorΚ″#B45B3E″———配白色文字好看些,可以做标题
BgcolorΚ″#479AC7″———配白色文字好看些,可以做标题
BgcolorΚ″#00B271″———配白色文字好看些,可以做标题
BgcolorΚ″#FBFBEA″———配黑色文字比较好看,一般作为正文
BgcolorΚ″#D5F3F4″———配黑色文字比较好看,一般作为正文
BgcolorΚ″#D7FFF0″———配黑色文字比较好看,一般作为正文
BgcolorΚ″#F0DAD2″———配黑色文字比较好看,一般作为正文
BgcolorΚ″#DDF3FF″———配黑色文字比较好看,一般作为正文
浅绿色底配黑色文字,或白色底配蓝色文字都很醒目,但前者突出背景,后者突出文字。红色底配白色文字,比较深的底色配黄色文字显得非常有效果。
此文只是起一个“抛砖引玉”的作用,大家可以发挥想象力,搭配出更有新意、更醒目的颜色,使网页更具有吸引力
<style type="text/css">
<!--
.Alldiv {
MARGIN: 10px;WIDTH: 550px; LINE-HEIGHT: 1.6em; BORDER: 1px solid #FFF; HEIGHT: 50px
}
.div1 {
BORDER-LEFT-COLOR: #ffcc00; BORDER-BOTTOM-COLOR: #ffcc00; BORDER-TOP-COLOR: #ffcc00; BACKGROUND-COLOR: #fffff7; BORDER-RIGHT-COLOR: #ffcc00
}
.div2 {
BORDER-LEFT-COLOR: #96c2f1; BORDER-BOTTOM-COLOR: #96c2f1; BORDER-TOP-COLOR: #96c2f1; BACKGROUND-COLOR: #eff7ff; BORDER-RIGHT-COLOR: #96c2f1
}
.div3 {
BORDER-LEFT-COLOR: #9bdf70; BORDER-BOTTOM-COLOR: #9bdf70; BORDER-TOP-COLOR: #9bdf70; BACKGROUND-COLOR: #f0fbeb; BORDER-RIGHT-COLOR: #9bdf70
}
.div4 {
BORDER-LEFT-COLOR: #abdc8d; BORDER-BOTTOM-COLOR: #abdc8d; BORDER-TOP-COLOR: #abdc8d; BACKGROUND-COLOR: #f8ffe7; BORDER-RIGHT-COLOR: #abdc8d
}
.div5 {
BORDER-LEFT-COLOR: #adcd3c; BORDER-BOTTOM-COLOR: #adcd3c; BORDER-TOP-COLOR: #adcd3c; BACKGROUND-COLOR: #f2fddb; BORDER-RIGHT-COLOR: #adcd3c
}
.div6 {
BORDER-LEFT-COLOR: #bbe1f1; BORDER-BOTTOM-COLOR: #bbe1f1; BORDER-TOP-COLOR: #bbe1f1; BACKGROUND-COLOR: #eefaff; BORDER-RIGHT-COLOR: #bbe1f1
}
.div7 {
BORDER-LEFT-COLOR: #d1f0f6; BORDER-BOTTOM-COLOR: #d1f0f6; BORDER-TOP-COLOR: #d1f0f6; BACKGROUND-COLOR: #fafcfd; BORDER-RIGHT-COLOR: #d1f0f6
}
.div8 {
BORDER-LEFT-COLOR: #a9c9e2; BORDER-BOTTOM-COLOR: #a9c9e2; BORDER-TOP-COLOR: #a9c9e2; BACKGROUND-COLOR: #e8f5fe; BORDER-RIGHT-COLOR: #a9c9e2
}
.div9 {
BORDER-LEFT-COLOR: #e3e197; BORDER-BOTTOM-COLOR: #e3e197; BORDER-TOP-COLOR: #e3e197; BACKGROUND-COLOR: #ffffeb; BORDER-RIGHT-COLOR: #e3e197
}
.div10 {
BORDER-LEFT-COLOR: #f8b3d0; BORDER-BOTTOM-COLOR: #f8b3d0; BORDER-TOP-COLOR: #f8b3d0; BACKGROUND-COLOR: #fff5fa; BORDER-RIGHT-COLOR: #f8b3d0
}
.div11 {
BORDER-LEFT-COLOR: #d3d3d3; BORDER-BOTTOM-COLOR: #d3d3d3; BORDER-TOP-COLOR: #d3d3d3; BACKGROUND-COLOR: #f7f7f7; BORDER-RIGHT-COLOR: #d3d3d3
}
.div12 {
BORDER-LEFT-COLOR: #bfd1eb; BORDER-BOTTOM-COLOR: #bfd1eb; BORDER-TOP-COLOR: #bfd1eb; BACKGROUND-COLOR: #f3faff; BORDER-RIGHT-COLOR: #bfd1eb
}
.div13 {
BORDER-LEFT-COLOR: #ffdd99; BORDER-BOTTOM-COLOR: #ffdd99; BORDER-TOP-COLOR: #ffdd99; BACKGROUND-COLOR: #fff9ed; BORDER-RIGHT-COLOR: #ffdd99
}
.div14 {
BORDER-LEFT-COLOR: #cacaff; BORDER-BOTTOM-COLOR: #cacaff; BORDER-TOP-COLOR: #cacaff; BACKGROUND-COLOR: #f7f7ff; BORDER-RIGHT-COLOR: #cacaff
}
.div15 {
BORDER-LEFT-COLOR: #a5b6c8; BORDER-BOTTOM-COLOR: #a5b6c8; BORDER-TOP-COLOR: #a5b6c8; BACKGROUND-COLOR: #eef3f7; BORDER-RIGHT-COLOR: #a5b6c8
}
.div16 {
BORDER-LEFT-COLOR: #cee3e9; BORDER-BOTTOM-COLOR: #cee3e9; BORDER-TOP-COLOR: #cee3e9; BACKGROUND-COLOR: #f1f7f9; BORDER-RIGHT-COLOR: #cee3e9
}
.div17 {
BORDER-LEFT-COLOR: #cae3ff; BORDER-BOTTOM-COLOR: #cae3ff; BORDER-TOP-COLOR: #cae3ff; BACKGROUND-COLOR: #f4f9ff; BORDER-RIGHT-COLOR: #cae3ff
}
.div18 {
BORDER-LEFT-COLOR: #5c9cc0; BORDER-BOTTOM-COLOR: #5c9cc0; BORDER-TOP-COLOR: #5c9cc0; BACKGROUND-COLOR: #f2faff; BORDER-RIGHT-COLOR: #5c9cc0
}
.div19 {
BORDER-LEFT-COLOR: #86b9d6; BORDER-BOTTOM-COLOR: #86b9d6; BORDER-TOP-COLOR: #86b9d6; BACKGROUND-COLOR: #f5fbff; BORDER-RIGHT-COLOR: #86b9d6
}
--></style>
<div class="Alldiv">
<div class="Alldiv div1"> </div>
<div class="Alldiv div2"> </div>
<div class="Alldiv div3"> </div>
<div class="Alldiv div4"> </div>
<div class="Alldiv div5"> </div>
<div class="Alldiv div6"> </div>
<div class="Alldiv div7"> </div>
<div class="Alldiv div8"> </div>
<div class="Alldiv div9"> </div>
<div class="Alldiv div10"> </div>
<div class="Alldiv div11"> </div>
<div class="Alldiv div12"> </div>
<div class="Alldiv div13"> </div>
<div class="Alldiv div14"> </div>
<div class="Alldiv div15"> </div>
<div class="Alldiv div16"> </div>
<div class="Alldiv div17"> </div>
<div class="Alldiv div18"> </div>
<div class="Alldiv div19"> </div>
</div>
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
在网上搜:网站配色。
可以搜到配色网:http://www.peise.net/palette/2.html
网页色彩搭配原理及技巧
随着网页制作经验的积累,我们用色有这样的一个趋势:单色->五彩缤纷->标准色->单色。一开始因为技术和知识缺乏,只能制作出简单的网页,色彩单一;在有一定基础和材料后,希望制作一个漂亮的网页,将自己收集的最好的图片,最满意色彩堆砌在页面上;但是时间一长,却发现色彩杂乱,没有个性和风格;第三次重新定位自己的网站,选择好切合自己的色彩,推出的站点往往比较成功;当最后设计理念和技术达到顶峰时,则又返朴归真,用单一色彩甚至非彩色就可以设计出简洁精美的站点。
色彩搭配原理分析及技巧
一、红色系
红色系是从色相环上的红紫色到朱红色之间的色彩。它的刺激作用很大,具有很高的注目性和视认性。大红色是暖色系里温度最高的色彩,红色系原色彩对人的心理能产生很大的鼓舞作用。
1.纯色使人产生如下心理感受:热的、活泼的、宽大的、引人注目、辣辣的、令人疲劳、不透明、健康的、血、热闹、圣诞节、太阳、口红、干燥、喜气洋洋、结婚、愉快、热情、热心、热爱、艳丽、危险、火灾、权势、活力、幸福、吉祥、丰富、野蛮、忠诚、大方、革命、暴力、残忍、贪婪、愤怒、浪漫、开放、庄重、公正、激昂、恐怖。
2.纯色加白(清色)使人产生如下心理感受:健康、圆满、幼稚、婴儿、温水、浪漫的、快甜蜜的、化妆品、优美、娇柔。
3.纯色加黑(暗色)使人产生如下心理感受:枯萎、黄昏、固执、孤僻、憔悴、烦恼、秋天、不安、古老、独断。
4.纯色加灰(浊色)使人产生如下心理感受:恶心、污泥、烦闷、哀伤、忧郁、阴森、寂寞、昏昏沉沉。
二、黄色系
黄红色系的性质和红色系性质很接近,该色系大致以橘红色为中心,另有橙色、黄丹、柿红、赭石、琥珀等色彩组成黄红色系。其色彩刺激没有红色那么大,但其色彩性质轻浮而冲动,所以具有很大的视觉警戒力,具有很强的视认性和引人注目的感觉。喜欢高纯度黄红色的人不太多,而当该色系变浅或变浊时,喜欢的人就很多。日常生活上见到的许多物品均是这一类色彩,尤其是淡米黄类的色彩,具有促进食欲的作用;茶褐色一类的色彩使人感觉沉着安定,这样的色彩均是理想的设计色彩。
1.纯色使人产生如下心理感受:橘子、柿子、火焰的尖端、强烈的、冲动的、开朗的、跳动的、热烈摇滚、嬉皮、华丽、艳阳天、丰富、甜蜜、甘美、光明、欢乐、兴奋、少壮、力量充沛、顽皮、疑惑、暴躁、厌烦、嫉妒、悲伤、勇气十足、容易轻举妄动、野心。
2.纯色加白(清色)使人产生如下心理感受:细嫩、温馨、暖和、柔润、回忆、和谐、柔顺、怡情、轻巧、慈祥。
3.纯色加黑(暗色)使人产生如下心理感受:大地、沉着、安定、古香古色、老朽、悲观、情深、雅宴、严肃、拘谨。
4.纯色加灰(浊色)使人产生如下心理感受:灰尘、沙滩、故土、怀思、呆痴、灰心、退休。
随着网页制作经验的积累,我们用色有这样的一个趋势:单色->五彩缤纷->标准色->单色。一开始因为技术和知识缺乏,只能制作 出简单的网页,色彩单一;在有一定基础和材料后,希望制作一个漂亮的网页,将自己收集的最好的图片,最满意色彩堆砌在页面上;但是时间一长,却发现色彩杂 乱,没有个性和风格;第三次重新定位自己的网站,选择好切合自己的色彩,推出的站点往往比较成功;当最后设计理念和技术达到顶峰时,则又返朴归真,用单一 色彩甚至非彩色就可以设计出简洁精美的站点。
“到底用什么色彩搭配好看呢?你能不能推荐几种配色方案?”别急,这里有一点技巧,可以帮助你迅速成为调色大师:)
1.用一种色彩。这里是指先选定一种色彩,然后调整透明度或者饱和度,(说得通俗些就是将色彩变淡或则加深),产生新的色彩,用于网页。这样的页面看起来色彩统一,有层次感。
2.用两种色彩。先选定一种色彩,然后选择它的对比色(在photoshop里按ctrl+shift+I)。我的主页用蓝色和黄色就是这样确定的。整个页面色彩丰富但不花稍。
3.用一个色系。简单的说就是用一个感觉的色彩,例如淡蓝,淡黄,淡绿;或者土黄,土灰,土蓝。确定色彩的方法各人不同,我是在photoshop里按前景色方框,在跳出的拾色器窗中选择"自定义",然后在"色库"中选就可以了:)
4.用黑色和一种彩色。比如大红的字体配黑色的边框感觉很"跳"。
在网页配色中,忌讳的是: 1.不要将所有颜色都用到,尽量控制在三种色彩以内。2.背景和前文的对比尽量要大,(绝对不要用花纹繁复的图案作背景),以便突出主要文字内容
■ 主色调
页面色彩的主要色调、总趋势,其他配色不能超过该主要色调的视觉面积。(背景白色不一定根据视觉面积决定,可以根据页面的感觉需要。)
■ 辅色调
仅次与主色调的视觉面积的辅助色,是烘托主色调、支持主色调、起到融合主色调效果的辅助色调。
■ 点睛色
在小范围内点上强烈的颜色来突出主题效果,使页面更加鲜明生动。
■ 背景色
衬托环抱整体的色调,协调、支配整体的作用。
→ 色调网页例图:http://www.robinssondivision.com
一、主色调
红色---是一种激奋的色彩。刺激效果,能使人产生冲动,愤怒,热情,活力的感觉。
绿色---介于冷暖两中色彩的中间,显得和睦,宁静,健康,安全的感觉。 它和金黄,淡白搭配,可以产生优雅,舒适的气氛。
橙色---也是一种激奋的色彩,具有轻快,欢欣,热烈,温馨,时尚的效果。
黄色---具有快乐,希望,智慧和轻快的个性,它的明度最高。
蓝色---是最具凉爽,清新,专业的色彩。它和白色混合,能体现柔顺,淡雅,浪漫的气氛(象天空的色彩:)
白色---具有洁白,明快,纯真,清洁的感受。
黑色---具有深沉,神秘,寂静,悲哀,压抑的感受。
灰色---具有中庸,平凡,温和,谦让,中立和高雅的感觉。
二、辅色调
颜 色 搭 配
一、红色的色感温暖,性格刚烈而外向,是一种对人刺激性很强的色。红色容易引起人的注意,也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳的色。
a) 在红色中加入少量的黄,会使其热力强盛,趋于躁动、不安。
b) 在红色中加入少量的蓝,会使其热性减弱,趋于文雅、柔和。
c) 在红色中加入少量的黑,会使其性格变的沉稳,趋于厚重、朴实。
d) 在红中加入少量的白,会使其性格变的温柔,趋于含蓄、羞涩、娇嫩。
二、黄色的性格冷漠、高傲、敏感、具有扩张和不安宁的视觉印象。黄色是各种色彩中,最为娇气的一种色。只要在纯黄色中混入少量的其它色,其色相感和色性格均会发生较大程度的变化。
a) 在黄色中加入少量的蓝,会使其转化为一种鲜嫩的绿色。其高傲的性格也随之消失,趋于一种平和、潮润的感觉。
b) 在黄色中加入少量的红,则具有明显的橙色感觉,其性格也会从冷漠、高傲转化为一种有分寸感的热情、温暖。
c) 在黄色中加入少量的黑,其色感和色性变化最大,成为一种具有明显橄榄绿的复色印象。其色性也变的成熟、随和。
d) 在黄色中加入少量的白,其色感变的柔和,其性格中的冷漠、高傲被淡化,趋于含蓄,易于接近。
三、蓝色的色感冷嘲热讽,性格朴实而内向,是一种有助于人头脑冷嘲热讽静的色。蓝色的朴实、内向性格,常为那些性格活跃、具有较强扩张力的色彩,提供一 个深远、广埔、平静的空间,成为衬托活跃色彩的友善而谦虚的朋友。蓝色还是一种在淡化后仍然似能保持较强个性的色。如果在蓝色中分别加入少量的红、黄、 黑、橙、白等色,均不会对蓝色的性格构成较明显的影响力。
a) 如果在橙色中黄的成份较多,其性格趋于甜美、亮丽、芳香。
b) 在橙色中混入小量的白,可使橙色的知觉趋于焦躁、无力。
四、绿色是具有黄色和蓝色两种成份的色。在绿色中,将黄色的扩张感和蓝色的收缩感相中庸,将黄色的温暖感与蓝色的寒冷感相抵消。这样使得绿色的性格最为平和、安稳。是一种柔顺、恬静、潢足、优美的色。
a) 在绿色中黄的成份较多时,其性格就趋于活泼、友善,具有幼稚性。
b) 在绿色中加入少量的黑,其性格就趋于庄重、老练、成熟。
c) 在绿色中加入少量的白,其性格就趋于洁净、清爽、鲜嫩。
五、紫色的明度在有彩色的色料中是最低的。紫色的低明度给人一种沉闷、神秘的感觉。
a) 在紫色中红的成份较多时,其知觉具有压抑感、威胁感。
b) 在紫色中加入少量的黑,其感觉就趋于沉闷、伤感、恐怖。
c) 在紫色中加入白,可使紫色沉闷的性格消失,变得优雅、娇气,并充满女性的魅力。
六、白色的色感光明,性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。如果在白色中加入其它任何色,都会影响其纯洁性,使其性格变的含蓄。
a) 在白色中混入少量的红,就成为淡淡的粉色,鲜嫩而充满诱惑。
b) 在白色中混入少量的黄,则成为一种乳黄色,给人一种香腻的印象。
c) 在白色中混入少量的蓝,给人感觉清冷、洁净。
d) 在白色中混入少量的橙,有一种干燥的气氛。
e) 在白色中混入少量的绿,给人一种稚嫩、柔和的感觉。
f) 在白色中混入少量的紫,可诱导人联想到淡淡的芳香。
三、点睛色
暂无
四、背景色
对于做网页的初学者可能更习惯于使用一些漂亮的图片作为自己网页的背景,但是,浏览一下大型的商业网站,你会发现他们更多运用的是白色、蓝色、黄色等,使得网页显得典雅,大方和温馨。更重要的是,这样可以大大加快浏览者打开网页的速度。
一般来说,网页的背景色应该柔和一些、素一些、淡一些,再配上深色的文字,使人看起来自然、舒畅。而为了追求醒目的视觉效果,可以为标题使用较深的颜 色。下面是我做网页和浏览别人的网页时,对网页背景色和文字色彩搭配积累的经验,这些颜色可以做正文的底色,也可以做标题的底色,再搭配不同的字体,一定 会有不错的效果,希望对大家在制作网页时有用。
BgcolorΚ″#F1FAFA″———做正文的背景色好,淡雅
BgcolorΚ″#E8FFE8″———做标题的背景色较好
BgcolorΚ″#E8E8FF″———做正文的背景色较好,文字颜色配黑色
BgcolorΚ″#8080C0″———上配黄色白色文字较好
BgcolorΚ″#E8D098″———上配浅蓝色或蓝色文字较好
BgcolorΚ″#EFEFDA″———上配浅蓝色或红色文字较好
BgcolorΚ″#F2F1D7″———配黑色文字素雅,如果是红色则显得醒目
BgcolorΚ″#336699″———配白色文字好看些
BgcolorΚ″#6699CC″———配白色文字好看些,可以做标题
BgcolorΚ″#66CCCC″———配白色文字好看些,可以做标题
BgcolorΚ″#B45B3E″———配白色文字好看些,可以做标题
BgcolorΚ″#479AC7″———配白色文字好看些,可以做标题
BgcolorΚ″#00B271″———配白色文字好看些,可以做标题
BgcolorΚ″#FBFBEA″———配黑色文字比较好看,一般作为正文
BgcolorΚ″#D5F3F4″———配黑色文字比较好看,一般作为正文
BgcolorΚ″#D7FFF0″———配黑色文字比较好看,一般作为正文
BgcolorΚ″#F0DAD2″———配黑色文字比较好看,一般作为正文
BgcolorΚ″#DDF3FF″———配黑色文字比较好看,一般作为正文
浅绿色底配黑色文字,或白色底配蓝色文字都很醒目,但前者突出背景,后者突出文字。红色底配白色文字,比较深的底色配黄色文字显得非常有效果。
此文只是起一个“抛砖引玉”的作用,大家可以发挥想象力,搭配出更有新意、更醒目的颜色,使网页更具有吸引力
<style type="text/css">
<!--
.Alldiv {
MARGIN: 10px;WIDTH: 550px; LINE-HEIGHT: 1.6em; BORDER: 1px solid #FFF; HEIGHT: 50px
}
.div1 {
BORDER-LEFT-COLOR: #ffcc00; BORDER-BOTTOM-COLOR: #ffcc00; BORDER-TOP-COLOR: #ffcc00; BACKGROUND-COLOR: #fffff7; BORDER-RIGHT-COLOR: #ffcc00
}
.div2 {
BORDER-LEFT-COLOR: #96c2f1; BORDER-BOTTOM-COLOR: #96c2f1; BORDER-TOP-COLOR: #96c2f1; BACKGROUND-COLOR: #eff7ff; BORDER-RIGHT-COLOR: #96c2f1
}
.div3 {
BORDER-LEFT-COLOR: #9bdf70; BORDER-BOTTOM-COLOR: #9bdf70; BORDER-TOP-COLOR: #9bdf70; BACKGROUND-COLOR: #f0fbeb; BORDER-RIGHT-COLOR: #9bdf70
}
.div4 {
BORDER-LEFT-COLOR: #abdc8d; BORDER-BOTTOM-COLOR: #abdc8d; BORDER-TOP-COLOR: #abdc8d; BACKGROUND-COLOR: #f8ffe7; BORDER-RIGHT-COLOR: #abdc8d
}
.div5 {
BORDER-LEFT-COLOR: #adcd3c; BORDER-BOTTOM-COLOR: #adcd3c; BORDER-TOP-COLOR: #adcd3c; BACKGROUND-COLOR: #f2fddb; BORDER-RIGHT-COLOR: #adcd3c
}
.div6 {
BORDER-LEFT-COLOR: #bbe1f1; BORDER-BOTTOM-COLOR: #bbe1f1; BORDER-TOP-COLOR: #bbe1f1; BACKGROUND-COLOR: #eefaff; BORDER-RIGHT-COLOR: #bbe1f1
}
.div7 {
BORDER-LEFT-COLOR: #d1f0f6; BORDER-BOTTOM-COLOR: #d1f0f6; BORDER-TOP-COLOR: #d1f0f6; BACKGROUND-COLOR: #fafcfd; BORDER-RIGHT-COLOR: #d1f0f6
}
.div8 {
BORDER-LEFT-COLOR: #a9c9e2; BORDER-BOTTOM-COLOR: #a9c9e2; BORDER-TOP-COLOR: #a9c9e2; BACKGROUND-COLOR: #e8f5fe; BORDER-RIGHT-COLOR: #a9c9e2
}
.div9 {
BORDER-LEFT-COLOR: #e3e197; BORDER-BOTTOM-COLOR: #e3e197; BORDER-TOP-COLOR: #e3e197; BACKGROUND-COLOR: #ffffeb; BORDER-RIGHT-COLOR: #e3e197
}
.div10 {
BORDER-LEFT-COLOR: #f8b3d0; BORDER-BOTTOM-COLOR: #f8b3d0; BORDER-TOP-COLOR: #f8b3d0; BACKGROUND-COLOR: #fff5fa; BORDER-RIGHT-COLOR: #f8b3d0
}
.div11 {
BORDER-LEFT-COLOR: #d3d3d3; BORDER-BOTTOM-COLOR: #d3d3d3; BORDER-TOP-COLOR: #d3d3d3; BACKGROUND-COLOR: #f7f7f7; BORDER-RIGHT-COLOR: #d3d3d3
}
.div12 {
BORDER-LEFT-COLOR: #bfd1eb; BORDER-BOTTOM-COLOR: #bfd1eb; BORDER-TOP-COLOR: #bfd1eb; BACKGROUND-COLOR: #f3faff; BORDER-RIGHT-COLOR: #bfd1eb
}
.div13 {
BORDER-LEFT-COLOR: #ffdd99; BORDER-BOTTOM-COLOR: #ffdd99; BORDER-TOP-COLOR: #ffdd99; BACKGROUND-COLOR: #fff9ed; BORDER-RIGHT-COLOR: #ffdd99
}
.div14 {
BORDER-LEFT-COLOR: #cacaff; BORDER-BOTTOM-COLOR: #cacaff; BORDER-TOP-COLOR: #cacaff; BACKGROUND-COLOR: #f7f7ff; BORDER-RIGHT-COLOR: #cacaff
}
.div15 {
BORDER-LEFT-COLOR: #a5b6c8; BORDER-BOTTOM-COLOR: #a5b6c8; BORDER-TOP-COLOR: #a5b6c8; BACKGROUND-COLOR: #eef3f7; BORDER-RIGHT-COLOR: #a5b6c8
}
.div16 {
BORDER-LEFT-COLOR: #cee3e9; BORDER-BOTTOM-COLOR: #cee3e9; BORDER-TOP-COLOR: #cee3e9; BACKGROUND-COLOR: #f1f7f9; BORDER-RIGHT-COLOR: #cee3e9
}
.div17 {
BORDER-LEFT-COLOR: #cae3ff; BORDER-BOTTOM-COLOR: #cae3ff; BORDER-TOP-COLOR: #cae3ff; BACKGROUND-COLOR: #f4f9ff; BORDER-RIGHT-COLOR: #cae3ff
}
.div18 {
BORDER-LEFT-COLOR: #5c9cc0; BORDER-BOTTOM-COLOR: #5c9cc0; BORDER-TOP-COLOR: #5c9cc0; BACKGROUND-COLOR: #f2faff; BORDER-RIGHT-COLOR: #5c9cc0
}
.div19 {
BORDER-LEFT-COLOR: #86b9d6; BORDER-BOTTOM-COLOR: #86b9d6; BORDER-TOP-COLOR: #86b9d6; BACKGROUND-COLOR: #f5fbff; BORDER-RIGHT-COLOR: #86b9d6
}
--></style>
<div class="Alldiv">
<div class="Alldiv div1"> </div>
<div class="Alldiv div2"> </div>
<div class="Alldiv div3"> </div>
<div class="Alldiv div4"> </div>
<div class="Alldiv div5"> </div>
<div class="Alldiv div6"> </div>
<div class="Alldiv div7"> </div>
<div class="Alldiv div8"> </div>
<div class="Alldiv div9"> </div>
<div class="Alldiv div10"> </div>
<div class="Alldiv div11"> </div>
<div class="Alldiv div12"> </div>
<div class="Alldiv div13"> </div>
<div class="Alldiv div14"> </div>
<div class="Alldiv div15"> </div>
<div class="Alldiv div16"> </div>
<div class="Alldiv div17"> </div>
<div class="Alldiv div18"> </div>
<div class="Alldiv div19"> </div>
</div>
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
发表评论
-
网页颜色搭配技巧 文字字体、字号、字体排版等
2014-08-14 16:38 2272一般来说,网页的背景色应该柔和一些、素一些、淡一些,再配上深色 ... -
Photoshop安装
2014-08-14 16:38 854参考地址:http://bbs.weiphone.com/re ... -
Photoshop 画基本图形
2014-08-04 18:31 1190作者:zccst 1,画三角形 按下“U”选择“多边形工具 ... -
用PS去除图片中文字的6个方法
2014-08-04 18:31 1107zccst转 1、使用仿制 ... -
photoshop如何快速切图
2014-08-04 18:31 1423作者:zccst 作为业余爱好,之前都是用比较笨的方法切图, ... -
photoshop CS5序列号破解办法
2013-07-20 16:32 4作者:zccst 下载了一个photoshop,每次打开都让 ... -
几个不错的网址
2011-05-31 15:30 11671,后台管理系统模板。 http://www.mysucai. ...
相关推荐
色彩搭配在网站设计中起着至关重要的作用,它不仅影响着网站的视觉吸引力,还能够影响用户的情绪和体验。一篇名为“色彩搭配在网站中的运用”的博文深入探讨了这一主题,通过链接可以获取更多详细内容。这篇文章可能...
各种动态效果,有导航栏,链接可以跳转,色彩搭配合理,比较完美的项目。 大一网页设计期末大作业-游戏网站(免积分下载)详情看我的文章介绍: https://blog.csdn.net/weixin_43474701/article/details/131345702 ...
文章中提到的20个国外优秀的网页色彩搭配案例,涵盖了多种设计风格和用途,它们展示了如何将色彩运用到网页设计中以传达特定的感觉或品牌理念。下面举例几个案例进行分析: 1. **espaciocreativo**:这个案例可能...
"情人网站文章系统"的界面设计被描述为“美观大方”,这通常意味着设计团队注重色彩搭配、布局合理性和易用性,以创造一个舒适、温馨的阅读环境。可能还包括个性化设置,如主题切换、字体大小调整等,以满足不同用户...
这涉及到网页设计的美学原则,如色彩搭配、排版布局、用户体验(UX)设计以及响应式设计,确保网站在不同设备上都能良好显示。 3. **网站建设**:这个过程涵盖了从需求分析、原型设计、前端开发(HTML、CSS、...
3. **色彩搭配**:内置多种色彩方案,可自由调整文字、背景色,以确保文章视觉效果与品牌调性相协调。 4. **对齐方式**:支持左对齐、居中、右对齐和两端对齐等多种对齐方式,使得文章结构清晰,易于理解。 5. **...
本文将介绍22个国外优秀的配色网站,帮助您轻松找到完美的色彩搭配。 #### 二、配色网站概览 **1. ColourLovers** - **简介**:ColourLovers 是一个非常受欢迎的在线社区,设计师们可以在这里分享自己创造的颜色...
这通常体现在色彩搭配、布局结构以及用户体验等方面,使得用户能够快速理解和使用网站功能。“可上传文章”表明网站具有用户生成内容(UGC)的功能,用户可以分享自己的育儿心得、故事或者问题,增强了社区的互动性...
这通常体现在清晰的字体选择、适度的色彩搭配以及扁平化的设计风格上。 3. **文章展示**:作为文章百科问答平台,模板会包含各种文章展示格式,如列表、网格或卡片式,支持文章分类、标签、摘要、作者信息、评论...
模板中的"简约"设计风格,意味着它采用简洁的色彩搭配、清晰的字体和布局,以及最少的装饰元素,使内容成为焦点。这种设计趋势有助于快速吸引用户的注意力,让他们更容易阅读和理解网站上的信息,尤其适合博客和资讯...
了解色彩心理学,正确运用色彩搭配,可以提升网站的吸引力和识别度。 4. 字体与排版:字体的选择和排版对信息的可读性至关重要。要确保文字大小适中,对比鲜明,行距和字间距合理,以提高阅读体验。 5. 图像与视觉...
此模板的界面设计可能包含绿色调的色彩搭配,以及简洁明快的布局,以突出内容的可读性和吸引力。博客部分可能会有分类明确的文章列表,方便用户查找和阅读感兴趣的信息。 4. **源码下载** 提供的源码包括HTML、CSS...
"高端大气"通常意味着设计简洁、布局合理,使用高质量的图像和图形,以及优雅的色彩搭配。"漂亮"则可能指的是色彩和谐、界面美观,能够吸引用户并提升用户体验。 综合来看,这个压缩包提供的资源是一个全功能的PHP...
- **设计风格**:该模板设计简洁,色彩搭配和谐,布局清晰,使用户能快速找到所需信息,提高阅读体验。 - **分类管理**:文章可以按照不同类别进行归档,便于用户按主题查找,同时也有利于网站内容的组织和更新。 ...
色彩在网页设计中扮演着极其重要的角色,合理的色彩搭配不仅能够提升用户体验,还能有效地传达网站的主题和情感。接下来,我们将从色彩的基本概念入手,逐步深入探讨网页设计中的色彩理论。 ##### 色彩三要素 1. *...
色彩搭配、字体选择和图片使用都需要与新闻主题相协调,营造出专业且引人入胜的氛围。此外,高分辨率的图片和适当的空白区域可以提高整体的视觉吸引力。 在功能方面,新闻阅读类网站模板通常具备以下特点: 1. **...
在“我的主页”项目中,学生需要学习色彩搭配、字体选择、图像处理等设计原则,创造出美观且易于阅读的界面。同时,响应式设计也是现代网页设计的重要趋势,使得网站能在不同设备上良好显示。 三、前端开发 前端...
该模板的特点在于其设计风格专业,色彩搭配合理,布局清晰,能够有效地展示物流公司的服务内容、运输网络、仓储设施以及货架产品等信息。 1. **PBOOTCMS系统详解**:PBOOTCMS的核心特点是简洁高效,提供了丰富的...
在设计领域,色彩搭配的重要性不言而喻。无论是网页设计、平面设计还是UI设计,正确的色彩搭配都能极大地提升作品的视觉效果和用户体验。本篇文章将详细介绍一些实用的配色工具和网站,帮助设计师们轻松找到理想的...