网页配色表.docx

资源描述

网页配色表.docx

《网页配色表.docx》由会员分享，可在线阅读，更多相关《网页配色表.docx（17页珍藏版）》请在冰豆网上搜索。

网页配色表.docx

网页配色表

　　制作主页对色彩需要有一定的感觉，许多网友总是配不好颜色。

　　阿捷教你一个窍门：

就是用同一色系的色彩，色彩丰富但不花。

#FFFFFF

#FFFFF0

#FFFFE0

#FFFF00

#FFFAFA

#FFFAF0

#FFFACD

#FFF8DC

#FFF68F

#FFF5EE

#FFF0F5

#FFEFDB

#FFEFD5

#FFEC8B

#FFEBCD

#FFE7BA

#FFE4E1

#FFE4C4

#FFE4B5

#FFE1FF

#FFDEAD

#FFDAB9

#FFD700

#FFD39B

#FFC1C1

#FFC125

#FFC0CB

#FFBBFF

#FFB90F

#FFB6C1

#FFB5C5

#FFAEB9

#FFA54F

#FFA500

#FFA07A

#FF8C69

#FF8C00

#FF83FA

#FF82AB

#FF8247

#FF7F50

#FF7F24

#FF7F00

#FF7256

#FF6EB4

#FF6A6A

#FF69B4

#FF6347

#FF4500

#FF4040

#FF3E96

#FF34B3

#FF3030

#FF1493

#FF00FF

#FF0000

#FDF5E6

#FCFCFC

#FAFAFA

#FAFAD2

#FAF0E6

#FAEBD7

#FA8072

#F8F8FF

#F7F7F7

#F5FFFA

#F5F5F5

#F5F5DC

#F5DEB3

#F4F4F4

#F4A460

#F2F2F2

#F0FFFF

#F0FFF0

#F0F8FF

#F0F0F0

#F0E68C

#F08080

#EEEEE0

#EEEED1

#EEEE00

#EEE9E9

#EEE9BF

#EEE8CD

#EEE8AA

#EEE685

#EEE5DE

#EEE0E5

#EEDFCC

#EEDC82

#EED8AE

#EED5D2

#EED5B7

#EED2EE

#EECFA1

#EECBAD

#EEC900

#EEC591

#EEB4B4

#EEB422

#EEAEEE

#EEAD0E

#EEA9B8

#EEA2AD

#EE9A49

#EE9A00

#EE9572

#EE82EE

#EE8262

#EE7AE9

#EE799F

#EE7942

#EE7621

#EE7600

#EE6AA7

#EE6A50

#EE6363

#EE5C42

#EE4000

#EE3B3B

#EE3A8C

#EE30A7

#EE2C2C

#EE1289

#EE00EE

#EE0000

#EDEDED

#EBEBEB

#EAEAEA

#E9967A

#E8E8E8

#E6E6FA

#E5E5E5

#E3E3E3

#E0FFFF

#E0EEEE

#E0EEE0

#E0E0E0

#E066FF

#DEDEDE

#DEB887

#DDA0DD

#DCDCDC

#DC143C

#DBDBDB

#DB7093

#DAA520

#DA70D6

#D9D9D9

#D8BFD8

#D6D6D6

#D4D4D4

#D3D3D3

#D2B48C

#D2691E

#D1EEEE

#D1D1D1

#D15FEE

#D02090

#CFCFCF

#CDCDC1

#CDCDB4

#CDCD00

#CDC9C9

#CDC9A5

#CDC8B1

#CDC673

#CDC5BF

#CDC1C5

#CDC0B0

#CDBE70

#CDBA96

#CDB7B5

#CDB79E

#CDB5CD

#CDB38B

#CDAF95

#CDAD00

#CDAA7D

#CD9B9B

#CD9B1D

#CD96CD

#CD950C

#CD919E

#CD8C95

#CD853F

#CD8500

#CD8162

#CD7054

#CD69C9

#CD6889

#CD6839

#CD661D

#CD6600

#CD6090

#CD5C5C

#CD5B45

#CD5555

#CD4F39

#CD3700

#CD3333

#CD3278

#CD2990

#CD2626

#CD1076

#CD00CD

#CD0000

#CCCCCC

#CAFF70

#CAE1FF

#C9C9C9

#C7C7C7

#C71585

