网页色彩的搭配

网页色彩搭配 网页配色预览: 1.1观察成功的网页配色: 运用比较的方法观察网页配色的差异: 平时在浏览网页的时候,会发现哪个方案都不错,以至于弄不清楚自己究竟是想要表达一种怎样的需求,静下心来,仔细观察,便会发现网页之间的配色差异,尤其是在同一个网站中对两种不容的配色方案进行比较的时候,就会一目了然。  设计过程中没有不好的色彩,只有不恰当的配色方案,唤醒对色彩的感知能力,是提高对色彩认识和修养的第 阅读详情
网页的色彩是树立网站形象的关键之一,色彩搭配却是网友们感到头疼的问题。网页的背景,文字,图标,边框,超链接...,应该采用什么样的色彩,应该搭配什么色彩才能最好的表达出预想的内涵呢?

阿捷这里谈一些心得,希望对你有所启发。 首先我们先来了解一些色彩的基本知识:

1.颜色是因为光的折射而产生的。

2.红,黄,蓝是三原色,其它的色彩都可以用这三种色彩调和而成。网页html语言中的色彩表达即是用这三种颜色的数值表示例如:红色是color (255,0,0)十六进制的表示方法为(FF0000)白色为(FFFFFF), 我们经常看到的"bgColor=#FFFFFF"就是指背景色为白色。

3.颜色分非彩色和彩色两类。非彩色是指黑,白,灰系统色。彩色是指除了非彩色以外的所有色彩。

4.任何色彩都有饱和度和透明度的属性,属性的变化产生不同的色相,所以至少可以制作几百万种色彩。   
网页制作用彩色还是非彩色好呢?

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

我们通常的做法是:主要内容文字用非彩色(黑色),边框,背景,图片用彩色。这样页面整体不单调,看主要内容也不会眼花。

●非彩色的搭配   

黑白是最基本和最简单的搭配,白字黑底,黑底白字都非常清晰明了。 灰色是万能色,可以和任何彩色搭配,也可以帮助两种对立的色彩和谐过渡。如果你实在找不出合适的色彩,那么用灰色试试,效果绝对不会太差。

●彩色的搭配   
色彩千变万化,彩色的搭配是我们研究的重点。我们依然需要进一步学习一些色彩的知识。

一.色环。我们将色彩按"红->黄->绿->蓝->红"依次过度渐变,就可以得到一个色彩环。色环的两端是暖色和寒色,当中是中型色。
(如下图) 红.橙.橙黄.黄.黄绿.绿.青绿.蓝绿.蓝.蓝紫.紫.紫红.红 |___________| |____| |_________| |_________| | | | | 暖色系 中性系 寒色系 中性系 二.色彩的心理感觉。不同的颜色会给浏览者不同的心理感

红色---是一种激奋的色彩。刺激效果,能使人产生冲动,愤怒,热情,活力的感觉。

绿色---介于冷暖两中色彩的中间,显得和睦,宁静,健康,安全的感觉。 它和金黄,淡白搭配,可以产生优雅,舒适的气氛。

橙色---也是一种激奋的色彩,具有轻快,欢欣,热烈,温馨,时尚的效果。

黄色---具有快乐,希望,智慧和轻快的个性,它的明度最高。

蓝色---是最具凉爽,清新,专业的色彩。它和白色混合,能体现柔顺,淡雅,浪漫的气氛(象天空的色彩:)

白色---具有洁白,明快,纯真,清洁的感受。

黑色---具有深沉,神秘,寂静,悲哀,压抑的感受。

灰色---具有中庸,平凡,温和,谦让,中立和高雅的感觉。   

每种色彩在饱和度,透明度上略微变化就会产生不同的感觉。以绿色为例,黄绿色有青春,旺盛的视觉意境,而蓝绿色则显得幽宁,阴深。

●网页色彩搭配的原理

1.色彩的鲜明性。网页的色彩要鲜艳,容易引人注目。

2.色彩的独特性。要有与众不同的色彩,使得大家对你的印象强烈。(参考设计思考第二篇网站CI的标准色彩一节)

3.色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。

4.色彩的联想性。不同色彩会产生不同的联想,蓝色想到天空,黑色想到黑夜,红色想到喜事等,选择色彩要和你网页的内涵相关联。

●网页色彩掌握的过程   
随着网页制作经验的积累,我们用色有这样的一个趋势:

单色->五彩缤纷->标准色->单色。一开始因为技术和知识缺乏,只能制作出简单的网页,色彩单一;在有一定基础和材料后,希望制作一个漂亮的网页,将自己收集的最好的图片,最满意色彩堆砌在页面上;但是时间一长,却发现色彩杂乱,没有个性和风格;第三次重新定位自己的网站,选择好切合自己的色彩,推出的站点往往比较成功;当最后设计理念和技术达到顶峰时,则又返朴归真,用单一色彩甚至非彩色就可以设计出简洁精美的站点。

