当前位置：网站首页 > 技术博客 > 正文

html颜色代码大全(含图)

技术博客 来源： 网络 编辑：小编 发布时间：2024-10-21 20:30:04 浏览量：45

个人小站：https://stormsha.com/ 静觅 | StormSha的个人博客

非常全面的颜色代码和颜色搭配教程，转自：2008-07-28 http://huayi898.blog.163.com/blog/static/2/

 华艺时空注：

       鉴于朋友们（包括我自己）在设计网页、取用颜色时到处东翻西找的不便，经过认真学习领悟，觉得有必要把比较全面的颜色代码表做到博客中来，同时更觉得网页颜色搭配常规性知识与技能十分重要。因此，我汇集了网上众贤的高见，做成了这期专题。希望能给大家的日常使用带来方便，更希望朋友们天天进步，更上一层楼！

       特请朋友们在转载时注明：本专题来自于“华艺时空积学网”，整理改编：华艺时空。以示对本人劳动成果的尊重（做这一个专题是需要时间和精力的。老婆都打俺了，呵呵。。。。）

 

颜色代码表（史上最全 一览无余）

 #000000

 #000033

 #000066

 #000099

 #0000CC

 #0000FF

 #003300

 #003333

 #003366

 #003399

 #0033CC

 #0033FF

 #006600

 #006633

 #006666

 #006699

 #0066CC

 #0066FF

 #009900

 #009933

 #009966

 #009999

 #0099CC

 #0099FF

 #00CC00

 #00CC33

 #00CC66

 #00CC99

 #00CCCC

 #00CCFF

 #00FF00

 #00FF33

 #00FF66

 #00FF99

 #00FFCC

 #00FFFF

 #

 #

 #

 #

 #3300CC

 #3300FF

 #

 #

 #

 #

 #3333CC

 #3333FF

 #

 #

 #

 #

 #3366CC

 #3366FF

 #

 #

 #

 #

 #3399CC

 #3399FF

 #33CC00

 #33CC33

 #33CC66

 #33CC99

 #33CCCC

 #33CCFF

 #33FF00

 #33FF33

 #33FF66

 #33FF99

 #33FFCC

 #33FFFF

 #

 #

 #

 #

 #6600CC

 #6600FF

 #

 #

 #

 #

 #6633CC

 #6633FF

 #

 #

 #

 #

 #6666CC

 #6666FF

 #

 #

 #

 #

 #6699CC

 #6699FF

 #66CC00

 #66CC33

 #66CC66

 #66CC99

 #66CCCC

 #66CCFF

 #66FF00

 #66FF33

 #66FF66

 #66FF99

 #66FFCC

 #66FFFF

 #

 #

 #

 #

 #9900CC

 #9900FF

 #

 #

 #

 #

 #9933CC

 #9933FF

 #

 #

 #

 #

 #9966CC

 #9966FF

 #

 #

 #

 #

 #9999CC

 #9999FF

 #99CC00

 #99CC33

 #99CC66

 #99CC99

 #99CCCC

 #99CCFF

 #99FF00

 #99FF33

 #99FF66

 #99FF99

 #99FFCC

 #99FFFF

 #CC0000

 #CC0033

 #CC0066

 #CC0099

 #CC00CC

 #CC00FF

 #CC3300

 #CC3333

 #CC3366

 #CC3399

 #CC33CC

 #CC33FF

 #CC6600

 #CC6633

 #CC6666

 #CC6699

 #CC66CC

 #CC66FF

 #CC9900

 #CC9933

 #CC9966

 #CC9999

 #CC99CC

 #CC99FF

 #CCCC00

 #CCCC33

 #CCCC66

 #CCCC99

 #CCCCCC

 #CCCCFF

 #CCFF00

 #CCFF33

 #CCFF66

 #CCFF99

 #CCFFCC

 #CCFFFF

 #FF0000

 #FF0033

 #FF0066

 #FF0099

 #FF00CC

 #FF00FF

 #FF3300

 #FF3333

 #FF3366

 #FF3399

 #FF33CC

 #FF33FF

 #FF6600

 #FF6633

 #FF6666

 #FF6699

 #FF66CC

 #FF66FF

 #FF9900

 #FF9933

 #FF9966

 #FF9999

 #FF99CC

 #FF99FF

 #FFCC00

 #FFCC33

 #FFCC66

 #FFCC99

 #FFCCCC

 #FFCCFF

 #FFFF00

 #FFFF33

 #FFFF66

 #FFFF99

 #FFFFCC

 #FFFFFF

 #FFFFF0

 #FFFFE0

 #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

 #FDF5E6

 #FAFAD2

 #FAF0E6

 #FAEBD7

 #FA8072

 #F8F8FF

 #F7F7F7

 #F5FFFA

 #F5F5DC

 #F5DEB3

 #F4A460

 #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

 #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

 #A6A6A6

 #A52A2A

 #A4D3EE

 #A3A3A3

 #A2CD5A

 #A2B5CD

 #A1A1A1

 #A0522D

 #A020F0

 #AB82FF

 #9FB6CD

 #9F79EE

 #9E9E9E

 #9BCD9B

 #9B30FF

 #9AFF9A

 #9ACD32

 #9AC0CD

 #9A32CD

 #9932CC

 #98FB98

 #98F5FF

 #97FFFF

 #96CDCD

 #

 #

 #9400D3

 #9370DB

 #

 #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

 #

 #

 #

 #8470FF

 #838B8B

 #838B83

 #836FFF

 #

 #7FFFD4

 #7FFF00

 #7F7F7F

 #7EC0EE

 #7D9EC0

 #7D7D7D

 #7D26CD

 #7CFC00

 #7CCD7C

 #7B68EE

 #7AC5CD

 #7A8B8B

 #7A7A7A

 #7A67EE

 #7A378B

 #79CDCD

 #

 #

 #76EEC6

 #76EE00

 #

 #

 #71C671

 #7171C6

 #

 #

 #6E8B3D

 #6E7B8B

 #6E6E6E

 #6CA6CD

 #6C7B8B

 #6B8E23

 #6B6B6B

 #6A5ACD

 #698B69

 #698B22

 #

 #6959CD

 #68838B

 #68228B

 #66CDAA

 #66CD00

 #668B8B

 #6495ED

 #63B8FF

 #

 #

 #607B8B

 #5F9EA0

 #5E5E5E

 #5D478B

 #5CACEE

 #5C5C5C

 #5B5B5B

 #

 #

 #556B2F

 #

 #551A8B

 #54FF9F

 #548B54

 #

 #53868B

 #528B8B

 #

 #

 #4F94CD

 #4F4F4F

 #4EEE94

 #4D4D4D

 #4B0082

 #4A708B

 #4A4A4A

 #48D1CC

 #4876FF

 #483D8B

 #

 #473C8B

 #4682B4

 #458B74

 #458B00

 #

 #43CD80

 #436EEE

 #

 #4169E1

 #40E0D0

 #

 #3D3D3D

 #3CB371

 #3B3B3B

 #3A5FCD

 #388E8E

 #

 #36648B

 #

 #32CD32

 #

 #2F4F4F

 #2E8B57

 #2E2E2E

 #2B2B2B

 #

 #

 #27408B

 #

 #

 #228B22

 #

 #

 #20B2AA

 #1F1F1F

 #1E90FF

 #1E1E1E

 #1C86EE

 #1C1C1C

 #1A1A1A

 #

 #1874CD

 #

 #

 #

 #104E8B

 #0F0F0F

 #0D0D0D

 #0A0A0A

 #080808

 #050505

 #030303

 #00FF7F

 #00FA9A

 #00F5FF

 #00EEEE

 #00EE76

 #00EE00

 #00E5EE

 #00CED1

 #00CDCD

 #00CD66

 #00CD00

 #00C5CD

 #00BFFF

 #00B2EE

 #009ACD

 #008B8B

 #008B45

 #008B00

 #00868B

 #00688B

 #006400

 #0000EE

 #0000CD

 #0000AA

 #00008B

 #000080

      

 #

 #CC6699

 #FF6699

 #FF3366

 #

 #CC0066

 #CC0033

 #FF0066

 #FF0033

 #CC3399

 #FF3399

 #FF9999

 #FF99CC

 #FF0099

 #CC3366

 #FF66CC

 #FF33CC

 #FFCCFF

 #FF99FF

 #FF00CC

 #FF66FF

 #CC33CC

 #CC00FF

 #FF33FF

 #CC99FF

 #9900CC

 #FF00FF

 #CC66FF

 #

 #CC0099

 #CC33FF

 #CC99CC

 #

 #

 #CC66CC

 #CC00CC

 #

 

 #

 #666FF

 #000CC

 #9933CC

 #

 #

 #

 #0066CC

 #9900FF

 #

 #99CCFF

 #9933FF

 #

 #6699FF

 #9966CC

 #3300CC

 #003366

 #

 #3300FF

 #6699CC

 #

 #3333FF

 #006699

 #6633CC

 #3333CC

 #3399CC

 #6600CC

 #0066FF

 #0099CC

 #9966FF

 #0033FF

 #66CCFF

 #

 #3366FF

 #3399FF

 #6600FF

 #3366CC

 #003399

 #6633FF

 #000066

 #0099FF

 #CCCCFF

 #000033

 #33CCFF

 #9999FF

 #0000FF

 #00CCFF

 #9999CC

 #000099

 #6666CC

 #0033CC

 

 #FFFFCC

 #FFCC00

 #CC99090

 #

 #FF6600

 #

 #CC6666

 #FF6666

 #FF0000

 #FFFF99

 #FFCC66

 #FF9900

 #FF9966

 #CC3300

 #

 #CC6600

 #FF6633

 #

 #CC9999

 #FF3333

 #

 #CC9966

 #FFFF33

 #CC9933

 #

 #FF9933

 #

 #

 #CC3333

 #CC0000

 #FFCC99

 #FFFF00

 #

 #CC6633

 #99FFFF

 #33CCCC

 #00CC99

 #99FF99

 #009966

 #33FF33

 #33FF00

 #99CC33

 #CCC33

 #009966

 #66CCCC

 #66FFCC

 #66FF66

 #009933

 #00CC33

 #66FF00

 #

 #33300

 #33FFFF

 #

 #99FFCC

 #

 #33FF66

 #33CC33

 #99FF00

 #

 #

 #00FFFF

 #

 #00FF99

 #99CC99

 #00FF66

 #66FF33

 #66CC00

 #99CC00

 #

 #00CCCC

 #006666

 #

 #66FF99

 #CCFFCC

 #00FF00

 #00CC00

 #CCFF66

 #CCCC66

 #009999

 #003333

 #006633

 #33FF99

 #CCFF99

 #66CC33

 #33CC00

 #CCFF33

 #

 #

 #00FFCC

 #

 #33CC66

 #99FF66

 #006600

 #

 #CCFF00

 #

 #99CCCC

 #33FFCC

 #

 #00CC66

 #99FF33

 #003300

 #99CC66

 #

 #CCCC99

 #CCFFFF

 #33CC99

 #66CC66

 #66CC99

 #00FF33

 #009900

 #

 #

 #CCCC00

 

 

 

 

 #FFFFF

 #CCCCCC

 #

 #

 #

 #000000

 

