网站基本配色——低沉

Filed Under (网页配色) by 有为 on 07-04-2009

不同于其它色彩展现柔和,低沉之美的灰紫色没有对比色。灰紫色调合了红紫色、灰色和白色,是个少见的彩色。
任何颜色加上少许的灰色或白色,能表达出的柔和之美,有许多种包括灰蓝色、灰绿色等。但若灰紫色本身被赋其它彩度或亮度,则可能掩盖了原颜色的原有意境。使用补色,或比原色更生动的颜色,可使这些展现柔和之美的颜色顿时生意昂然,但要保持自然的柔美,亮度的变化应尽少使用。

补色色彩组合

三次色色彩组合

单色色彩组合

48
96
46
94
62
30
94
86
92
94
94
43
90
48
94
63
32
95
89
92
95
94
96
42
94
42
95
26
59
94
90
96
94
92
94
47
91
45
95
29
60
93
96
95
94
91
94

分裂补色色彩组合

类比色彩组合

51
91
38
55
95
39
94
6
13
86
94
6
78
86
94
54
93
34
54
95
40
93
7
15
85
95
8
77
87
94
55
95
35
36
94
38
96
6
14
88
95
5
80
85
95
50
96
34
54
93
38
95
7
16
86
92
7
75
86
94

中性色彩组合

冲突色彩组合

分裂色彩组合

98
99
94
33
95
38
94
54
94
35
50
94
100
94
98
34
95
39
95
55
95
39
54
94
94
98
101
35
95
40
96
56
96
35
54
96
99
98
94
34
96
35
93
53
91
40
55
95

网站基本配色——怀旧

Filed Under (网页配色) by 有为 on 07-04-2009

任何色彩搭配淡紫色,最能诠释怀旧思古之情。能令人仿佛回到维多利亚时代,如梦似幻的时刻,优美的诗歌和浪漫的乐章。
在紫色系中,淡紫色融合了红和蓝,比起粉色较精致,也较刚硬。淡紫色尽管无声无息,与其它色彩相配后,仍可见其清丽出众,往日如歌,犹在耳际。

补色色彩组合

二次色色彩组合

单色色彩组合

37
87
38
86
22
54
86
83
88
86
86
40
83
39
87
19
51
87
87
83
85
88
86
35
86
40
88
24
55
88
81
83
86
84
86
35
88
37
85
22
50
86
88
81
86
83
88

分裂补色色彩组合

类比色彩组合

41
83
27
46
86
30
86
94
6
78
86
94
70
78
86
42
85
32
48
87
31
85
95
8
77
86
95
69
79
86
46
87
31
42
86
31
87
93
5
80
85
92
72
79
88
43
85
26
47
86
27
88
95
7
79
88
94
71
77
83

中性色彩组合

冲突色彩组合

分裂色彩组合

96
100
87
17
85
30
86
46
86
26
43
86
97
101
86
18
86
32
87
48
86
30
45
82
98
88
102
25
85
27
88
47
85
32
47
86
96
85
103
26
86
29
86
41
87
27
43
87

基本配色-终极配色手册

Filed Under (网页配色) by 有为 on 07-04-2009

颜色绝不会单独存在。事实上,一个颜色的效果是由多种因素来决定的:反射
的光,周边搭配的色彩,或是观看者的欣赏角度。

有十种基本的配色设计,分别叫做:

无色设计(achromatic)、类比设计(analogous)、冲突设计(clash)、

互补设计(complement)、单色设计(monochromatic)、中性设计(neutral)、

分裂补色设计(splitcomplement)、原色设计(primary)、

二次色设计(secondary)以及三次色三色设计(tertiary)。

105 101 98
105 101 98

无色设计

不用彩色,只用黑、
白、灰色。

92 88 73
92 88 73

类比设计

在色相环上任选三个
连续的色彩或其任一
明色和暗色。

4 68
4 68

冲突设计

把一个颜色和它补色
左边或右边的色彩配
合起来。

92 44
92 44

互补设计

使用色相环上全然相
反的颜色。

81 85 88
81 85 88

单色设计

把一个颜色和任一个
或它所有的明、暗色
配合起来。。

17 32 26
17 32 26

中性设计

加入一个颜色的补色
或黑色使它色彩消失
或中性化。

20 57 73
20 57 73

分裂补色设计

把一个颜色和它补色
任一边的颜色组合起
来。

4 36 68
4 36 68

原色设计

把纯原色红、黄、蓝
色结合起来。

53 86 20
53 86 20

二次色设计

把二次色绿、紫、橙
色结合起来。

57 28 95
57 28 95

三次色三色设计

三次色三色设计是下
面二个组合中的一个:
红橙、黄绿、蓝紫色
或是蓝绿,黄橙、红
紫色,并且在色相环
上每个颜色彼此都有
相等的距离。

色系表-终极配色手册

Filed Under (网页配色) by 有为 on 07-04-2009

面是我们将用到的12色相环中的颜色,在以后的配色中只用颜色编号来表示, 请大家对照编号来查看颜色。CMYK四色用于印刷,RGB三色用于网页制作,“#”栏中 为16进制值。
两者方法所配出的颜色会稍有差别,请以CMYK为准。而且屏幕颜色看上去要比印刷出来的亮一些,深一些,请特别注意。

