网页中用到的色彩对比

html-css013

网页中用到的色彩对比,第1张

网页中用到的色彩对比

形式美法则是人类在创造美的形式和过程中对美的形式规律的总结概括,世间万物的美都可以用形式美法则来概括。以下是我整理的关于网页中用到的色彩对比,希望大家认真阅读!

一个网页是由很多个不同元素构成的,这些元素的重要性都不同,有些元素需要特别突出、有些元素彼此之间存在着联系,而另外的元素之间则一点关联性都没有。如何去平衡元素中的等同和不同的元素特性,就显得特别重要,因为如果不能将这些元素在一个画面当中协调处理,这个画面便变得突兀。对比就是两个或更多个元素之间的不同。通过对比,设计师就可以创造出视觉趣味性,同时引导用户的注意力。

常见的对比有这么多的表现形式:

1) 色调上的明暗对比、冷暖对比等

2) 形状上的大小对比、方圆对比、粗细对比、长短对比等

3) 方向上的垂直对比、水平对比、倾斜对比等

4) 数量上的疏密对比等

5) 图片上的虚实对比、黑白对比等

6) 事物的.动静对比等。

对比的表现形式比较多,今天我先来跟大家分享一下网页界面当中的——色彩对比。

不同的颜色可以表达不同的感受,颜色上的对比也有很多,这个跟色彩构成有很大的关系。颜色对比主要分色相对比、明度对比和纯度对比。

色相即各类颜色色彩的相貌称谓,任何黑白灰以外的颜色都有色相的属性。如朱红、普蓝、柠檬黄等。色相是色彩的首要特征,是区别各种不同色彩的最准确的标准。

明度指的就是色彩的亮度。比如:深黄、中黄、淡黄、柠檬黄等,这些黄颜色在明度上就不一样。颜色有深浅、明暗的变化,这些颜色在明暗、深浅上的不同变化,也就是色彩的明度变化。

纯度指的是色彩的鲜艳和深浅程度。纯度是色彩鲜艳度的判断标准,纯度最高的色彩就是原色,随着纯度的降低,色彩就会变暗、变淡。

一、色相对比。

两种以上色彩组合后,由于色相差别而形成的色彩对比效果称为色相对比。它是色彩对比的一个根本方面,其对比强弱程度取决于色相之间在色相环上的距离(角度),距离(角度)越小对比越弱,反之则对比越强。

根据色相环可以看出色环上的颜色是多丰富多彩,随意抽取两个颜色,都能形成不一样的对比。因此色相对比又分很多,有补色对比、对比色对比、邻近色相对比等等。

1、互补色对比

在色相环的组成中,相隔 180 度的色彩我们称之为互补色:红与绿互补,黄与紫互补而蓝色与橙色互补。互补色的对比效果强烈、眩目、响亮、极有力,但也需要慎用,因为使用不当易产生幼稚 、原始、粗俗、不安定、不协调等不良感觉。

2、邻近色相对比

邻近色对比好理解一些,好比黄色跟橙色可以称为邻近色,草绿和果绿也可称为邻近色。色相环上相邻的二至三色对比,色相距离大约30度左右,为弱对比类型。邻近色相对比效果感觉柔和、和谐、雅致、文静,但也会让人感觉单调、模糊、乏味、无力,所以必须调节明度差来加强效果。

3、对比色对比

色相对比距离约120度左右,为强对比类型,要比邻近色相对比鲜明、强烈、饱满。丰富,容易使人兴奋激动和造成视觉以及精神的疲劳。如黄绿与红紫色对比等,但是颜色之间协同统一的工作也比较难做。这种对比不容易单调,但一般需要采用多种调和手段来改善对比效果,不然就容易产生杂乱和过分刺激的效果。

4、零度对比

零度对比其实也分了几块,比如无彩色对比、无彩色与有彩色的对比、同种色相对比和无彩色与同种色相比四种,这块只要理解下无彩色的概念即可。