英文颜色代码表（附下）

 red

 green

 blue

 magenta

 yellow

 chocolate

 black

 aquamarine

 lime

 fuchsia

 brass

 azure

 brown

 bronze

 deeppink

 aliceblue

 gray

 copper

 coral

 feldspar

 orange

 orchid

 pink

 plum

 quartz

 purple

 antiquewithe

 blanchedalmond

 blueviolet

 beige

 burlywood

 bisque

 cadetblue

 saddlebrown

 royalblue

 rosybrown

 orengered

 olivedrab

 powderblue

 peachpuff

 papayawhip

 paleturquoise

 palevioletred

 palegreen

 navyblue

 navajowhite

 palegodenrod

 violetred

 yellowgreen

 tomato

 turquoise

 thistle

 springgreen

 steelblue

 salmon

 scarlet

 sienna

 silver

 tan

 violet

 snow

 chartreuse

 firebrick

 gold

 khaki

 mediumslateblue

 mediumvioletred

 oldlace

 maroon

 goldenrod

 wheat

 whitesmoke

 moccasin

 mistyrose

 mintcream

 midnightblue

 dimgray

 darksalmon

 slategray

 skyblue

 seashell

 seagreen

 sandybrown

 mediumturquoise

 navy

 mediumspringgreen

 mediumseagreen

 mediumpurpul

 peru

 mediumorchid

 mediumblue

 mediumaquamarine

 limegreen

 lightyellow

 lightsteelblue

 lavender

 lavenderblush

 lemonchiffon

 lightyellow

 lightsteelblue

 lightslateblue

 lightslategray

 lightskyblue

 lightseagreen

 lightsalmon

 lightpink

 lightgray

 lightgreen

 lightgodenrodyellow

 indianred

 lightblue

 lightcoral

 lightcyan

 lightgodenrod

 hotpink

 greenyellow

 lawngreen

 deepskyblue

 honeydew

 forestgreen

 gostwhite

 gainsboro

 dodgerblue

 darkturquoise

 darkslateblue

 darkslategray

 darkseagreen

 darkred

 darkorchid

 darkorenge

 darkslateblue

 darkviolet

 floralwhite

 cyan

 cornsilk

 darkolivegreen

 darkgoldenrod

 darkcyan

 darkgreen

 darkhaki

 ivory

 darkmagenta

 darkgray

 cornfloewrblue

 darkviolet

 