1 0 100 100 45 139 0 22 8B0016
2 0 100 100 25 178 0 31 B2001F
3 0 100 100 15 197 0 35 C50023
4 0 100 100 0 223 0 41 DF0029
5 0 85 70 0 229 70 70 E54646
6 0 65 50 0 238 124 107 EE7C6B
7 0 45 30 0 245 168 154 F5A89A
8 0 20 10 0 252 218 213 FCDAD5
9 0 90 80 45 142 30 32 8E1E20
10 0 90 80 25 182 41 43 B6292B
11 0 90 80 15 200 46 49 C82E31
12 0 90 80 0 223 53 57 E33539
13 0 70 65 0 235 113 83 EB7153
14 0 55 50 0 241 147 115 F19373
15 0 40 35 0 246 178 151 F6B297
16 0 20 20 0 252 217 196 FCD9C4
17 0 60 100 45 148 83 5 945305
18 0 60 100 25 189 107 9 BD6B09
19 0 60 100 15 208 119 11 D0770B
20 0 60 100 0 236 135 14 EC870E
21 0 50 80 0 240 156 66 F09C42
22 0 40 60 0 245 177 109 F5B16D
23 0 25 40 0 250 206 156 FACE9C
24 0 15 20 0 253 226 202 FDE2CA
25 0 40 100 45 151 109 0 976D00
26 0 40 100 25 193 140 0 C18C00
27 0 40 100 15 213 155 0 D59B00
28 0 40 100 0 241 175 0 F1AF00
29 0 30 80 0 243 194 70 F3C246
30 0 25 60 0 249 204 118 F9CC76
31 0 15 40 0 252 224 166 FCE0A6
32 0 10 20 0 254 235 208 FEEBD0
33 0 0 100 45 156 153 0 9C9900
34 0 0 100 25 199 195 0 C7C300
35 0 0 100 15 220 216 0 DCD800
36 0 0 100 0 249 244 0 F9F400
37 0 0 80 0 252 245 76 FCF54C
38 0 0 60 0 254 248 134 FEF889
39 0 0 40 0 255 250 179 FFFAB3
40 0 0 25 0 255 251 209 FFFBD1
41 60 0 100 45 54 117 23 367517
42 60 0 100 25 72 150 32 489620
43 60 0 100 15 80 166 37 50A625
44 60 0 100 0 91 189 43 5BBD2B
45 50 0 80 0 131 199 93 83C75D
46 35 0 60 0 175 215 136 AFD788
47 25 0 40 0 200 226 177 C8E2B1
48 12 0 20 0 230 241 216 E6F1D8
49 100 0 90 45 0 98 65 006241
50 100 0 90 25 0 127 84 007F54
51 100 0 90 15 0 140 94 008C5E
52 100 0 90 0 0 160 107 00A06B
53 80 0 75 0 0 174 114 00AE72
54 60 0 55 0 103 191 127 67BF7F
55 45 0 35 0 152 208 185 98D0B9
56 25 0 20 0 201 228 214 C9E4D6
57 100 0 40 45 0 103 107 00676B
58 100 0 40 25 0 132 137 008489
59 100 0 40 15 0 146 152 009298
60 100 0 40 0 0 166 173 00A6AD
61 80 0 30 0 0 178 191 00B2BF
62 60 0 25 0 110 195 201 6EC3C9
63 45 0 20 0 153 209 211 99D1D3
64 25 0 10 0 202 229 232 CAE5E8
65 100 60 0 45 16 54 103 103667
66 100 60 0 25 24 71 133 184785
67 100 60 0 15 27 79 147 1B4F93
68 100 60 0 0 32 90 167 205AA7
69 85 50 0 0 66 110 180 426EB4
70 65 40 0 0 115 136 193 7388C1
71 50 25 0 0 148 170 214 94AAD6
72 30 15 0 0 191 202 230 BFCAE6
73 100 90 0 45 33 21 81 211551
74 100 90 0 25 45 30 105 2D1E69
75 100 90 0 15 50 34 117 322275
76 100 90 0 0 58 40 133 3A2885
77 85 80 0 0 81 31 144 511F90
78 75 65 0 0 99 91 162 635BA2
79 60 55 0 0 130 115 176 8273B0
80 45 40 0 0 160 149 196 A095C4
81 80 100 0 45 56 4 75 38044B
82 80 100 0 25 73 7 97 490761
83 80 100 0 15 82 9 108 52096C
84 80 100 0 0 93 12 123 5D0C7B
85 65 85 0 0 121 55 139 79378B
86 55 65 0 0 140 99 164 8C63A4
87 40 50 0 0 170 135 184 AA87B8
88 25 30 0 0 201 181 212 C9B5D4
89 40 100 0 45 100 0 75 64004B
90 40 100 0 25 120 0 98 780062
91 40 100 0 15 143 0 109 8F006D
92 40 100 0 0 162 0 124 A2007C
93 35 80 0 0 143 0 109 AF4A92
94 25 60 0 0 197 124 172 C57CAC
95 20 40 0 0 210 166 199 D2A6C7
96 10 20 0 0 232 211 227 E8D3E3
97 0 0 0 10 236 236 236 ECECEC
98 0 0 0 20 215 215 215 D7D7D7
99 0 0 0 30 194 194 194 C2C2C2
100 0 0 0 35 183 183 183 B7B7B7
101 0 0 0 45 160 160 160 A0A0A0
102 0 0 0 55 137 137 137 898989
103 0 0 0 65 112 112 112 707070
104 0 0 0 75 85 85 85 555555
105 0 0 0 85 54 54 54 363636
106 0 0 0 100 0 0 0 000000

RGB色彩对照表-终极配色手册

Filed Under (网页配色) by 有为 on 07-04-2009

RGB色彩对照表

制作主页对色彩需要有一定的感觉,许多网友总是配不好颜色,本站教你一个窍门:就是用同一色系的色彩,色彩丰富但不花。
#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