#C6E2FF

#C67171

#C5C1AA

#C4C4C4

#C2C2C2

#C1FFC1

#C1CDCD

#C1CDC1

#C1C1C1

#C0FF3E

#BFEFFF

#BFBFBF

#BF3EFF

#BEBEBE

#BDBDBD

#BDB76B

#BCEE68

#BCD2EE

#BC8F8F

#BBFFFF

#BABABA

#BA55D3

#B9D3EE

#B8B8B8

#B8860B

#B7B7B7

#B5B5B5

#B4EEB4

#B4CDCD

#B452CD

#B3EE3A

#B3B3B3

#B2DFEE

#B23AEE

#B22222

#B0E2FF

#B0E0E6

#B0C4DE

#B0B0B0

#B03060

#AEEEEE

#ADFF2F

#ADD8E6

#ADADAD

#ABABAB

#AB82FF

#AAAAAA

#A9A9A9

#A8A8A8

#A6A6A6

#A52A2A

#A4D3EE

#A3A3A3

#A2CD5A

#A2B5CD

#A1A1A1

#A0522D

#A020F0

#9FB6CD

#9F79EE

#9E9E9E

#9C9C9C

#9BCD9B

#9B30FF

#9AFF9A

#9ACD32

#9AC0CD

#9A32CD

#999999

#9932CC

#98FB98

#98F5FF

#97FFFF

#96CDCD

#969696

#949494

#9400D3

#9370DB

#919191

#912CEE

#90EE90

#8FBC8F

#8F8F8F

#8EE5EE

#8E8E8E

#8E8E38

#8E388E

#8DEEEE

#8DB6CD

#8C8C8C

#8B8B83

#8B8B7A

#8B8B00

#8B8989

#8B8970

#8B8878

#8B8682

#8B864E

#8B8386

#8B8378

#8B814C

#8B7E66

#8B7D7B

#8B7D6B

#8B7B8B

#8B795E

#8B7765

#8B7500

#8B7355

#8B6969

#8B6914

#8B668B

#8B6508

#8B636C

#8B5F65

#8B5A2B

#8B5A00

#8B5742

#8B4C39

#8B4789

#8B475D

#8B4726

#8B4513

#8B4500

#8B3E2F

#8B3A62

#8B3A3A

#8B3626

#8B2500

#8B2323

#8B2252

#8B1C62

#8B1A1A

#8B0A50

#8B008B

#8B0000

#8A8A8A

#8A2BE2

#8968CD

#87CEFF

#87CEFA

#87CEEB

#878787

#858585

#848484

#8470FF

#838B8B

#838B83

#836FFF

#828282

#7FFFD4

#7FFF00

#7F7F7F

#7EC0EE

#7D9EC0

#7D7D7D

#7D26CD

#7CFC00

#7CCD7C

#7B68EE

#7AC5CD

#7A8B8B

#7A7A7A

#7A67EE

#7A378B

#79CDCD

#787878

#778899

#76EEC6

#76EE00

#757575

#737373

#71C671

#7171C6

#708090

#707070

#6E8B3D

#6E7B8B

#6E6E6E

#6CA6CD

#6C7B8B

#6B8E23

#6B6B6B

#6A5ACD

#698B69

#698B22

#696969

#6959CD

#68838B

#68228B

#66CDAA

#66CD00

#668B8B

#666666

#6495ED

#63B8FF

#636363

#616161

#607B8B

#5F9EA0

#5E5E5E

#5D478B

#5CACEE

#5C5C5C

#5B5B5B

#595959

#575757

#556B2F

#555555

#551A8B

#54FF9F

#548B54

#545454

#53868B

#528B8B

#525252

#515151

#4F94CD

#4F4F4F

#4EEE94

#4D4D4D

#4B0082

#4A708B

#4A4A4A

#48D1CC

#4876FF

#483D8B

#474747

#473C8B

#4682B4

#458B74

#458B00

#454545

#43CD80

#436EEE

#424242

#4169E1

#40E0D0

#404040

#3D3D3D

#3CB371

#3B3B3B

#3A5FCD

#388E8E

#383838

#36648B

#363636

#333333

#32CD32

#303030

#2F4F4F

#2E8B57

#2E2E2E

#2B2B2B

#292929

#282828

#27408B

#262626

#242424

#228B22

#218868