网页色彩搭配技巧教程（改编整理）

       通常，我们在打开一个网站时，第一印象并不是网站丰富的内容，也不是网站合理的版面布局，而是网站的色彩搭配得如何。网站色彩的搭配对人的视觉效果非常具有冲击力。大家知道：网页设计属于平面效果设计之一，排除立体图形、动画效果等，在平面视觉上色彩的冲击力是最强的。因此，一个网站设计得成败与否，一定程度上取决于设计者对色彩的搭配运用。

       一、色彩基础知识
       学过美术的人都知道：我们平时所看到的白色光，是由红、橙、黄、绿、青、蓝、紫七色组成的，而各个颜色之间是自然过渡的。按照美术学科的色彩知识，我们把红、黄、蓝三种颜色叫做三原色，三原色是组成万千色彩的最基本的颜色。三原色通过不同比例进行混合就可以得到各种颜色（就如我们上面所列出的千变万化的颜色图谱）。色彩还有冷暖色之分，冷色(如蓝色)给人的感觉是安静、冰冷；而暖色(如红色)给人的感觉是热烈、火热。冷暖色的巧妙运用可以让网站的色彩搭配产生意想不到的效果。 
       正因为色彩能影响到人的心理和情绪，因而我们可以在设计网页时形成自己独特的色彩感受，为浏览者留下深刻的印象。一般情况下，各种色彩给人的感觉是： 
       红色：代表热情、活泼、热闹、温暖、幸福、吉祥 ；
       橙色：代表光明、华丽、兴奋、甜蜜、快乐 ；
       黄色：代表明朗、愉快、高贵、希望； 
       绿色：代表新鲜、平静、和平、柔和、安逸、青春 ；
       蓝色：代表深远、永恒、沉静、理智、诚实、寒冷； 
       紫色：代表优雅、高贵、魅力、自傲； 
       白色：代表纯洁、纯真、朴素、神圣、明快； 
       灰色：代表忧郁、消极、谦虚、平凡、沉默、中庸、寂寞； 
       黑色：代表崇高、坚实、严肃、刚健、粗莽； 

       二、色彩搭配原则

       色彩搭配既是一项技术性工作，同时它也是一项艺术性很强的工作。因此，设计者在设计网页时除了要考虑网站本身的特点外，还要遵循一定的艺术规律，设计出色彩鲜明，性格独特的网站。

       1、特色鲜明

       一个网站的用色必须要有自己独特的风格，只有个性鲜明，才能给浏览者留下深刻的印象。       

       2、搭配合理

       网页设计虽然属于平面设计的范畴，但它又与其它平面设计有所不同。它必须在遵从艺术规律的同时，还要考虑到人的生理特点。因此，色彩搭配一定要合理，要给人一种和谐、愉快的感觉，避免采用纯度很高的单一色彩，这样容易造成视觉疲劳。

       3、讲究艺术性

       网站设计也是一种艺术创新。在遵循艺术规律的同时，还要考虑到网站自身的特点，要按照内容决定形式的原则，大胆进行艺术创新，设计出既符合网站要求，又有一定艺术特色的网站。

       三、色彩搭配应注意的问题

       1、使用单色 

        尽管网站设计要避免采用单一色彩，以免产生单调的感觉，但通过调整色彩的饱和度和透明度也可以产生变化，使网站避免单调。

       2、使用邻近色

       所谓邻近色，就是在色带上相邻近的颜色，例如绿色和蓝色，红色和黄色就互为邻近色。采用邻近色设计网页，可以使网页避免色彩杂乱，以达到页面艺术的和谐与统一。

       3、使用对比色

       对比色可以突出重点，产生了强烈的视觉效果。通过合理使用对比色，能够使网站特色鲜明、重点突出。在设计时一般以一种颜色为主色调，对比色作为点缀，以起到画龙点睛的作用。

       4、黑色的使用

       黑色是一种特殊的颜色，如果使用恰当，设计合理，往往产生很强烈的艺术效果。黑色一般用来作背景色，与其它纯度色彩搭配使用。

       5、背景色的使用

       背景色一般采用素雅清淡的色彩，避免采用花纹复杂的图片和纯度很高的色彩作为背景色，同时背景色要与文字的色彩对比搭配好，使之与文字色彩对的比强烈一些。

       6、色彩的数量

       一般初学者在设计网页时往往使用多种颜色，使网页变得很“花哨”，缺乏内在美感和和谐统一。实质上，网站的用色不是越多越好，一般应控制在三种色彩以内，通过调整色彩的各种属性来使之产生变化。