○网页色彩搭配的技巧   
文章写到这里,有心急的网友要问了:“到底用什么色彩搭配好看呢?你能不能推荐几种配色方案?”别急,这里有一点技巧,可以帮助你迅速成为调色大师:)

1.用一种色彩。这里是指先选定一种色彩,然后调整透明度或者饱和度,(说得通俗些就是将 色彩变淡或则加深),产生新的色彩,用于网页。这样的页面看起来色彩统一,有层次感。

2.用两种色彩。先选定一种色彩,然后选择它的对比色(在photoshop里按ctrl+shift+I)。我的主页用蓝色和黄色就是这样确定的。整个页面色彩丰富但不花稍。

3.用一个色系。简单的说就是用一个感觉的色彩,例如淡蓝,淡黄,淡绿;或者土黄,土灰,土蓝。确定色彩的方法各人不同,我是在photoshop里按前景色方框,在跳出的拾色器窗中选择"自定义",然后在"色库"中选就可以了:)

4.用黑色和一种彩色。比如大红的字体配黑色的边框感觉很"跳"。 在网页配色中,忌讳的是:
1.不要将所有颜色都用到,尽量控制在三种色彩以内。
2.背景和前文的对比尽量要大,(绝对不要用花纹繁复的图案作背景),以便突出主要文字内容。  
关于css 推荐几个超好看渐变色! 这个渐变色从深蓝色 (#001f3f) 渐变到浅蓝色 (#0088a9),然后到青绿色 (#00c9a7),接着到淡绿色 (#92d5c6),最后到非常浅的淡青色 (#ebf5ee)。这个渐变色使用了多个鲜艳的颜色,从紫红色 (#ff00cc) 渐变到橙色 (#ffcc00),然后到青色 (#00ffcc),最后到鲜艳的粉红色 (#ff0066)。它给人一种明亮、活力和欢乐的感觉。这个渐变色从鲜艳的红色 (#ff9a9e) 渐变到柔和的粉红色 (#fad0c4),给人一种浪漫和瑰丽的感觉。 阅读详情

相关推荐

css 颜色搭配技巧

css颜色搭配技巧 平面设计,网页设计,色彩永远是最重要的一环.

CSS颜色搭配(超级赞的几个网站)

ColorSpace https://mycolor.space/ 如果你喜欢渐变风格的创作,那么一定要试试这个网站。你只需要选择一个颜色,就可以快速生成20多种不同风格的配色方案。 比如选择了如图所示的RGB值,就会出现下面25种配色方案。 WebGradients https://webgradients.com WebGradients有100多种线性渐变配色方案,网站任何部分的内容背景都可以使用这些配色方案。使用时,只需要轻松复制色值,而且每个渐变色方案都准备了PNG格式的图片可供下载。 GR

程麒阁的博客 1万+

CSS 色彩魔法:打造绚丽网页风格

透明度的取值范围是0-1,0表示完全透明,1表示完全不透明。例如,rgba(255,0,0,0.5)表示半透明的红色。例如,hsla(0,100%,50%,0.5)表示半透明的红色。色调的取值范围是0-360,饱和度和亮度的取值范围是0-100。例如,rgb(255,0,0)表示红色,rgb(0,0,0)表示黑色。例如,选择三个等距离的颜色进行搭配,如红色、绿色和蓝色。色彩和谐原则:选择色彩在色轮上呈现和谐关系的颜色进行搭配,如使用三个相邻颜色或构成三角形的颜色。例如,红色和绿色、蓝色和橙色等。

jht_520的博客 842

CSS中如何使用背景图像与色彩搭配

在CSS中,背景图像和色彩搭配是提升网页设计视觉吸引力的重要工具。通过合理选择图像、应用色彩理论和考虑色彩对比度,你可以创造出既美观又实用的网页设计。使用CSS变量可以进一步提高设计的灵活性和可维护性。通过上述示例代码,你可以开始尝试将这些技巧应用到你自己的项目中。

WXLink的博客 983

网页色彩搭配

转载请标明是引用于 http://blog.csdn.net/chenyujing5678  欢迎拍砖!   一、网页本色基础 1、红色 红色的色感温暖,性格刚烈而外向,是一种对人体刺激很强的颜色。红色在各种媒体中都有广泛的应用,除了具有较佳的明视效果外,更传达有活力、 积极、热诚、温暖、前进的企业形象与精神,另外红色也常被用做警告、危险、禁止、防火等。 网站中红色与黑色搭配比较常见

chenyujing5678的专栏 4293

网页色彩搭配方法及原则

颜色大致可以分为冷、暖以及中间色三大色系,冷色主要是指绿、青、蓝、紫、灰等颜色,通常与白搭配显得比较好看,与其他色系搭配也可,切忌与冷色搭配。暖色是指红、橙、黄、粉红色,中间色是指黑、白以及咖啡色。 一、色彩搭配原则   在选择网页色彩时,除了考虑网站本身的特点外还要遵循一定的艺术规律,从而设计出精美的网页。   1.色彩的鲜明性:   如果一个网站的色彩鲜明,很容易引人注意,会给浏览者耳

Lisian_Chou的专栏 2205

网页设计中色彩搭配原则及方法

 from:http://www.cyhd.net/theory/2008/1117/article_1054.html 在这一篇中将介绍色彩搭配原则和方法!一、色彩搭配原则    在选择网页色彩时,除了考虑网站本身的特点外还要遵循一定的艺术规律,从而设计出精美的网页。1.色彩的鲜明性:    如果一个网站的色彩鲜明,很容易引人注意,会给浏览者耳目一新的感觉。2.色彩的独特性:    要有

abxn2002的专栏 1558

网页色彩搭配的技巧

首先我们先来了解一些色彩的基本知识:   1.颜色是因为光的折射而产生的。   2.红,黄,蓝是三原色,其它的色彩都可以用这三种色彩调和而成。网页html语言中的色彩表达即是用这三种颜色的数值表示例如:红色是color  (255,0,0)十六进制的表示方法为(FF0000)白色为(FFFFFF), 我们经常看到的"bgColor=#FFFFFF"就是指背景色为白 色。   3.颜色分非彩色和彩色

luckyeric的专栏 712

网页中的色彩搭配

人常常感受到色彩对自己心理的影响,这些影响总是在不知不觉中发挥作用,左右我们的情绪。色彩的心理效应发生在不同层次中。有些属直接的刺激,有些要通过间接的联想,更高层次则涉及到人的观念、信仰,对于艺术家和设计者来说,无论哪一层次的作用都是不能忽视的。  对于网页设计者来说,色彩的心理作用尤其重要,因为用网络是在一种特定的历史与社会条件的环境下,即高效率、快节奏的现代生活方式的条件,这就需要做网页

chengxiaofeng的专栏 1775

网页设计常用色彩搭配

网页设计常用色彩搭配表 目录 按色相的搭配分类 本节将网页设计中常见的色彩搭配按照色相的顺序归类。每类都以该色相为主,配以其他色相或者同色相的,应用对比和调和的方法,并按照从轻快到浓烈的顺序排序。 红色 #FFFFCC #CCFFFF #FFCCCC #99CCCC #FFCC99 #FFCCCC #FF9999

人生如梦,书棋随缘... 1002

UI-网页设计-色彩搭配

色彩

水滴的专栏 2368

网页色彩搭配的原理

  ●网页色彩搭配的原理 1.色彩的鲜明性。网页色彩要鲜艳,容易引人注目。 2.色彩的独特性。要有与众不同的色彩,使得大家对你的印象强烈。(参考设计思考第二篇网站CI的标准色彩一节) 3.色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。 4.色彩联想性。不同色彩会产生不同的联想,蓝色想到天空,黑色想到黑夜,红色想到喜事等,选择色彩要和你网页的内涵相关联。 ●网页

~缘份天空~ 2024

CSS:网页色彩搭配技巧

  网页色彩是树立网站形象的关键之一,色彩搭配却是网友们感到头疼的问题。网页的背景,文字,图标,边框,超链接...,应该采用什么样的色彩,应该搭配什么色彩才能最好的表达出预想的内涵呢? 首先我们先来了解一些色彩的基本知识: 1.颜色是因为光的折射而产生的。 2.红,黄,蓝是三原色,其它的色彩都可以用这三种色彩调和而成。网页html语言中的色彩表达即是用这三种颜色的数值表示例如:红色是co

天地会 1843

推荐20个优秀的网页色彩搭配实例

网页设计中,选择合理的色彩是非常重要的。用户在打开一个网站的时候,第一眼看到的不是网站丰富的内容,也不是漂亮的布局,而是网页使用的色彩色彩的视觉吸引力是最强烈的,因此网页色彩的选择需要经过仔细思考。今天,本文搜集了20个优秀网页色彩搭配实例与大家分享,希望这些实例能带给你灵感! Typemedia 2011 5emegauche More Hazards Mo

jokeHello的专栏 4348
上一篇: 色彩的心理效应
下一篇: 围棋术语和口诀
fableking
博客等级 码龄20年 35粉丝 54原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值