#212121

#20B2AA

#1F1F1F

#1E90FF

#1E1E1E

#1C86EE

#1C1C1C

#1A1A1A

#191970

#1874CD

#171717

#141414

#121212

#104E8B

#0F0F0F

#0D0D0D

#0A0A0A

#080808

#050505

#030303

#00FFFF

#00FF7F

#00FF00

#00FA9A

#00F5FF

#00EEEE

#00EE76

#00EE00

#00E5EE

#00CED1

#00CDCD

#00CD66

#00CD00

#00C5CD

#00BFFF

#00B2EE

#009ACD

#008B8B

#008B45

#008B00

#00868B

#00688B

#006400

#0000FF

#0000EE

#0000CD

#0000AA

#00008B

#000080

#000000

网页设计配色基础：

色彩三属性与实例剖析

2006-08-2204:

00作者：

黎芳原创出处：

天极设计在线责任编辑：

Shiny

　　许多初学者对色彩的属性和原色概念模糊，容易混淆，下面我们就先从几个概念入手。

今天介绍色彩的三个属性。

　　颜色可以分为非彩色和彩色两大类。

非彩色指黑色、白色和各种深浅不一的灰色，而其他所有颜色均属于彩色。

从心理学和视觉的角度出发，彩色具有三个属性：

色相、明度、纯度（彩度）。

基本色相环

■色相（Hue）：

　　也叫色调，指颜色的种类和名称，是指颜色的基本特征，是一种颜色区别于其他颜色的因素。

色相和色彩的强弱及明暗没有关系，只是纯粹表示色彩相貌的差异。

如红、黄、绿、蓝、紫等为不同的基本色相。

　　■明度（Value）：

　　也叫亮度，指颜色的深浅、明暗程度，没有色相和饱和度的区别。

不同的颜色，反射的光量强弱不一，因而会产生不同程度的明暗。

非色彩的黒、灰、白较能形象的表达这一特质。

　　明度的递增

→明度网页例图：

http:

//www.once-upon-a-

　　明度分析：

　　从上图网页所选取的4个主要色块的RGB数值来看，这4块色彩组合显示的RGB数值很高，接近于最高值255。

RGB相互间的数值相近，由于有RG的高数值与B高数值混合，整个网页给人的感觉非常协调，柔和雅致，心情愉悦。

结论：

　　RGB同时呈现相近的高数值时，相近等量的色彩相互混合，页面呈高明度灰色段，协调的柔和状态，令人遐想，对视觉刺激是缓慢的，适合长时间观看。

但由于数值接近，因此色阶平稳，同时存在着不够醒目的状态。

常用配色基本概念及精彩相关实例剖析

2006-08-2304:

00作者：

redfall原创出处：

天极设计在线责任编辑：

Shiny

　　在实用美术中，常有"远看色彩近看花，先看颜色后看花，七分颜色三分花"的说法。

　　这也就说明，在任何设计中，色彩对视觉的刺激起到第一信息传达的作用。

因此，对色彩的基础知识的良好掌控，在网页设计中才能做到游刃有余。

　　前面我们介绍了常用的电脑色彩模式RGB、HSB，以及色彩的三大属性，今天我们介绍常用配色的基本概念和相关实例剖析。

色环

色环是色彩按红、黄、绿、蓝、红依次过度渐变呈现出来的不同颜色，就可以得到一个色彩环。

色环通常包括12种不同的颜色。

三原色

■原色：

　　也叫"三原色"。

即红、黄、蓝三种基本颜色。

自然界中的色彩种类繁多，变化丰富，但这三种颜色却是最基本的原色，原色是其他颜色调配不出来的。

除白色外，把三原色相互混合，可以调和出其他种颜色。

　　根据三原色的特性做出相应的色彩搭配，有最迅速最有力最强烈的传达视觉信息效果。

→黄色网页例图：

http:

//www.uni-leipzig.de/studienart/i_flash.htm

　　黄色分析：

　　选取了主色调黄色为示例。

我们看到RGB数值中RG呈现最高值255时，HSB数值中的SB也呈现最高值100%，页面呈现最高纯度亮度——纯黄色。

因此黄色在三原色中也是亮度最高的颜色。

　　结论：