对于做网页的初学者来说，他们可能更愿意使用一些漂亮图片作为自己网页的背景。但你浏览一下那些大型商业网站，就会发现：他们更多运用的是白色、蓝色、黄色等，使得网页显得典雅、大方和温馨。更重要的是，这样可以大大加快浏览者打开网页的速度。

一般来说，网页的背景色应该柔和一些、素雅一些、淡雅一些，再配上深色的文字，使人看起来会从心理上产生自然、舒畅的感觉。如果为了追求醒目的视觉效果，可以为标题使用较深的颜色。下面我们结合一些成功人士对网页背景和文字色彩搭配的经验，举出如下一些实例以供参考。这些颜色可以做正文的底色，也可以做标题的底色，再搭配不同的字体，一定会产生不错的效果，希望对大家有用。

　　

当然，大家可以充分发挥自己的想象力，搭配出更有新意、更醒目的颜色，使网页更具有吸引力。

四、有关字体颜色的搭配

文本是网页中最为重要的设计元素。虽然互联网日趋发达、网络信息大量呈现、精美网页层出不穷，但都必须通过文本、图像、Flash动画等来作为设计要素。其中，文本设计对于网页设计者来讲就显得尤为重要。

1、文字的格式化

⑴字号、字体、行距

字号大小可以用不同的方式来计算，例如磅或像素。因为以像素技术为基础单位打印时需要转换为磅，所以，建议采用磅为单位。