无彩色指的就是没有色相的颜色,前面我说的颜色都有色相,但黑白灰这三种是没有色相的,所以也被称为无彩色。

无彩色对比:如黑与白 、黑与灰、中灰与浅灰,或黑与白与灰、黑与深灰与浅灰等。

无彩色与有彩色的对比:如黑与黄、白与蓝等。

同种色相对:如蓝与浅蓝(蓝+白)色对比,橙与咖啡(橙+灰)或绿与粉绿(绿+白)与墨绿(绿+黑)色等对比。

无彩色与同种色相比:如白与深蓝与浅蓝、黑与桔与咖啡色等对比。

二、明暗对比。

两种以上色相组合后,由于明度不同而形成的色彩对比效果称为明度对比。它是色彩对比的一个重要方面,是决定色彩方案感觉明快、清晰、沉闷、柔和、强烈、朦胧与否的关键。

三、纯度对比。

纯度指的就是饱和度,柠檬黄的纯度是比较高的,当加入一点红色之后就变成橙色,因而柠檬黄和橙色就形成了纯度上的对比。两种以上色彩组合后,由于纯度不同而形成的色彩对比效果称为纯度对比。它是色彩对比的另一个重要方面,但因其较为隐蔽、内在,故易被忽略。在色彩设计中,纯度对比是决定色调感觉华丽、高雅、古朴、粗俗、含蓄与否的关键。

区别:作用不同

color用于设置字体颜色,而background-color同于设置背景颜色。

实例

1、color

body {  color:red} h1{  color:#00ff00} p{  color:rgb(0,0,255)}

2、background-color

body{  background-color:yellow} h1{  background-color:#00ff00} p {  background-color:rgb(255,0,255)}

扩展资料

background-color范围

background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)。如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色。

color范围

这个属性设置了一个元素的前景色(在 HTML 表现中,就是元素文本的颜色);光栅图像不受 color 影响。这个颜色还会应用到元素的所有边框,除非被 border-color 或另外某个边框颜色属性覆盖。

color参数

1、color_name:规定颜色值为颜色名称的背景颜色(比如 red)。  

2、hex_number:规定颜色值为十六进制值的背景颜色(比如 #ff0000)。  

3、rgb_number:规定颜色值为 rgb 代码的背景颜色(比如 rgb(255,0,0))。  

4、transparent:默认。背景颜色为透明。  

5、inherit:规定应该从父元素继承 background-color 属性的设置。

font-size:12px

<body bgcolor="#000000">

<body bgcolor="rgb(0,0,0)">

<body bgcolor="black">。

一、认识CSS 颜色(CSS color)

这里要介绍的是网页设置颜色包含有哪些;网页颜色规定规范。

1、常用颜色地方包含:字体颜色、超链接颜色、网页背景颜色、边框颜色。

2、颜色规范与颜色规定:网页使用RGB模式颜色。

二、颜色基础知识

网页中颜色的运用是网页必不可少的一个元素。使用颜色目的在于有区别、有动感(特别是超链接中运用)、美观之用,同时颜色也是各种各样网页的样式表现元素之一,了解CSS 字体颜色。

传统的html颜色与w3c标准下的css颜色对比和DIV CSS运用颜色。

CSS color颜色语法:

color:#000000

Css样式中color后直接加RGB颜色值(#FFFFFF 、#000000 、#F00)

RGB颜色值在实际布局时候确定,可以使用Photoshop(简称PS)拾取工具进行获取获得。

三、两种方法设置对象颜色样式。

1、在DIV标签内使用color颜色样式。

<div style="color:#F00">www.jb51.net</div>。

2、在CSS选择器中使用color颜色样式CSS代码:

.divcss5{color:#00F}

/* 设置对象divcss5内文字为蓝色 */

扩展阅读:这里运用了CSS注释对此样式设置说明,了解CSS 注释。

3、DIV+CSS颜色样式完整案例:

Css代码。