　　HSB中SB呈现的数值越高，饱和度明度越高，页面色彩强烈艳丽，由于黄色是亮度最高的颜色这一特性，也给人视觉产生强烈刺激的状态，对视觉刺激是迅速的、警戒、醒目的效果，但不易于长时间观看。

→红色网页例图：

　　红色分析：

　　我们看到RGB中R的数值是227，混合了G30、B40，因此红色的纯度轻微降低，颜色稍偏深红。

HSB数值中S显示的饱和度为87%，B为89%，因此颜色还是较为饱和明亮。

　　结论：

　　主色R227数值较高的时候，由于混合了G30、B40少许颜色，饱和度明度稍微降低，视觉刺激减弱，红色特性显得较沉稳。

但由于红色是最温暖最有视觉冲击力的颜色特性，该网页整体看来仍然厚重而热烈的表达了主题。

→蓝色网页例图：

■纯度（Chroma）：

　　也叫饱和度，指色彩的鲜艳程度。

原色最纯，颜色的混合越多则纯度逐渐减低。

如某一鲜亮的颜色，加入了白色或者黑色，使得它的纯度低，颜色趋于柔和、沉稳。

加入黑色的纯度变化和加入白色的纯度变化

→纯度网页例图：

http:

//www.minimalweb.de

　　纯度分析：

　　上图网页中选取了主要的两种色系为组合。

运用HBS数值模式更易于理解分析该网页的纯度情况。

　　我们看到蓝色S数值呈现99％具有相当高的饱和度，B明度为79%，玫瑰色S饱和度数值为85%，B明度为97％。

当饱和度和明度同时呈最高值时，色彩对视觉的刺激强度到达最高状态。

由于蓝色的明度稍低，饱和度较高，而玫瑰色的明度较高，该颜色纯度随之加强，因此玫瑰色相对蓝色对人的视觉刺激更强烈。

　　结论：

　　HSB模式中S和B呈现的数值越高，饱和度明度越高，页面色彩强烈艳丽，对视觉刺激是迅速的，醒目的效果，但不易于长时间的观看。

以上两种颜色的S数值接近，是强烈的状态。

H显示的度是代表在色轮表里某个角度所呈现的色相状态，相对于SB来说，意义不大。

　　蓝色分析：

　　RGB数值中B蓝色的数值是131与R2、G83相混合，蓝色的纯度降低。

结合HSB中数值H色相目前显示的是203°，而三原色的纯蓝为240°来看，蓝色的色相偏离较大，加上B为51%的明度，颜色偏暗，因此视觉冲击力较弱。

页面沉稳、凝重。

结论：

　　当蓝色色相偏离于三原色的纯蓝时，视觉冲击力削弱。

页面呈沉稳、平静的感受。

蓝色在三原色里是视觉传递速度最慢的颜色特性，适合用于表达成熟、稳重、安静的网页设计主题。

蓝色在网页设计里也是使用得较频繁的颜色。

网页基本配色

　　　颜色绝不会单独存在。

事实上，一个颜色的效果是由多种因素来决定的：

反射

　的光，周边搭配的色彩，或是观看者的欣赏角度。

　　　有十种基本的配色设计，分别叫做：

　　　无色设计（achromatic）、类比设计（analogous）、冲突设计（clash）、

　　　互补设计（complement）、单色设计（monochromatic）、中性设计（neutral）、

　　　分裂补色设计（splitcomplement）、原色设计（primary）、

　　　二次色设计（secondary）以及三次色三色设计（tertiary）。

105

101

105

101

无色设计

不用彩色，只用黑、

白、灰色。

类比设计

在色相环上任选三个

连续的色彩或其任一

明色和暗色。

冲突设计

把一个颜色和它补色

左边或右边的色彩配

合起来。

互补设计

使用色相环上全然相

反的颜色。

单色设计

把一个颜色和任一个

或它所有的明、暗色

配合起来。

。

中性设计

加入一个颜色的补色

或黑色使它色彩消失

或中性化。

分裂补色设计

把一个颜色和它补色

任一边的颜色组合起

来。

原色设计

把纯原色红、黄、蓝

色结合起来。

二次色设计

把二次色绿、紫、橙

色结合起来。

三次色三色设计

三次色三色设计是下

面二个组合中的一个：

红橙、黄绿、蓝紫色

或是蓝绿，黄橙、红

紫色，并且在色相环

展开阅读全文