最适合于网页正文显示的字体大小为12磅左右。现在很多的综合性站点，由于在一个页面中需要安排的内容较多，通常采用9磅的字号。较大的字体可用于标题或其他需要强调的地方，小一些的字体可以用于页脚和辅助信息。需要注意的是，小字号容易产生整体感和精致感，但可读性较差。

网页设计者可以用字体来更充分地体现设计中要表达的情感。字体选择是一种感性、直观的行为。但是，无论选择什么字体，都要符合网页的总体设想和浏览者的实际需要。例如：粗体字强壮有力，有男性特点，适合机械、建筑业等内容；细体字高雅细致，有女性特点，更适合服装、化妆品、食品等行业的内容。在同一页面中，字体种类少，版面雅致，有稳定感；字体种类多，则版面活跃，丰富多彩。关键是如何根据页面内容来掌握这个比例关系。

从加强平台无关性的角度来考虑，正文内容最好采用缺省字体。因为浏览器是用本地机器上的字库显示页面内容的。作为网页设计者必须考虑到大多数浏览者的机器里只装有三种字体类型及一些相应的特定字体。而你指定的字体在浏览者的机器里并不一定能够找到，这给网页设计带来很大的局限。解决问题的办法是：在确有必要使用特殊字体的地方，可以将文字制成图像，然后插入页面中。

行距的变化也会对文本的可读性产生很大影响。一般情况下，接近字体尺寸的行距设置比较适合正文。行距的常规比例为10:12，即用字10点，则行距12点。这主要是出于以下考虑：适当的行距会形成一条明显的水平空白带，以引导浏览者的目光，而行距过宽会使一行文字失去较好的延续性。

