《精彩实例全面剖析配色基本概念》由会员分享，可在线阅读，更多相关《精彩实例全面剖析配色基本概念（13页珍藏版）》请在金锄头文库上搜索。
1、精彩实例全面剖析配色基本概念精彩实例全面剖析配色基本概念设计理论设计理论 RSSRSSurl:/Design-Theory/8366.html source:在实用美术中，常有“远看色彩近看花，先看颜色后看花，七分颜色三分花“的说法。这也就说明，在任何设计中，色彩对视觉的刺激起到第一信息传达的作用。因此，对 色彩的基础知识的良好掌控，在网页设计中才能做到游刃有余。前面我们介绍了常用的电脑色彩模式 RGB、HSB，以及色彩的三大属性，今天我们用 几个精彩实例介绍全面剖析配色基本概念配色基本概念。 色环色环是色彩按红、黄、绿、蓝、红依次过度渐变呈现出来的不同颜色，就可以得到一个色 彩环。色环通常包
2、括 12 种不同的颜色。三原色三原色 原色：原色：也叫“三原色“。即红、黄、蓝三种基本颜色。自然界中的色彩种类繁多，变化丰富，但这三种颜色却是最基本的原色，原色是其他颜色调配不出来的。除白色外，把三原色相互混合，可以调和出其他种颜色。根据三原色的特性做出相应的色彩搭配，有最迅速最有力最强烈的传达视觉信息效果。 黄色网页例图：黄色网页例图：http:/www.uni-leipzig.de/studienart/i_flash.htm黄色分析：选取了主色调黄色为示例。我们看到 RGB 数值中 RG 呈现最高值 255 时， HSB 数值中的 SB 也呈现最高值 100%，页面呈现最高纯度亮度纯黄色
3、。因此 黄色在三原色中也是亮度最高的颜色。结论：HSB 中 SB 呈现的数值越高，饱和度明度越高，页面色彩强烈艳丽，由于黄 色是亮度最高的颜色这一特性，也给人视觉产生强烈刺激的状态，对视觉刺激 是迅速的、警戒、醒目的效果，但不易于长时间观看。 红色网页例图：红色网页例图：http:/红色分析：我们看到 RGB 中 R 的数值是 227，混合了 G30、B40，因此红色的纯度轻微 降低，颜色稍偏深红。HSB 数值中 S 显示的饱和度为 87%，B 为 89%，因此颜色 还是较为饱和明亮。结论：主色 R227 数值较高的时候，由于混合了 G30、B40 少许颜色，饱和度明度 稍微降低，视觉刺激减弱
4、，红色特性显得较沉稳。但由于红色是最温暖最有视 觉冲击力的颜色特性，该网页整体看来仍然厚重而热烈的表达了主题。 蓝色网页例图：蓝色网页例图：http:/蓝色分析：RGB 数值中 B 蓝色的数值是 131 与 R2、G83 相混合，蓝色的纯度降低。结 合 HSB 中数值 H 色相目前显示的是 203，而三原色的纯蓝为 240来看，蓝色 的色相偏离较大，加上 B 为 51%的明度，颜色偏暗，因此视觉冲击力较弱。页 面沉稳、凝重。 结论：当蓝色色相偏离于三原色的纯蓝时，视觉冲击力削弱。页面呈沉稳、平静 的感受。蓝色在三原色里是视觉传递速度最慢的颜色特性，适合用于表达成熟、 稳重、安静的网页设计主题。
5、蓝色在网页设计里也是使用得较频繁的颜色。间色间色 间色：间色：又叫“二次色“。它是由三原色调配出来的颜色，是由 2 种原色调配出来的。红与黄调配出橙色；黄与蓝调配出绿色；红与蓝调配出紫色，橙、绿、紫三种颜色又叫“三间色“。在调配时，由于原色在份量多少上有所不同，所以能产生丰富的间色变化。 间色网页例图：间色网页例图：http:/cidadefm.clix.pt间色分析：上网页例图 4 种间色搭配一起非常明快、鲜亮。从 RGB 数值显示上看，绿色含量较高达到 208，混合了 R189 的黄色光，因 此颜色偏黄绿色，由于添加了 B18，饱和度相对降低。玫瑰色中 R 的含量最高， 与 B109 混合
6、为主要组成色，添加了少量的 G27 黄，纯度偏高。橙色中 R 的含量 很高为 255，混合了 G145 黄为主要组成色，添加了第三色 B34，饱和度稍降低。 紫色是由蓝色和红色调配而成，B 为 170，R 为 148，混色份量相当也就成为了 组合紫色这一间色的主要成份，但是由于添加了 G87，也是 4 组颜色中的间色 混合第三色数值最高的，HSB 中 S 数值相对其他三色，降低很多，因此颜色相 对于其它 3 种较沉稳，缓和。以上 4 组颜色 RGB 数值的共同点是以两色混合为主，都是三位数值，另外 一色份量较少，为两为数值，因此饱和度较高，色相倾向明显。HSB 数值的共 同点是，除了紫色，其他
7、三色的 S 饱和度相当，属较高数值，因此视觉刺激也 强。 结论：间色是由三原色中的两原色调配而成的，因此在视觉刺激的强度相对三原 色来说缓和不少。属于较易搭配之色。间色尽管是二次色，但仍有很强的视觉冲击力，容易带来轻松、明快、愉 悦的气氛。复色复色 复色：复色：也叫“复合色“。复色是由原色与间色相调或由间色与间色相调而成的“三次色“，复色是的纯度最低，含灰色成份。复色包括了除原色和间色以外的所有颜色。 复色网页例图：复色网页例图：http:/复色分析：以上 4 种颜色中深绿色和赭石色为复色，之所以还选择其它 2 颜色，为的是更好的配合说明复色的特性，如果没有另外两种非复色搭配，页面配色就可 能
8、出现肮等不舒服的感觉。我们看到深绿及赭石这两种复色的数值都以一个份量最多的三位数，另外 两者成份相当，都为两位数组合而得。RGB 之间的数值差距较接近、不明显， 色阶较趋于直线平稳，呈灰阶。HSB 中 SB 显示的数值也非常接近，成为符合复 色特性的必须条件。 结论：复色是由两种间色或原色与间色混合而成，因此色相倾向较微妙、不明显， 视觉刺激度缓和，如果搭配不当，页面便呈现易脏或易灰朦朦的效果，沉闷、 压抑之感，属于不好搭配之色。但有时复色加深色搭配能很好的表达神秘感、 纵深感空间感；明度高的多复色（参看明度的网页例图）多用来表示宁静柔和、 细腻的情感，易于长时间的浏览。补色补色 补色：补色：
9、是广义上的对比色。在色环上划直径，正好相对（即距离最远）的两种色彩互为补色。如：红色是绿色的补色；橙色是蓝色的补色；黄色是紫色的补色。补色的运用可以造成最强烈的对比。 补色网页例图：补色网页例图：http:/www.upsod.org补色分析：选用了一组红绿对比色，极赋视觉冲击力、所表现出的性格异常鲜明。我们看到 RGB 中绿色的数值显示情况符合复色的条件，因此注定了该颜色 明度稍暗、纯度较低的特性，而红色 R 数值 118 构成了该色的主要成份，其他 G72，B61 数值接近，纯度和亮度相对绿色较高，因此 2 色在构成色彩空间差距 上拉大。HSB 中 2 色的 S 数值也显示出，它们的饱和度
10、相差较大。结论：补色最能传达强烈、个性的情感。纯度稍低的绿色为背景的大面积使用， 对比并突出了前景纯度明度较高的面积较小红色的图形，形成了视觉中心重点 突出，达到主次分明的主题效果。红绿、橙蓝、黄紫这三组补色中，前两种使用得最频繁。这三组补色搭配 出的最终效果和目的，可以用两个字来概括强烈！ 邻近色：邻近色：是在色环上任一颜色同其毗邻之色。邻近色也是类似色关系，只是范围缩小了一点。例如红色和黄色，绿邻近色邻近色 色和蓝色，互为邻近色。 邻近色网页例图：邻近色网页例图：http:/邻近色分析：邻近色分析：上图选用了红色、黄色为邻近色示例，主要在色相上做区别丰富了页面色彩上的变化。上图选用了红色、
11、黄色为邻近色示例，主要在色相上做区别丰富了页面色彩上的变化。RGBRGB 数值上看，以上数值上看，以上 5 5 色色 R R 的数值都很高，仅是微妙的不同。其中浅黄色的的数值都很高，仅是微妙的不同。其中浅黄色的 B B 为为 138138，因此在，因此在HSBHSB 数值中纯度数值中纯度 S S 显示最低，为显示最低，为 46%46%；5 5 色色 RGBRGB 中中 G G 的数值都不同，色相、明度也产生相应的不的数值都不同，色相、明度也产生相应的不同。从数值上分析整体看来，同。从数值上分析整体看来，5 5 色都有在同一频率的变化。色都有在同一频率的变化。结论：结论：由于是相邻色系，视觉反差
12、不大，统一、调和，形成协调的视觉韵律美，相较显得安定、稳重由于是相邻色系，视觉反差不大，统一、调和，形成协调的视觉韵律美，相较显得安定、稳重的同时不失活力，是一种恰到好处的配色类型。的同时不失活力，是一种恰到好处的配色类型。 同类色：同类色：比邻近色更加接近的颜色，它主要指在同一色相中不同的颜色变化。例如，红颜色中有紫红、深红、玫瑰同类色同类色 红、大红、朱红、桔红等等种类，黄颜色中又有深黄、土黄、中黄、桔黄、淡黄、柠檬黄等等区别。它起到色彩调和统一，又有微妙变化的作用。 同类色网页例图：同类色网页例图：http:/同类色分析：同类色分析：选用红色系选用红色系 4 4 种同类色示例，主要在明度
13、上做区别变化。种同类色示例，主要在明度上做区别变化。由于是红色系，由于是红色系，4 4 色色 RGBRGB 数值中的数值中的 R R，数值都很高，且相当。从，数值都很高，且相当。从 HSBHSB 数值看出，明度越高的颜色饱数值看出，明度越高的颜色饱和度越低。和度越低。这这 4 4 种同类色相来看，明度在强中弱的节奏中的缓和的进行变化。种同类色相来看，明度在强中弱的节奏中的缓和的进行变化。结论：结论：第一眼看上去给人温柔、雅致、安宁的心理感受，便可知该组同类色系非常调和统一。只运用第一眼看上去给人温柔、雅致、安宁的心理感受，便可知该组同类色系非常调和统一。只运用同类色系配色，是十分谨慎稳妥的做法
14、，但是有时会有单调感。添加少许相邻或对比色系，可以体同类色系配色，是十分谨慎稳妥的做法，但是有时会有单调感。添加少许相邻或对比色系，可以体现出页面的活跃感和强度。现出页面的活跃感和强度。暖色暖色 暖色：暖色：指的是红、橙、黄、这类颜色。暖色系的饱和度越高，其温暖特性越明显。可以刺激人的兴奋性，使体温有所升高。 暖色网页例图：暖色网页例图：http:/www.mrwong.de暖色分析：暖色分析：由于是暖色系，以上由于是暖色系，以上 3 3 种颜色种颜色 RGBRGB 数值中数值中 R R 的含量为主导，的含量为主导，B B 都为都为 0 0，暖度强度倾向在，暖度强度倾向在 G G 的添的添加黄
15、色成份变化中可以看到，较规律的数值变化、较有视觉节奏感。加黄色成份变化中可以看到，较规律的数值变化、较有视觉节奏感。HSBHSB 中纯度中纯度 S S 和明度和明度 B B 都达到都达到最高值，是鲜艳夺目的搭配色组合。最高值，是鲜艳夺目的搭配色组合。结论：结论：高明度高纯度的色彩搭配，把页面表达得鲜艳炫目，有非常强烈刺激的视觉表现力。高明度高纯度的色彩搭配，把页面表达得鲜艳炫目，有非常强烈刺激的视觉表现力。充分体现了暖色系的饱和度越高，其温暖特性越明显的性格。充分体现了暖色系的饱和度越高，其温暖特性越明显的性格。冷色冷色 冷色：冷色：指的是绿、青、蓝、紫等颜色，冷色系亮度越高，其特性越明显。能
16、够使人的心情平静，清爽，恬雅。 冷色网页例图：冷色网页例图：http:/www.portaldemoda.pt冷色分析：冷色分析：该网页示例主要选用了邻近色系蓝色绿色和同类色的明度变化。其中该网页示例主要选用了邻近色系蓝色绿色和同类色的明度变化。其中 3 3 种蓝色系的种蓝色系的 RGBRGB 数值从数值从二位数到三位数，随着明度的递增的同时，由低到高在有规律有节奏的变化。二位数到三位数，随着明度的递增的同时，由低到高在有规律有节奏的变化。HSBHSB 的数值的数值 SBSB 也相对也相对随着同比变化，纯度随着同比变化，纯度 S S 的含量都不大，因此这几组色彩相对含蓄柔和。的含量都不大，因此这几组色彩相对含蓄柔和。绿色系绿色系 RGBRGB 数
