当前位置：kb88凯时官网登录-d88尊龙官网手机app > 在线工具 > 网页颜色搭配表及颜色搭配技巧

网页设计常用色彩 -kb88凯时官网登录

颜色搭配常识：
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

#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

#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

#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

#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

#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

#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

#003399

#cccc00

#ffcccc

#ff99cc

#ccccff

#ff9999

#ffcccc

#ff99cc

#669966

#cc6699

#ffccff

#cccccc

#cc99cc

#cc3399

#ffcc99

#ff6666

#ff3399

#cccc99

#663366

#ffffcc

#ffcccc

#663366

#cccccc

#cc99cc

#990066

#ffcc00

#cc0033

#990066

#cccccc

#006699

#999900

#990033

#000000

#990066

#000000

#009966

按印象的搭配分类

色彩搭配看似复杂，但并不神秘。既然每种色彩在印象空间中都有自己的位置，那么色彩搭配得到的印象可以用加减法来近似估算。如果每种色彩都是高亮度的，那么它们的叠加，自然会是柔和、明亮的；如果每种色彩都是浓烈的，那么它们叠加，就会是浓烈的。当然在实际设计过程中，设计师还要考虑到乘除法，比如同样亮度和对比度的色彩，在色环上的角度不同，搭配起来就会得到千变万化的感觉。因此本书除了要列举出按色相的搭配，也要将印象作为重点的搭配分类列举出来，以供读者参考。

柔和、明亮、温柔

亮度高的色彩搭配在一起就会得到柔和、明亮、温和的感觉。为了避免刺眼，设计师一般会用低亮度的前景色调和，同时色彩在色环之间的距离也有助于避免沉闷。

#ffffcc

#ccffff

#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

#ffffff

#99cccc

#ff0033

#333399

#cccc00

#33cc99

#ffff00

#336699

轻快、华丽、动感

华丽的印象要求页面充斥有彩色，并且饱和度偏高，而亮度适当减弱则能强化这种印象。

#990066

#ffcc00

#cc0033

#ffcc33

#333399

#ff0033

#666699

#ffff00

#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

#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

#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

简单、时尚、高雅

灰色是最为平衡的色彩，并且是塑料金属质感的主要色彩之一，因而要表达高雅、时尚，可以适当使用，甚至大面积使用。但是要注重图案和质感的构造。

#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

简单、进步、时尚

表现进步的色彩主要以蓝色为主，搭配灰色。而色彩的明度统一、色相相邻，在色彩上会显得简洁。

#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