除了对于可读性的影响，行距本身也是具有很强表现力的设计语言。为了加强版式的装饰效果，可以有意识地加宽或缩窄行距，体现独特的审美意趣。例如，加宽行距可以体现轻松、舒展的情绪，应用于娱乐性、抒情性的内容恰如其分。另外，通过精心安排，使宽、窄行距并存，可增强版面的空间层次与弹性，表现出独到的匠心。

行距可以用行高的属性来设置，建议以磅或默认行高的百分数为单位。例如：line-height：20pt、line-height：150%。

⑵文字的整体编排

页面里的正文部分是由许多单个文字经过编排组成的群体，要充分发挥这个群体形状在版面整体布局中的作用。从艺术的角度可以将字体本身看成是一种艺术形式，它在个性和情感方面对人们有着很大影响。在网页设计中，字体的处理与颜色、版式、图形等其他设计元素的处理一样非常关键。从某种意义上来讲，所有的设计元素都可以理解为图形。

①文字的图形化

字体具有两方面作用：一是实现字意与语义的功能，二是美学效应。

所谓文字图形化，即是强调它的美学效应，把记号性的文字作为图形元素来表现，同时又强化了原有的功能。作为网页设计者，既可以按照常规的方式来设置字体，也可以对字体进行艺术化的设计。无论怎样，一切都应围绕如何更出色地实现自己的设计目标。

将文字图形化、意象化，以更富创意的形式表达出深层的设计思想，能够克服网页的单调与平淡，从而打动人心。

②文字的叠置

文字与图像之间或文字与文字之间在经过叠置后，能够产生空间感、跳跃感、透明感、杂音感和叙事感，从而成为页面中最活跃的、令人注目的元素。虽然叠置手法影响了文字的可读性，但是能造成页面独特的视觉效果。这种不追求易读，而刻意追求“杂音”的表现手法，体现了一种艺术思潮。因而，它不仅大量运用于传统的版式设计，在网页设计中也被广泛地加以采用。

③标题与正文

在进行标题与正文的编排时，可先考虑将正文作双栏、三栏或四栏的编排，再进行标题的置入。将正文分栏，是为了求取页面的空间与弹性，避免通栏的呆板以及标题插入方式的单一性。标题虽是整段或整篇文章的标题，但不一定千篇一律地置于段首之上。可作居中、横向、竖向或边置等编排处理，甚至可以直接插入字群中，以新颖的版式来打破旧有的规律。

④文字编排的四种基本形式

页面的正文部分是由许多单个文字经过编排组成的群体，要充分发挥这个群体形状在版面整体布局中的作用。

两端均齐：文字从左端到右端的长度均齐，字群形成方方正正的面，显得端正、严谨、美观。

居中排列：在字距相等情况下，以页面中心为轴线排列，这种编排方式使文字更加突出，产生对称的形式美。

左对齐或右对齐：左对齐或右对齐使行首或行尾自然形成一条清晰的垂直线，很容易与图形配合。这种编排方式有松有紧，有虚有实，跳动而飘逸，产生节奏与韵律的形式美。左对齐符合人们阅读时的习惯，显得自然；右对齐因不太符合阅读习惯而较少采用，但显得新颖。

绕图排列：将文字绕图形边缘排列。如果将底图插入文字中，会令人感到融洽、自然。

2、文字的强调

⑴行首的强调

将正文的第一个字或字母放大并作装饰性处理，嵌入段落的开头，这在传统媒体版式设计中称之为“下坠式”。此技巧的发明溯源于欧洲中世纪的文稿抄写员。由于它有吸引视线、装饰和活跃版面的作用，所以被应用于网页的文字编排中。其下坠幅度应跨越一个完整字行的上下幅度。至于放大多少，则依据所处网页环境而定。

⑵引文的强调

在进行网页文字编排时，常常会碰到提纲挈领性的文字，即引文。引文概括一个段落、一个章节或全文大意，因此在编排上应给予特殊的页面位置和空间来强调。引文的编排方式多种多样，如将引文嵌入正文的左右侧、上方、下方或中心位置等，并且可以在字体或字号上与正文相区别而产生变化。

⑶个别文字的强调

