网站色彩搭配(hj.07.18)

彩色搭配网站黄俊2014.07.23色彩基本知识三原色三原色是能够按照一些数量规定合成其它任何一种颜色的基色。所有颜色都是由三原色按照不同的比例混合而来。色彩的三原色为红、黄、蓝，而色光的三原色为红、绿、蓝。色彩的分类色彩的构成元素色相指颜色的属性，是红色、绿色还是蓝色。同一张图片不同色相纯度（彩度、饱和度）

色彩的纯净程度，鲜艳程度，表示颜色中含有色部份的比例。也指在同等明度的条件下，颜色从灰色到纯色的变化。同一张图片，饱和度分别为-100、0、+100时的状态明度

指颜色明暗深浅表现，从黑到白中间增加9个均匀过渡的灰度阶段，被称为明度，也叫明度尺。黄色明度最高，蓝紫色最低，红色为中间明度。同一张图片，明度分别为-50、0、+50时的状态色调色相、明度、饱和度结合到一起,分有彩色、无彩色

纯色+白色浅色调粉彩色调纯色+灰色浊色调浅灰色调纯色+黑色深色调暗色调色相环（色环）色相环，是以三原色为基础并把它做为主要色相，再两两混合成次要色相，两种次要色相混合，衍生而成。从本质上讲，色环就是色谱可以看到的颜色所形成的线性连续环。（dian靛）光谱12色相环24色相环网页色彩搭配用一种色彩（同系色）。这里是指先选定一种色彩，然后调整透明度或者饱合度（将色彩加深或减淡），产生新的色彩。用于网页。这样的页面看起来色彩统一，有层次感。同系色色彩搭配技巧用对比色。对比色也叫补充色，可以突出重点，产生强烈的视觉效果，通过合理使用对比色能够使网站特色鲜明、重点突出。在设计时一般以一种颜色为主色调，对比色作为点缀，可以起到画龙点睛的作用。蓝色和黄色在色环中直接相对，是对比色用分离补色。分离补色可由2~3种颜色组成。在色环上选择一种颜色，它的补色就在色环的与其相对的位置。补色旁边一种或多种颜色，就是其分离补色。分离补色的搭配可起到类似补充色的强烈对比作用，但有近似色的缓冲，可以使页面效果更加柔和。分离补色使用分离补色的网站，色彩鲜明，又不过于突出用近似色（邻近色）。如果从橙色开始，它的两种近似色应该选择红和黄。如下左图所示，为近似色在色环上的位置。用近似色的颜色主题可实现色彩的融洽与融合。如下右图所示，列出几种近似色的搭配方案。近似色使用了近似色的配色方案蓝色系的搭配，给人以清凉、专业的感觉用黑色配一种色彩。黑色给人一种深沉的感觉，比较安全，可与任何颜色搭配。黑色一般用来作背景色，与其它纯度色彩搭配使用。对一些明度较高的网站，配以黑色，可以适当地降低明度。用灰色配一种色彩。灰色是万能色，可以跟任意一种色彩搭配。灰色传达了一种中庸的氛围，比较收敛，比较低调。而且使用灰色作为背景色，可以缓冲两种颜色的矛盾（如左下图）。用灰色与饱和度极低的暖色搭配，显得有一种温柔、透明的感觉。（如右下图）用一个色系。简单的来说就是一个感觉的色彩，例如淡蓝，淡黄，淡绿，或者土黄，土灰，土蓝。网页色彩搭配原理色彩的鲜明性。网页的色彩要鲜艳，容易引人注目色彩的独特性。要有与众不同的色彩，使得大家对你的印象强烈色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。色彩的联想性。不同色彩会产生不同的联想。蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和你网页的内涵相关联。色彩使用注意事项网站必须有一种或两种主题色，不至于让客户迷失方向，也不至于单调、乏味。不要将所有颜色都用到，尽量控制在三种色彩以内，通过调整色彩的各种属性来产生变化。背景和前文对比尽量要大，绝对不要用花纹繁复的图案作背景，以便突出主要文字内容。根据文化背景适当的选择颜色，如黄色在信仰基督教的国家是下等色。鲜艳的色调

所谓鲜艳的色调，即不与黑、白、灰进行混合的，只有纯色的色调。这种色调会给人以强有力的、生机勃勃的感觉。配色的选择-色调的选择大片的黄色进行搭配，给人热情洋溢的感觉。深色调

将鲜艳的色调稍微加一点黑色，便成了深色调。深色调传达了有力、强烈的男性形象。红色中混合了黑色，给人更加沉稳的感觉亮色调

将鲜艳的色调稍微加一点白色，便成了亮色调。与鲜艳色调相比，亮色调略显得温柔一点，是大多数人的喜爱。淡色调

将亮色调再加一点白色，便成了淡色调。淡淡的颜色给人清新的感觉，令人联想到婴儿的肌肤，给人以最温柔的感觉，远离商业的形象。不少个人网站采用淡色调浑浊色调

将淡色调稍微加一点灰，便成了浑浊色调，产生了明亮但不会过于鲜艳的感觉，塑造了稳定的都市形象。由于给淡色调中混合了灰色，给人以更加稳定的观感中间色调

