颜色搭配常识:
1.网页中色彩的表达使用三种颜色,及红(r)、绿(g)、蓝(b),及通常所说的rgb色彩,它包含了人类所感知的所有颜色,网页中表达颜色如下(红色为例)rgb格式:红色是(255,0,0) 或十六进制hex格式为(ff0000)。
2.将色彩按"红->黄->绿->蓝->红"依次过度渐变可得到12色环:红,橙红,橙,橙黄,黄,黄绿,绿,蓝绿,蓝,蓝紫,紫,紫红。
3.颜色分非彩色和彩色两类。非彩色是指黑,白,灰系统色。彩色是指除了非彩色以外的所有色彩。通常内容文字用非彩色(黑色),边框,背景,图片用彩色。所以即使页面丰富,看内容依然不会眼花,通常背景与内容对比要大。
按单一色彩为主色彩分类
网页设计一般以单一色彩为主,下面每类都以该色彩为主,配以其它或类似色彩的,并按照从轻快到浓烈的顺序排列。
红色
-是一种激奋的色彩。刺激效果,能使人产生冲动,愤怒,热情,活力的感觉。
#ffffcc
#ccffff
#ffcccc
#99cccc
#ffcc99
#ffcccc
#ff9999
#996699
#ffcccc
#cc9999
#ffffcc
#cccc99
#ffcccc
#ffff99
#ccccff
#0099cc
#cccccc
#ff6666
#ff9966
#ff6666
#ffcccc
#cc9966
#666666
#cc9999
#ff6666
#ffff66
#99cc66
#cc3333
#cccccc
#003366
#993333
#cccc00
#663366
#cccc99
#666666
#cc9999
#ff6666
#ffff00
#0066cc
#cc0033
#333333
#cccc00
#336633
#990033
#ffcc99
#993333
#cc9966
#003300
#ff0033
#333399
#cccc00
#cc0033
#000000
#003399
#000000
#99cc00
#cc0033
#999933
#993333
#333300
橙色
也是一种激奋的色彩,具有轻快,欢欣,热烈,温馨,时尚的效果。
#ffcc99
#ffff99
#99cc99
#ffcc99
#ccff99
#cccccc
#ffcc99
#ffffcc
#99ccff
#ff9966
#ffffcc
#99cc99
#ff9900
#ffffcc
#336699
#cccc33
#ffff99
#cc9933
#996600
#ffcc33
#ffffcc
#ffffcc
#cc9933
#336666
#ff9900
#ffff00
#0099cc
#99cc33
#ff9900
#ffcc00
#ff9933
#99cc33
#cc6699
#ff9933
#ffff00
#3366cc
#ff9933
#ffffcc
#009966
#ff6600
#ffff66
#009966
#990033
#ccff66
#ff9900
#ff9966
#996600
#cccc00
#cc6600
#999999
#cccc33
#cc6600
#cccc33
#336699
#000000
#ff9933
#999966
#663300
#ff9933
#ffff66
黄色
-具有快乐,希望,智慧和轻快的个性,它的明度最高。
#ffffcc
#ccffff
#ffcccc
#ffff00
#ffffff
#cccc00
#99ccff
#ffcc33
#ffffcc
#ffff33
#99ccff
#cccccc
#ffff00
#ffffff
#9933ff
#99ccff
#ffcc33
#ffff33
#ffcc00
#66cc00
#ffff99
#ff9900
#ffff00
#0099cc
#ffcc00
#0000cc
#ffff99
#cc9999
#ffffcc
#6666cc
#999933
#ffffcc
#cc99cc
#cccc00
#666600
#ffff66
#ff9966
#ffffcc
#99cc99
#ffcc33
#ffffcc
#999966
#ffcc99
#ff6666
#ffff66
#ffcc99
#999966
#ffff00
#ffff99
#99cc99
#666600
#999966
#ffff99
#333333
#006633
#333300
#cccc99
#006633
#663300
#cccc66
黄绿色
#33cc33
#6666cc
#ffffff
#cccc33
#ffffff
#ccffcc
#ffcc99
#ccff99
#cccccc
#cccc00
#999966
#ffffcc
#cccc33
#ffffff
#336699
#cccc33
#999999
#ccffff
#00cc00
#0066cc
#99cccc
#99cc33
#ff9900
#ffcc00
#99cc33
#ccccff
#663300
#cccc33
#993399
#000000
#cc6600
#999999
#cccc33
#cc9933
#ffff99
#99cc99
#669933
#cccc33
#663300
#99cc33
#cccccc
#000000
#cc6600
#cccc33
#336699
#666600
#cccc66
#ccffcc
#333366
#99cc33
#336699
#666666
#99cc33
#003366
#003333
#99cc33
#999999
#996633
#ffff99
#99cc66
绿色
-介于冷暖两中色彩的中间,显得和睦,宁静,健康,安全的感觉。 它和金黄,淡白搭配,可以产生优雅,舒适的气氛。
#009966
#ffffff
#ffff00
#339933
#ffffff
#9933cc
#339933
#ffffff
#000000
#339933
#99cc00
#ffffcc
#ffffcc
#cccc66
#336666
#99cc33
#ffff66
#336600
#339933
#cc9900
#666666
#339966
#cccccc
#003366
#669933
#cccccc
#000000
#339933
#cccccc
#6699cc
#006633
#cccc33
#cc9933
#339933
#666633
#cccc66
#339933
#ffcc33
#336699
#006633
#669933
#99cc99
#336666
#996633
#cccc33
#003300
#669933
#cccc99
#006633
#990033
#ff9900
#006633
#333300
#cccc99
#006633
#663300
#cccc66
#993333
#cc9966
#003300
青绿色
#ccff99
#ffffff
#66cccc
#339999
#ffffff
#99ccff
#66cc99
#ffffff
#666699
#009999
#66cccc
#ccffff
#66cccc
#ccff66
#ff99cc
#339999
#ffff00
#336699
#cc9933
#339999
#ffcc33
#ffcc00
#009999
#cc3333
#669999
#cccccc
#cc99cc
#339999
#cccccc
#000000
#339999
#666699
#cccccc
#003333
#99cc99
#ffffcc
#669999
#ccffcc
#996699
#996699
#cccc99
#669999
#999966
#cccc99
#339999
#336666
#669999
#cccc99
#999999
#003366
#669999
#663333
#339999
#cccc66
#333333
#339999
#ccffcc
#336666
#3399cc
#666666
蓝色
-是最具凉爽,清新,专业的色彩。它和白色混合,能体现柔顺,淡雅,浪漫的气氛(象天空的色彩:) 白色---具有洁白,明快,纯真,清洁的感受。
#ffffcc
#ccffff
#ffcccc
#99cccc
#ffffff
#3399cc
#ccffcc
#99cccc
#ffffcc
#ccccff
#ffffff
#99ccff
#ffcc99
#ffffcc
#99ccff
#336699
#ffffff
#99cccc
#99cccc
#ffffff
#ccff99
#ccccff
#ffffcc
#ccffff
#99cccc
#ffffff
#336699
#99ccff
#ccffff
#6699cc
#99cc33
#ffffff
#3399cc
#0099cc
#ffffcc
#666699
#cccccc
#003366
#99ccff
#0099cc
#ffffff
#666666
#cccccc
#6699cc
#666666
#336699
#cccc99
#003366
#3399cc
#003366
#cccccc
#6699cc
#006699
#000000
#003366
#cccccc
#006699
#999933
#336699
#333333
蓝紫色
#ccffff
#ffffff
#ccccff
#cccccc
#ffffff
#666699
#99ccff
#ffffff
#333399
#6666cc
#ffffff
#ff9999
#9999ff
#ffcc33
#ffffcc
#0099cc
#ffffcc
#666699
#0000ff
#6699ff
#ccffff
#6666ff
#66ccff
#ccff66
#669999
#ffffcc
#6666cc
#9999cc
#ff9999
#666699
#003399
#ffcccc
#6699cc
#cc6666
#333399
#cccc00
#000066
#6666ff
#cccccc
#003399
#ccff99
#333333
#333366
#cc0033
#cccccc
#336699
#cccc66
#333300
#003399
#ffff99
#000000
#990066
#cccc33
#003399
#cc3333
#000000
#003399
#333366
#999966
#333333
紫色
#ffffcc
#ffff99
#ccccff
#9999cc
#99cc99
#ffffff
#ffcccc
#ccccff
#cccc99
#9999cc
#ffffcc
#ffcccc
#ffcccc
#ff99cc
#ccccff
#660066
#ffffff
#663333
#cccc99
#333333
#9966cc
#cccc00
#ff9966
#663399
#996699
#ffcccc
#cc99cc
#996666
#cc99cc
#ffcccc
#ffcc99
#ff9933
#663366
#333399
#ccccff
#cc99cc
#663366
#cccccc
#cc99cc
#996699
#9999cc
#ccccff
#cc9966
#999999
#663366
#330033
#666666
#669999
#cccccc
#999999
#663366
#ff33cc
#cccc99
#663366
#663366
#999999
#ccccff
#999966
#993333
#330033
紫红色
#ffcccc
#ffffff
#99cc00
#ff99cc
#ffffff
#993366
#66cc99
#ffffff
#cc6699
#cc9999
#ffcccc
#cc99cc
#ffcccc
#ffff99
#ccccff
#ffff99
#993399
#ff99cc
#66cccc
#ccff66
#ff99cc
#ff99cc
#003399
#cccc00
#ffcccc
#ff99cc
#ccccff
#ff9999
#ffcccc
#ff99cc
#669966
#cc6699
#ffccff
#cccccc
#cc99cc
#cc3399
#cc3399
#ffcc99
#ff6666
#ff3399
#cccc99
#663366
#663366
#ffffcc
#ffcccc
#663366
#cccccc
#cc99cc
#990066
#ffcc00
#cc0033
#990066
#cccccc
#006699
#999900
#990033
#000000
#990066
#000000
#009966
按印象的搭配分类
色彩搭配看似复杂,但并不神秘。既然每种色彩在印象空间中都有自己的位置,那么色彩搭配得到的印象可以用加减法来近似估算。如果每种色彩都是高亮度的,那么它们的叠加,自然会是柔和、明亮的;如果每种色彩都是浓烈的,那么它们叠加,就会是浓烈的。当然在实际设计过程中,设计师还要考虑到乘除法,比如同样亮度和对比度的色彩,在色环上的角度不同,搭配起来就会得到千变万化的感觉。因此本书除了要列举出按色相的搭配,也要将印象作为重点的搭配分类列举出来,以供读者参考。
柔和、明亮、温柔
亮度高的色彩搭配在一起就会得到柔和、明亮、温和的感觉。为了避免刺眼,设计师一般会用低亮度的前景色调和,同时色彩在色环之间的距离也有助于避免沉闷。
#ffffcc
#ccffff
#ffcccc
#ffcccc
#ffff99
#ccccff
#ff9966
#ff6666
#ffcccc
#ffcc99
#ccff99
#cccccc
#ffcccc
#ccccff
#ccffcc
#ccffff
#cccccc
#ccff99
#ffcccc
#ffffff
#99cc99
#99cccc
#ffcc99
#ffcccc
#ccccff
#ffcccc
#ccffff
#ffcc99
#ffffcc
#99cccc
柔和、洁净、爽朗
对于柔和、清洁、爽朗的印象,色环中蓝到绿相邻的颜色应该是最适合的。并且亮度偏高。可以看到,几乎每个组合都有白色参与。当然在实际设计时,可以用蓝绿相反色相的高亮度有彩色代替白色。
#ccff99
#ffffff
#99ccff
#99cccc
#ffffff
#ccff99
#ccffcc
#ffffff
#66cccc
#ccccff
#ffffff
#99cccc
#ccffcc
#99cccc
#ffffcc
#ccffff
#ffffff
#ccccff
#ccffff
#ffffff
#99ccff
#66ccff
#ffffff
#ccffff
#6699cc
#ffffff
#99ccff
#ccccff
#ffffff
#99ccff
可爱、快乐、有趣
可爱、快乐、有趣印象中的色彩搭配特点是,色相分布均匀,冷暖搭配,饱和度高,色彩分辨度高。
#66cccc
#ccff66
#ff99cc
#ff9999
#ffffff
#ffcc99
#ff6666
#ffff66
#99cc66
#666699
#ffffff
#ff9999
#99cc33
#ff9900
#ffcc00
#ff0033
#ffffff
#ff9966
#ff9900
#ccff00
#cc3399
#99cc33
#ffffff
#ff6600
#993366
#cccc33
#666633
#66cccc
#ffffff
#666699
活泼、快乐、有趣
活泼、快乐、有趣相对前一种印象,色彩选择更加广泛,?最重要的变化是将纯白色用低饱和有彩色或者灰色取代。
#cc9999
#ffff99
#666699
#ff9900
#ffff00
#0099cc
#cccc99
#cc3399
#99cc00
#ff6666
#ffff00
#3399cc
#cc6600
#999999
#cccc33
#ff9933
#ffffcc
#009933
#0099cc
#cccccc
#ff6666
#ff6600
#ffff66
#009966
#cc6633
#ffcc99
#cc6600
#cc0066
#009999
#ffcc33
运动型、轻快
运动的色彩要强化激烈、刺激的感受,同时还要体现健康、快乐、阳光。因此饱和度较高、亮度偏低的色彩在这类印象中经常登场。
#ff6666
#ffff00
#006699
#ff9966
#ffffff
#0066cc
#339933
#ffcc33
#336699
#ff9900
#ffffcc
#336699
#cc6600
#cccc44
#336699
#99cc33
#ffffff
#0099cc
#99cc33
#ff6666
#336699
#336699
#ffffff
#99cccc
#ff0033
#333399
#cccc00
#33cc99
#ffff00
#336699
轻快、华丽、动感
华丽的印象要求页面充斥有彩色,并且饱和度偏高,而亮度适当减弱则能强化这种印象。
#990066
#ffcc00
#cc0033
#ffcc33
#333399
#ff0033
#666699
#ffff00
#ff0033
#ff0033
#006699
#ffff33
#ffcc00
#009999
#cc3366
#ff0033
#cccc00
#006699
#cccc00
#ff9933
#663399
#ff9933
#ffff00
#336699
#cc3333
#ffcccc
#99cc00
#003399
#ffff00
#ff6600
狂野、充沛、动感
狂野的印象空间中少不了低亮度的色彩,甚至可以用适当的黑色搭配。其他有彩色的饱和度高,对比强烈。
#990066
#ffff00
#003399
#cc0033
#000000
#003399
#003399
#ffff00
#f00000
#cc3333
#cccccc
#003366
#cc0033
#333333
#cccc00
#000000
#99cc00
#cc0033
#ff0033
#333333
#ff9900
#990066
#000000
#009966
#666666
#ff6600
#333333
#993333
#cccc00
#663366
华丽、花哨、女性化
女性化的页面中紫色和品红是主角、粉红、绿色也是常用色相。一般它们之间要进行高饱和的搭配。
#ffff99
#993399
#ff99cc
#ff6666
#ffffff
#339999
#ff99cc
#003399
#ccff00
#66cc99
#ffffff
#cc6699
#cc3399
#ffcc99
#ff6666
#ffcccc
#ffffff
#993366
#cc6699
#ffff00
#666699
#cc6699
#99cc66
#663366
#ff33cc
#cccc99
#663366
#cc3399
#ffcc99
#ff6666
回味、女性化、优雅
优雅的感觉很奇特,色彩的饱和度一般要降下来。一般以蓝、红之间的相邻,调节亮度和饱和度进行搭配。
#cccccc
#cc99cc
#cc3399
#ffcccc
#ff99cc
#ccccff
#cc3399
#9933cc
#cc99cc
#9999cc
#ffffcc
#ffcccc
#663366
#cccccc
#cc99cc
#ff9999
#ffcccc
#ff99cc
#996666
#cc99cc
#ffcccc
#cc9999
#cccccc
#ffcccc
#ff9999
#996699
#ffcccc
#996699
#ffcccc
#cc99cc
高尚、自然、安稳
高尚一般要用低亮度的黄绿色,色彩亮度降下去,注意色彩的平衡,页面就会显得安稳。
#cccc33
#ffff99
#cc9933
#cc9966
#cccc66
#669999
#ff9966
#996600
#cccc00
#cccc66
#660033
#cc6600
#cccc00
#666600
#ccccff
#cc9933
#009999
#ffcc33
#999966
#cccc99
#339999
#99cc99
#669933
#336633
#666633
#999933
#cc9966
#660000
#cc9900
#cccc99
冷静、自然
绿色是冷静、自然印象的主角,但是绿色作为页面的主要色彩,容易陷入过于消极的感觉传达,因此应该特别重视图案的设计。
#ffff99
#99cc99
#666600
#996633
#ffff99
#99cc66
#006600
#66cc66
#ccff99
#666600
#cccc66
#ccffcc
#669933
#cccc33
#663300
#666633
#999933
#cc9966
#003300
#669933
#cccc99
#006633
#663300
#cccc66
#666600
#ffffcc
#999999
#006633
#333300
#cccc99
传统、高雅、优雅
传统的内容一般要降低色彩的饱和度,特别是棕色很适合。前面介绍紫色也是高雅和优雅印象的常用色相。
#999933
#ffffcc
#cc99cc
#cc9966
#666666
#cc9999
#cccc99
#333333
#9966cc
#cccc99
#666666
#cc9999
#996699
#cccc99
#669999
#cc9966
#999999
#666666
#339966
#cccccc
#996699
#663366
#999999
#ccccff
#996699
#9999cc
#ccccff
#cccc99
#999999
#663300
传统、稳重、古典
传统、稳重、古典都是保守的印象,色彩的选择上应该尽量用低亮度的暖色,这种搭配符合成熟的审美。
#6699cc
#663366
#cccc99
#990033
#ccff66
#ff9900
#666699
#660033
#99cc99
#663300
#ff9933
#ffff66
#990033
#006633
#cccc00
#660033
#999933
#660099
#993366
#cccc33
#666633
#996600
#cccc66
#666600
#009933
#cc9900
#666666
#666633
#cccc33
#cc3366
忠厚、稳重、有品位
亮度、饱和度偏低的色彩会给人忠厚、稳重的感觉。这样的搭配为了避免色彩过于保守,使页面僵化、消极,应当注重冷暖结合和明暗对比。
#ffffcc
#cc9933
#336666
#336666
#996633
#cccc33
#336633
#990033
#ffcc99
#333366
#669999
#996600
#993333
#cc9966
#003300
#336633
#cccc99
#333366
#663300
#999933
#333333
#663366
#666666
#333366
#999900
#990033
#cc99cc
#333366
#990033
#cccccc
简单、洁净、进步
简单、洁净的色彩在色相上可以用蓝、绿表现,并大面积留白。而进步的印象可以多用蓝色,搭配低饱和甚至灰色。
#cccccc
#ffffff
#666699
#ccff66
#ffffff
#003366
#99ccff
#ffffff
#336699
#cccc33
#ffffff
#336699
#0099ff
#ffffcc
#666699
#99cc33
#cccccc
#000000
#cccccc
#003366
#99ccff
#0099cc
#ccff66
#666666
#3399cc
#003366
#cccccc
#abcdef
#abcdef
#abcdef
简单、时尚、高雅
灰色是最为平衡的色彩,并且是塑料金属质感的主要色彩之一,因而要表达高雅、时尚,可以适当使用,甚至大面积使用。但是要注重图案和质感的构造。
#99ccff
#ffff66
#666666
#336666
#ffffff
#999999
#0099cc
#ffffff
#666666
#999999
#cccccc
#336666
#cccccc
#999999
#663366
#666666
#cccccc
#6699cc
#999999
#ffffff
#333366
#669999
#cccccc
#666666
#999999
#cccccc
#333333
#abcdef
#abcdef
#abcdef
简单、进步、时尚
表现进步的色彩主要以蓝色为主,搭配灰色。而色彩的明度统一、色相相邻,在色彩上会显得简洁。
#333366
#99cc33
#336699
#999999
#003366
#669999
#003399
#ccff99
#333333
#999933
#336699
#333333
#666666
#99cc33
#003366
#999999
#336699
#333333
#3366cc
#cccc66
#333300
#6699cc
#006699
#000000
#003366
#cccccc
#006699
#000000
#999999
#003366
√ 已复制