如果将个别文字作为页面的诉求重点，则可以通过加粗、加框、加下划线、加指示性符号、倾斜字体等手段有意识地强化文字的视觉效果，使其在页面整体中显得出众而夺目。另外，改变某些文字的颜色，也可以使这部分文字得到强调。这些方法实际上都是运用了对比的法则。

3、文字的颜色

说了半天，才说到正题上。在网页设计中，设计者可以为文字、文字链接、已访问链接和当前活动链接选用各种颜色。使用不同颜色的文字可以使想要强调的部分更加引人注目。但应该注意：对于文字的颜色，只可少量运用，如果什么都想强调，其实是什么都没有强调。况且，在一个页面上运用过多的颜色，会影响浏览者阅读页面内容，除非你有特殊的设计目的。

颜色的运用除了能够起到强调整体文字中特殊部分的作用之外，对于整个文案的情感表达也会产生影响。这涉及色彩的情感象征性问题，限于篇幅，在这里不做深入探讨。

另外需要注意的是文字颜色的对比度，它包括明度上的对比、纯度上的对比以及冷暖的对比。这些不仅对文字的可读性发生作用，更重要的是，你可以通过对颜色的运用实现想要的设计效果、设计情感和设计思想。

五、网页色彩搭配的色感   

1、红色的色感温暖，性格刚烈而外向，是一种对人刺激性很强的色。红色容易引起人的注意，也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳的色。 
　　⑴在红色中加入少量的黄，会使其热力强盛，趋于躁动、不安。 
　　⑵在红色中加入少量的蓝，会使其热性减弱，趋于文雅、柔和。 
　　⑶在红色中加入少量的黑，会使其性格变的沉稳，趋于厚重、朴实。  
　　⑷在红中加入少量的白，会使其性格变的温柔，趋于含蓄、羞涩、娇嫩。 

 2、黄色的性格冷漠、高傲、敏感、具有扩张和不安宁的视觉印象。黄色是各种色彩中，最为娇气的一种色。只要在纯黄色中混入少量的其它色，其色相感和色性格均会发生较大程度的变化。 
　　⑴在黄色中加入少量的蓝，会使其转化为一种鲜嫩的绿色。其高傲的性格也随之消失，趋于一种平和、潮润的感觉。 
　　⑵在黄色中加入少量的红，则具有明显的橙色感觉，其性格也会从冷漠、高傲转化为一种有分寸感的热情、温暖。 
　　⑶ 在黄色中加入少量的黑，其色感和色性变化最大，成为一种具有明显橄榄绿的复色印象。其色性也变的成熟、随和。 
　　⑷ 在黄色中加入少量的白，其色感变的柔和，其性格中的冷漠、高傲被淡化，趋于含蓄，易于接近。

3、蓝色的色感冷嘲热讽，性格朴实而内向，是一种有助于人头脑冷嘲热讽静的色。蓝色的朴实、内向性格，常为那些性格活跃、具有较强扩张力的色彩，提供一个深远、广埔、平静的空间，成为衬托活跃色彩的友善而谦虚的朋友。蓝色还是一种在淡化后仍然似能保持较强个性的色。如果在蓝色中分别加入少量的红、黄、黑、橙、白等色，均不会对蓝色的性格构成较明显的影响力。 
　　⑴ 如果在橙色中黄的成份较多，其性格趋于甜美、亮丽、芳香。 
　　⑵ 在橙色中混入小量的白，可使橙色的知觉趋于焦躁、无力。

4、绿色是具有黄色和蓝色两种成份的色。在绿色中，将黄色的扩张感和蓝色的收缩感相中庸，将黄色的温暖感与蓝色的寒冷感相抵消。这样使得绿色的性格最为平和、安稳。是一种柔顺、恬静、潢足、优美的色。 
　　⑴ 在绿色中黄的成份较多时，其性格就趋于活泼、友善，具有幼稚性。 
　　⑵ 在绿色中加入少量的黑，其性格就趋于庄重、老练、成熟。 
　　⑶ 在绿色中加入少量的白，其性格就趋于洁净、清爽、鲜嫩。 