给亮色调加一点黑，就构成了中间色调，可以给人最沉稳的成人印象。暗色调

将亮色调稍微加一点灰色，就构成了暗色调，给人的感觉不仅仅是鲜艳色调、亮色调和淡色调的那种单纯而明快的气氛，更表达了一种沉稳而安静的、素雅的气氛。

根据不同颜色在色环上的位置关系，便可进行配色的变化。通常在制作商业网站的时候，选用色彩都希望传达一种稳重、安定的印象。在这种情况下，多数采用同系色或同类色。如左下图为色环上的同类色。配色的选择-色相的选择虽然整个网站使用的都是冷色调，但由于控制住了颜色的混合及明度对比，所以并没有给人过于冷淡的感觉。色环上的同类色

当使用一种单色，然后增加或降低亮度时，产生的不同颜色就是同系色。绿色虽然象征着快乐与希望，但由于整个网站采用了同系色，因此在快乐中也传达出沉稳的印象。同系色暖色

暖色由红色调组成。比如红色、橙色和黄色。它们给选择的颜色赋予温暖、舒适和活力，也产生了一种色彩向浏览者显示或移动，并从页面中突出出来的可视化效果。暖色系这是一家沙发、座椅公司。该公司网站选择了温馨的暖色，给客户一种深切的温暖，给人一种家的感觉。这样的颜色搭配，是一种以人为本的搭配方式。冷色

冷色来自于蓝色色调。比如蓝色、青色和绿色。这些颜色将对色彩主题起到冷静的作用，因此用它们作页面的背景比较好。如果公司希望给客户一种沉稳、专业的印象，那么可选择冷色系作为网站的主要颜色。冷色系这是一家航空公司的网站。蓝色和偏向绿色的颜色搭配，传递了一种非常镇定、专业的感觉。主色主色是配色上的主角，其配色要比其他配角明显、清楚、强烈，使得浏览者一看就知道是主角，从而使视线固定下来，达到传达中心思想的作用。增大主色与配角色的差异程度，可达到突出主色的作用。色彩的4种功能角色主色较弱主色突出支配色支配色亦叫背景色。舞台的中心是主角，但决定整体印象的却是背景。背景色素雅则整体素雅。商业网站不适合用图案作为背景，因为图案背景会冲淡商业性的印象。虽然页面主要元素的色调偏灰，但由于采用了绿色作为背景色，整个页面依然给人生机勃勃的感觉。融合色

融合色即是能够融在一起的颜色。例如在画面的不同部位涂上相同的颜色，通过颜色的反复效果使同样的颜色产生共鸣，从而让画面更有立体感。中间对着左边，上边对着下边，这样把分开的部分涂上共同的颜色，像回音一样相互呼应，画面的整体就融合在了一起。融合色在画面上的距离越远，产生共鸣的效果就越强。如果页面希望呈现出较有动感的效果，要尽量使用使人印象深刻的融合色，融合色越鲜艳，越能表现出活跃的动感。上下呼应左上呼应环绕呼应强调色

如果在选用页面配色的时候，画面的整体采用了压抑的颜色，然后在一小块面积上使用强烈的颜色，就能够起到着重强调的作用，这就是强调色的作用。整体色调越压抑，强调色越有效果。强调色面积越小，颜色越鲜艳，着重的效果越强。因为面积小，所以无论使用多强烈的颜色，画面依然能保持清爽的风格，而且整体印象也不会受到影响。强调色的效果去掉强调色便失去了重点红色红色给人以热情、活力的感觉。在很多使用红色的网站中，红色都是强调色，因为红色比较鲜明，极易吸引人的眼球。如何使用色彩给网站定位鲜艳的色彩，个性鲜明、富有活力红色的色调较暗，反而给人冷静沉重的感觉，凝造出了古典的氛围橙色橙色给人以时尚、轻快的感觉，常常用于某些时尚新潮的网站中，例如时装网站、化妆品、电子制品等。在商业网站的制作中，橙色也是常用的。通过色调的变换，橙色既能表现出青春的活力，也能表现出沉稳老练的效果。橙蓝搭配，非常有视觉冲击力，灰色背景可缓和两种颜色的矛盾，使页面成熟而沉稳。不同色调的橙色作为网站的主色，搭配灰色的背景，显得既鲜丽又沉稳。黄色黄色给人明亮的感觉，也是在站点配色中使用较多的一种颜色。因为黄色能营造出愉快的氛围，能得到大部分人的认可，因此小到儿童站点，大到商业网站，黄色几乎可在每个角落中找到自己的发挥空间。黄色与咖啡色搭配，显得非常中性、非常温和。黄色与黑色、白色的搭配，给人非常明亮的感觉，却又不失宁静与沉稳。绿色绿色因为是植物的颜色，总能给人宁静、希望的感觉。绿色还可以表现出自然的感觉。浅绿、黄绿等绿色既有绿色的特点，又能表现出黄色的温暖，因此用在站点中常能得到青年人和儿童的喜爱。灰色作主色调，中间用较亮的绿色点缀，