搜集了一些网页配色的相关内容,整理如下。
一、基础知识
1.红,黄,蓝是三原色
其它的色彩都可以用这三种色彩调和而成。
网页html语言中的色彩表达即是用这三种颜色的数值表示
例如:红色是color(255,0,0)十六进制的表示方法为(FF0000)
2.非彩色搭配-黑白灰
黑白是最基本和最简单的搭配,白字黑底,黑底白字都非常清晰明了。灰色是万能色,可以和任何彩色搭配,也可以帮助两种对立的色彩和谐过渡。如果你实在找不出合适的色彩,那么用灰色试试,效果绝对不会太差。
3.彩色搭配
彩色的搭配是学习的重点。
●色环
我们将色彩按"红->黄->绿->蓝->红"依次过度渐变,就可以得到一个色彩环。
色环的两端是暖色和寒色,当中是中型色。(如下图)
●色彩的心理感觉。
不同的颜色会给浏览者不同的心理感受。
红色---是一种激奋的色彩。刺激效果,能使人产生冲动,愤怒,热情,活力的感觉。
绿色---介于冷暖两中色彩的中间,显得和睦,宁静,健康,安全的感觉。
它和金黄,淡白搭配,可以产生优雅,舒适的气氛。
橙色---也是一种激奋的色彩,具有轻快,欢欣,热烈,温馨,时尚的效果。
黄色---具有快乐,希望,智慧和轻快的个性,它的明度最高。
蓝色---是最具凉爽,清新,专业的色彩。
它和白色混合,能体现柔顺,淡雅,浪漫的气氛(象天空的色彩:)
白色---具有洁白,明快,纯真,清洁的感受。
黑色---具有深沉,神秘,寂静,悲哀,压抑的感受。
灰色---具有中庸,平凡,温和,谦让,中立和高雅的感觉。
每种色彩在饱和度,透明度上略微变化就会产生不同的感觉。以绿色为例,黄绿色有青春,旺盛的视觉意境,而蓝绿色则显得幽宁,阴深。
●网页色彩搭配的技巧
(1)用一种色彩。这里是指先选定一种色彩,然后调整透明度或者饱和度,(说得通俗些就是将色彩变淡或则加深),产生新的色彩,用于网页。这样的页面看起来色彩统一,有层次感。
(2)用两种色彩。先选定一种色彩,然后选择它的对比色(在photoshop里按ctrl+shift+I)。
(3)用一个色系。简单的说就是用一个感觉的色彩,例如淡蓝,淡黄,淡绿;或者土黄,土灰,土蓝。确定色彩的方法各人不同,我是在photoshop里按前景色方框,在跳出的拾色器窗中选择"自定义",然后在"色库"中选就可以了:)
(4)用黑色和一种彩色。比如大红的字体配黑色的边框感觉很"跳"。
(5)不要将所有颜色都用到,尽量控制在三种色彩以内。
(6)背景和前文的对比尽量要大,(绝对不要用花纹繁复的图案作背景),以便突出主要文字内容。
二、一些常用的色系
红
顏色名稱 | 代碼 | 顏色 |
---|---|---|
maroon | #800000 | |
darkred | #8B0000 | |
brown | #A52A2A | |
firebrick | #B22222 | |
crimson | #DC143C | |
red | #FF0000 |
桃红~粉红
顏色名稱 | 代碼 | 顏色 |
---|---|---|
mediumvioletred | #C71585 | |
palevioletred | #D87093 | |
deeppink | #FF1493 | |
fuchsia(magenta) | #FF00FF | |
hotpink | #FF69B4 | |
pink | #FFC0CB | |
lightpink | #FFB6C1 | |
mistyrose | #FFE4E1 | |
lavenderblush | #FFF0F5 |
顏色名稱 | 代碼 | 顏色 |
---|---|---|
indigo | #4B0082 | |
purple | #800080 | |
darkmagenta | #8B008B | |
darkorchid | #9932CC | |
blueviolet | #8A2BE2 | |
darkviolet | #9400D3 | |
slateblue | #6A5ACD | |
mediumpurple | #9370DB | |
mediumslateblue | #7B68EE | |
mediumorchid | #BA55D3 | |
violet | #EE82EE | |
plum | #DDA0DD | |
thistle | #D8BFD8 | |
lavender | #E6E6FA |
顏色名稱 | 代碼 | 顏色 |
---|---|---|
saddlebrown | #8B4513 | |
sienna | #A0522D | |
chocolate | #D2691E | |
indianred | #CD5C5C | |
rosybrown | #BC8F8F | |
lightcorol | #F08080 | |
salmon | #FA8072 | |
lightsalmon | #FFA07A | |
orangered | #FF4500 | |
tomato | #FF6347 | |
coral | #FF7F50 | |
darkorange | #FF8C00 | |
sandybrown | #F4A460 | |
peru | #CD853F | |
tan | #D2B48C | |
burlywood | #DEB887 | |
wheat | #F5DEB3 | |
moccasin | #FFE4B5 | |
navajowhite | #FFDEAD | |
peachpuff | #FFDAB9 | |
bisque | #FFE4C4 | |
antuquewhite | #FAEBD7 | |
papayawhip | #FFEFD5 | |
cornsilk | #FFF8DC | |
oldlace | #FDF5E6 | |
linen | #FAF0E6 | |
seashell | #FFF5EE | |
snow | #FFFAFA | |
floralwhite | #FFFAF0 | |
ivory | #FFFFF0 | |
mintcream | #F5FFFA |
顏色名稱 | 代碼 | 顏色 |
---|---|---|
darkgoldenrod | #B8860B | |
goldenrod | #DAA520 | |
gold | #FFD700 | |
yellow | #FFFF00 | |
darkkhaki | #BDB76B | |
khaki | #F0E68C | |
palegoldenrod | #EEE8AA | |
beige | #F5F5DC | |
lemonchiffon | #FFFACD | |
lightgoldenrodyellow | #FAFAD2 | |
lightyellow | #FFFFE0 |
黃~绿
顏色名稱 | 代碼 | 顏色 |
---|---|---|
darkslategray | #2F4F4F | |
darkolivegreen | #556B2F | |
olive | #808000 | |
darkgreen | #006400 | |
forestgreen | #228B22 | |
seagreen | #2E8B57 | |
green(teal) | #008080 | |
lightseagreen | #20B2AA | |
madiumaquamarine | #66CDAA | |
mediumseagreen | #3CB371 | |
darkseagreen | #8FBC8F | |
yellowgreen | #9ACD32 | |
limegreen | #32CD32 | |
lime | #00FF00 | |
chartreuse | #7FFF00 | |
lawngreen | #7CFC00 | |
greenyellow | #ADFF2F | |
mediumspringgreen | #00FA9A | |
springgreen | #00FF7F | |
lightgreen | #90EE90 | |
palegreen | #98F898 | |
aquamarine | #7FFFD4 | |
honeydew | #F0FFF0 |
蓝
顏色名稱 | 代碼 | 顏色 |
---|---|---|
midnightblue | #191970 | |
navy | #000080 | |
darkblue | #00008B | |
darkslateblue | #483D8B | |
mediumblue | #0000CD | |
royalblue | #4169E1 | |
dodgerblue | #1E90FF | |
cornflowerblue | #6495ED | |
deepskyblue | #00BFFF | |
lightskyblue | #87CEFA | |
lightsteelblue | #B0C4DE | |
lightblue | #ADD8E6 | |
steelblue | #4682B4 | |
darkcyan | #008B8B | |
cadetblue | #5F9EA0 | |
darkturquoise | #00CED1 | |
mediumturquoise | #48D1CC | |
turquoise | #40E0D0 | |
skyblue | #87CECB | |
powderblue | #B0E0E6 | |
paleturquoise | #AFEEEE | |
lightcyan | #E0FFFF | |
azure | #F0FFFF | |
aliceblue | #F0F8FF | |
aqua(cyan) | #00FFFF |
黑~灰~白
顏色名稱 | 代碼 | 顏色 |
---|---|---|
black | #000000 | |
dimgray | #696969 | |
gray | #808080 | |
slategray | #708090 | |
lightslategray | #778899 | |
darkgray | #A9A9A9 | |
silver | #C0C0C0 | |
lightgray | #D3D3D3 | |
gainsboro | #DCDCDC | |
whitesmoke | #F5F5F5 | |
ghostwhite | #F8F8FF | |
white | #FFFFFF |