5、紫色的明度在有彩色的色料中是最低的。紫色的低明度给人一种沉闷、神秘的感觉。 
　　⑴ 在紫色中红的成份较多时，其知觉具有压抑感、威胁感。 
　　⑵ 在紫色中加入少量的黑，其感觉就趋于沉闷、伤感、恐怖。 
　　⑶ 在紫色中加入白，可使紫色沉闷的性格消失，变得优雅、娇气，并充满女性的魅力。   

6、白色的色感光明，性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。如果在白色中加入其它任何色，都会影响其纯洁性，使其性格变的含蓄。 
　　⑴ 在白色中混入少量的红，就成为淡淡的粉色，鲜嫩而充满诱惑。 
　　⑵在白色中混入少量的黄，则成为一种乳黄色，给人一种香腻的印象。 
　　⑶ 在白色中混入少量的蓝，给人感觉清冷、洁净。 
　　⑷ 在白色中混入少量的橙，有一种干燥的气氛。 
　　⑸ 在白色中混入少量的绿，给人一种稚嫩、柔和的感觉 。
　　⑹ 在白色中混入少量的紫，可诱导人联想到淡淡的芳香。

   六、整体色彩搭配 

       1、用一种色彩     

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

       2、用两种色彩       

       先选定一种色彩，然后选择它的对比色(在photoshop里按ctrl+shift+I)，这样整个页面色彩丰富但不花哨。      

       3、用一个色系       

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

       4、用黑色和一种彩色       

       比如：大红的字体配黑色的边框感觉会很“跳”。

       在配色中，最忌讳的：       

       1、不要将所有颜色都用到，尽量控制在三种色彩以内。       

       2、背景和前文的对比尽量要大(绝对不要用花纹繁复的图案作背景)，以便突出主要宝贝、文字及产品内容。

 
　　七、网页颜色搭配风格

　　不同的网站有着自己不同的风格，也有着自己不同的颜色。网站使用颜色大概分为几种类型：

       1、 公司色

       在现在企业中，公司的CI形象显得尤其重要，每一个公司的CI设计必然要有标准的颜色。比如新浪网的主色调是一种介于浅黄和深黄之间的颜色，同时形象宣传、海报、广告使用的颜色都和网站的颜色一致。再比如国富投资公司的主色调是C：100%，M：60%，Y：0%，K：0%。这样的颜色使用到网站上显得色调自然、底蕴深厚。

       2、 风格色

        许多网站使用颜色秉承的是公司的风格。比如海尔使用的颜色是一种中性的绿色，即充满朝气有不失自己的创新精神。女性网站使用粉红色的较多，大公司使用蓝色的较多……这些都是在突出自己的风格。

       3、 习惯色

        这些网站的颜色使用很大一部分是凭自己的个人爱好，以个人网站较多使用，比如自己喜欢红色、紫色、黑色等，在做网站的时候就倾向于这种颜色。每一个人都有自己喜欢的颜色，因此这种类型称为习惯色。

华艺时空总结：评价一个网站好与坏，其网站的界面的颜色搭配是很重要的一点。对于网站颜色的搭配，在业界虽然没有一个统一的标准，但要想使自己的网站别具一格，就得多对一些设计优秀的网站进行比较和借鉴。网页设计的颜色搭配是一个在实践中不断的摸索和不断的创新的过程。因此，大家要认真学习、吸纳别人先进的设计理念、方法和经验，这样才能快速地提高我们的设计水平。

好了，本期专题就做到这儿。如果有什么意见、建议和好的思路，请您联系我：   ，华艺电脑学习群群号  。欢迎大家参与讨论！

  • 上一篇： ece安装教程
  • 下一篇： IDL实现相对辐射定标

    • 版权声明：

    本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。


    本文网址：https://www.mushiming.com/mjsbk/545.html

    相关文章：

  • ece安装教程2024-10-21 20:30:04
  • 大学生计算机专业顶岗实习日记24篇2024-10-21 20:30:04
  • python2.7操作excel2024-10-21 20:30:04
  • 植物大战僵尸重制版2024-10-21 20:30:04
  • yolo目标检测需要多少数据2024-10-21 20:30:04
  • IDL实现相对辐射定标2024-10-21 20:30:04
  • javascript中switch用法列题2024-10-21 20:30:04
  • 实践为什么是认识的基础2024-10-21 20:30:04
  • 前端计算器代码2024-10-21 20:30:04
  • iptables规则生成2024-10-21 20:30:04