在实用美术中，常有"远看色彩近看花，先看颜色后看花，七分颜色三分花"的说法

HSB
　　是颜色分为色相、饱和度、明度三个因素。英文为H(Hue)、S（Saturation）B（Brightness)饱和度高色彩较艳丽。饱和度低色彩就接近灰色。亮度高色彩明亮，亮度低色彩暗淡，亮度最高得到纯白，最低得到纯黑。一般浅色的饱和度较低，亮度较高，而深色的饱和度高而亮度低。
RGB

　　RGB是表示红色绿色蓝色又称为三原色光，英文为R(Red)、G(Green)、B(Blue)，在电脑中，RGB的所谓"多少"就是指亮度，并使用整数来表示。

纯白色数值为R255,G255,B255
纯黑色数值为R0,G0,B0
红色数值为R255,G0,B0
绿色数值为R0,G255,B0
蓝色数值为R0,G0,B255
蓝色数值为R255,G255,B0

色彩的三个属性。

　　颜色可以分为非彩色和彩色两大类。非彩色指黑色、白色和各种深浅不一的灰色，而其他所有颜色均属于彩色。从心理学和视觉的角度出发，彩色具有三个属性：色相、明度、纯度（彩度）。
■ 色相（Hue）：
　　也叫色调，指颜色的种类和名称，是指颜色的基本特征，是一种颜色区别于其他颜色的因素。色相和色彩的强弱及明暗没有关系，只是纯粹表示色彩相貌的差异。如红、黄、绿、蓝、紫等为不同的基本色相。
■ 明度（Value）：
　　也叫亮度，指颜色的深浅、明暗程度，没有色相和饱和度的区别。不同的颜色，反射的光量强弱不一，因而会产生不同程度的明暗。非色彩的黒、灰、白较能形象的表达这一特质。
RGB同时呈现相近的高数值时，相近等量的色彩相互混合，页面呈高明度灰色段，协调的柔和状态，令人遐想，对视觉刺激是缓慢的，适合长时间观看。但由于数值接近，因此色阶平稳，同时存在着不够醒目的状态。

■ 纯度(Chroma）：
　　也叫饱和度，指色彩的鲜艳程度。原色最纯，颜色的混合越多则纯度逐渐减低。如某一鲜亮的颜色，加入了白色或者黑色，使得它的纯度低，颜色趋于柔和、沉稳。

HSB模式中S和B呈现的数值越高，饱和度明度越高，页面色彩强烈艳丽，对视觉刺激是迅速的，醒目的效果，但不易于长时间的观看。以上两种颜色的S数值接近，是强烈的状态。H显示的度是代表在色轮表里某个角度所呈现的色相状态，相对于SB来说，意义不大。

策划正确的配色方案时必须要有一个判断标准。

　　网页设计师策划一个网站需要经过反复多次的思考，而在决定网页配色方案时同样需要经过再三的思量。为了得到更好的策划意见，组织者既应该与合作人员反复进行集体讨论，还应该找一些风格类似的成功站点进行技术分析，一个大型站点是由几层甚至数十层的链接和上百上千种不同风格的网页所构成，所以在需要的时候应该绘制一个合理的层级图。

　　如果在一个站点配色方案的策划中只凭设计师的感觉来决定最终的配色方案，则成功的机会就会很少，而且即使成功一次，也保证不了下一次同样能够成功。何况一个设计师好的建议在没有任何根据的情况下也不能说服团队中的其他合作成员。萝卜白菜各有所好，如果团队中的每一个成员都执意主张自己的观点，那么这个团队就会一事无成。

　　当然，感觉是设计师的灵魂，没有感觉的设计师就如同一个没有灵魂的躯壳。但光凭感觉也不能够得到好的结果，如果说好的设计等于感觉加一个未知数，那么这个未知数应该就是可以说服其他人的科学合理的理论体系。

■ 暖色：
　　指的是红、橙、黄、这类颜色。暖色系的饱和度越高，其温暖特性越明显。可以刺激人的兴奋性，使体温有所升高。
暖色分析：
　　由于是暖色系，以上3种颜色RGB数值中R的含量为主导，B都为0，暖度强度倾向在G的添加黄色成份变化中可以看到，较规律的数值变化、较有视觉节奏感。HSB中纯度S和明度B都达到最高值，是鲜艳夺目的搭配色组合。

■ 冷色：
　　指的是绿、青、蓝、紫等颜色，冷色系亮度越高，其特性越明显。能够使人的心情平静，清爽，恬雅。
冷色分析：
　　该网页示例主要选用了邻近色系蓝色绿色和同类色的明度变化。其中3种蓝色系的RGB数值从二位数到三位数，随着明度的递增的同时，由低到高在有规律有节奏的变化。HSB的数值SB也相对随着同比变化，纯度S的含量都不大，因此这几组色彩相对含蓄柔和。
　　绿色系RGB数值G的色相明显，相应添加了高亮度的黄色R，使色彩较鲜艳明快。HSB数值SB也显示出其高纯度高亮度的特性。
　　结论：
　　冷色系的亮度越高，其特性越明显。单纯冷色系搭配视觉感比暖色系舒适，不易造成视觉疲劳。蓝色、绿色是冷色系的主要系，是设计中较常用的颜色，也是大自然之色，带来一股清新、祥和安宁的空气。
■ 同类色：
　　比邻近色更加接近的颜色，它主要指在同一色相中不同的颜色变化。例如，红颜色中有紫红、深红、玫瑰红、大红、朱红、桔红等等种类，黄颜色中又有深黄、土黄、中黄、桔黄、淡黄、柠檬黄等等区别。它起到色彩调和统一，又有微妙变化的作用。
同类色分析：
　　选用红色系4种同类色示例，主要在明度上做区别变化。
由于是红色系，4色RGB数值中的R，数值都很高，且相当。从HSB数值看出，明度越高的颜色饱和度越低。
　　这4种同类色相来看，明度在强中弱的节奏中的缓和的进行变化。
结论：
　　第一眼看上去给人温柔、雅致、安宁的心理感受，便可知该组同类色系非常调和统一。只运用同类色系配色，是十分谨慎稳妥的做法，但是有时会有单调感。添加少许相邻或对比色系，可以体现出页面的活跃感和强度。

■ 邻近色：
　　是在色环上任一颜色同其毗邻之色。邻近色也是类似色关系，只是范围缩小了一点。例如红色和黄色，绿色和蓝色，互为邻近色。
邻近色分析：
　　上图选用了红色、黄色为邻近色示例，主要在色相上做区别丰富了页面色彩上的变化。
　　RGB数值上看，以上5色R的数值都很高，仅是微妙的不同。其中浅黄色的B为138，因此在HSB数值中纯度S显示最低，为46%；5色RGB中G的数值都不同，色相、明度也产生相应的不同。从数值上分析整体看来，5色都有在同一频率的变化。
结论：
　　由于是相邻色系，视觉反差不大，统一、调和，形成协调的视觉韵律美，相较显得安定、稳重的同时不失活力，是一种恰到好处的配色类型。

■ 间色：
　　又叫"二次色"。它是由三原色调配出来的颜色，是由2种原色调配出来的。红与黄调配出橙色；黄与蓝调配出绿色；红与蓝调配出紫色，橙、绿、紫三种颜色又叫"三间色"。在调配时，由于原色在份量多少上有所不同，所以能产生丰富的间色变化。
间色分析：
　　上网页例图4种间色搭配一起非常明快、鲜亮。
　　从RGB数值显示上看，绿色含量较高达到208，混合了R189的黄色光，因此颜色偏黄绿色，由于添加了B18，饱和度相对降低。玫瑰色中R的含量最高，与B109混合为主要组成色，添加了少量的G27黄，纯度偏高。橙色中R的含量很高为255，混合了G145黄为主要组成色，添加了第三色B34，饱和度稍降低。紫色是由蓝色和红色调配而成，B为170，R为148，混色份量相当也就成为了组合紫色这一间色的主要成份，但是由于添加了G87，也是4组颜色中的间色混合第三色数值最高的，HSB中S数值相对其他三色，降低很多，因此颜色相对于其它3种较沉稳，缓和。
　　以上4组颜色RGB数值的共同点是以两色混合为主，都是三位数值，另外一色份量较少，为两为数值，因此饱和度较高，色相倾向明显。HSB数值的共同点是，除了紫色，其他三色的S饱和度相当，属较高数值，因此视觉刺激也强。
结论：
　　间色是由三原色中的两原色调配而成的，因此在视觉刺激的强度相对三原色来说缓和不少。属于较易搭配之色。
　　间色尽管是二次色，但仍有很强的视觉冲击力，容易带来轻松、明快、愉悦的气氛。

■ 复色：
　　也叫"复合色"。复色是由原色与间色相调或由间色与间色相调而成的"三次色"，复色是的纯度最低，含灰色成份。复色包括了除原色和间色以外的所有颜色。
复色分析：
　　以上4种颜色中深绿色和赭石色为复色，之所以还选择其它2颜色，为的是更好的配合说明复色的特性，如果没有另外两种非复色搭配，页面配色就可能出现肮等不舒服的感觉。
　　我们看到深绿及赭石这两种复色的数值都以一个份量最多的三位数，另外两者成份相当，都为两位数组合而得。RGB之间的数值差距较接近、不明显，色阶较趋于直线平稳，呈灰阶。HSB中SB显示的数值也非常接近，成为符合复色特性的必须条件。
结论：
　　复色是由两种间色或原色与间色混合而成，因此色相倾向较微妙、不明显，视觉刺激度缓和，如果搭配不当，页面便呈现易脏或易灰朦朦的效果，沉闷、压抑之感，属于不好搭配之色。但有时复色加深色搭配能很好的表达神秘感、纵深感空间感；明度高的多复色（参看明度的网页例图）多用来表示宁静柔和、细腻的情感，易于长时间的浏览。

■ 补色：
　　是广义上的对比色。在色环上划直径，正好相对（即距离最远）的两种色彩互为补色。如：红色是绿色的补色；橙色是蓝色的补色；黄色是紫色的补色。
　　补色的运用可以造成最强烈的对比。
补色分析：
　　选用了一组红绿对比色，极赋视觉冲击力、所表现出的性格异常鲜明。
　　我们看到RGB中绿色的数值显示情况符合复色的条件，因此注定了该颜色明度稍暗、纯度较低的特性，而红色R数值118构成了该色的主要成份，其他G72，B61数值接近，纯度和亮度相对绿色较高，因此2色在构成色彩空间差距上拉大。HSB中2色的S数值也显示出，它们的饱和度相差较大。
　　结论：
　　补色最能传达强烈、个性的情感。纯度稍低的绿色为背景的大面积使用，对比并突出了前景纯度明度较高的面积较小红色的图形，形成了视觉中心重点突出，达到主次分明的主题效果。
　　红绿、橙蓝、黄紫这三组补色中，前两种使用得最频繁。这三组补色搭配出的最终效果和目的，可以用两个字来概括——强烈！

色环是色彩按红、黄、绿、蓝、红依次过度渐变呈现出来的不同颜色，就可以得到一个色彩环。色环通常包括12种不同的颜色。
■ 原色：
　　也叫"三原色"。即红、黄、蓝三种基本颜色。自然界中的色彩种类繁多，变化丰富，但这三种颜色却是最基本的原色，原色是其他颜色调配不出来的。除白色外，把三原色相互混合，可以调和出其他种颜色。
　　根据三原色的特性做出相应的色彩搭配，有最迅速最有力最强烈的传达视觉信息效果。
黄色分析：
　　选取了主色调黄色为示例。我们看到RGB数值中RG呈现最高值255时，HSB数值中的SB也呈现最高值100%，页面呈现最高纯度亮度——纯黄色。因此黄色在三原色中也是亮度最高的颜色。
　　结论：
　　HSB中SB呈现的数值越高，饱和度明度越高，页面色彩强烈艳丽，由于黄色是亮度最高的颜色这一特性，也给人视觉产生强烈刺激的状态，对视觉刺激是迅速的、警戒、醒目的效果，但不易于长时间观看。

红色分析：
　　我们看到RGB中R的数值是227，混合了G30、B40，因此红色的纯度轻微降低，颜色稍偏深红。HSB数值中S显示的饱和度为87%，B为89%，因此颜色还是较为饱和明亮。
　　结论：
　　主色R227数值较高的时候，由于混合了G30、B40少许颜色，饱和度明度稍微降低，视觉刺激减弱，红色特性显得较沉稳。但由于红色是最温暖最有视觉冲击力的颜色特性，该网页整体看来仍然厚重而热烈的表达了主题。

蓝色分析：
　　RGB数值中B蓝色的数值是131与 R2、G83相混合，蓝色的纯度降低。结合HSB中数值H色相目前显示的是203°，而三原色的纯蓝为240°来看，蓝色的色相偏离较大，加上B为51%的明度，颜色偏暗，因此视觉冲击力较弱。页面沉稳、凝重。
结论：
　　当蓝色色相偏离于三原色的纯蓝时，视觉冲击力削弱。页面呈沉稳、平静的感受。蓝色在三原色里是视觉传递速度最慢的颜色特性，适合用于表达成熟、稳重、安静的网页设计主题。蓝色在网页设计里也是使用得较频繁的颜色。

● 从以上例子可看出三原色视觉冲击力最强，也最是刺目的，容易制造冲突、烦燥、不舒适的心情，所以是较难掌握的配色，大面积大范围使用要慎重。间色是由三原色中的两色调配二次，间于原色和复色之间，属于中性色，视觉冲击力次之，颜色的刺激缓和不少，给人舒适、愉悦的心情，是较容易掌握的配色，也是在设计中使用得比较多的颜色。复色是由两种间色或原色与间色相混合而产生的颜色，呈灰色阶，视觉冲击力更弱，柔和但是使人沉闷压抑。复色调配好了，能体现出高层次高素养的成熟特性魅力，也称为高级灰，是很经看的颜色。
　　由上可知，颜色相互混合的越多，饱和度越低，视觉冲击力越弱。

　　● 色彩运用到一定程度后，应该逐渐认识到在一个环境、区域范围里，色彩的属性、性能特性是相对的。例如黄色在蓝色、绿色这两个区域环境下，黄色可以说这个时候是呈暖色，而出现在桔红、朱红、深红这几个区域环境下，黄色可以说在这个时候是呈冷色。同样的，蓝色相对绿色是冷色，紫色相对蓝色是暖色等等。可根据网页设计主题的目的要求，环境协调度的需要等等做相应的搭配调整。

　　● RGB三者的数值越接近，色阶较趋于直线平稳，呈灰阶，网页对视觉的刺激性越缓慢、柔和；RGB三者的数值相互间差距越大，色阶曲线波动就大，网页对视觉的刺激性越迅速、强烈。HSB数值中SB相应数值越高，视觉刺激度越强烈。抓住以上这些规律及色彩特性，在以后的网页设计配色中，根据不同的需要配置不同的颜色，来达到某些不同的目的和效果。
　　通过RGB数值和HSB数值的计算，能帮助更科学理性的分析判断，为的是更准确的研究分析网页设计配色的协调性、合理性、掌握其规律性。
　　有经验的设计师通常仅仅凭目测、直觉，就能随心所欲的掌控色彩的配置了。但如遇到困惑，不防也使用一下模式计算法。

1、注意页面的分块，着手设计一个页面的时候，你必须根据所掌握的内容，以及其风格，对页面的整体进行分块。分块是一个非常必要且难以掌握的技巧。对于一般杂志来说，它们是有边的，这意味着杂志美工设计师有边可循，依靠边来形成立体感，依靠边来产生未尽的意韵;但是对于web页面，边的概念被淡化了，屏幕可以上下左右的拖动。所以此时分块显得非常必要，目的也就是产生边的效果。分块可以用不同着色的色块、框、细线、排列整齐的英文等等，还可以混合使用，但是注意不要过于醒目，因为页面的重点在内容，而不在其他。

　　2、色彩的平衡与呼应。

　　1)色彩的平衡。色彩在页面中可以形成很多的效果，通过强烈的对比，可以突出页面的重点。还可以通过色彩调配，达到页面稳重度的改变。一般的情况下，页面上方的颜色总是很重，这样才能压住下面的颜色，如果不采取这种办法，整个页面将显得很不稳重，底下的文字图片，有飘出的意味。因此，要使整个页面显得很平衡，必须要有能镇住其他颜色的色彩。

　　2)色彩的呼应。一种比较突出的色彩，如果很突兀地放在页面中，无论你是突出重点也好，还是logo图标，都给整个页面带来了副作用。为此，你必须在相对称的位置加上该色系(对于页面并不醒目)的色彩以呼应，这样可以弱化这种视觉的冲击。

　　3、精确到1个像素

　　如果你是一个成功的页面设计者，你至少会在做出页面前已经把整个页面构思好了;如果你很宽容地对待图片中1个像素的差别，那说明你还不是很合格。

公司的项目都是基于B/S结构的，绝大多数操作界面都是通过网页的形式展现在用户面前的，页面的美观就成了非常重要的问题。记得去年的这个时候公司迎来了它历史上的第一个专职美工。同时到来的就是程序员与美工的合作问题。

　　矛盾篇:

　　公司以前的系统都是由程序员来编写界面的，美观与否先不必说，单从效率上讲就是一个很大的问题。大部分时间都花在了界面的编写上，严重影响了项目的进展速度。美工到来以后，页面的美观程度和制作速度都有了很大提高，随之而来的程序员与美工的配合问题又成了一个新的问题。其中主要的问题、矛盾有以下几点:

　　1. 美工何时参与到项目中来

　　2. 程序员不懂如何将页面弄得美观，美工也不懂如何向页面中添加代码(即使是使用了Velocity)

　　3. 程序员和美工是两种完全不同的人，他们关心的事情也完全不同，这就导致两种人对页面代码(html)风格的要求大相径庭??程序员要得是简单易懂，美工要得是美观漂亮

　　4. 程序员要做的是将数据展现在页面上(使用简单的条件、循环语句)，美工要做的是将美丽充满整个屏幕(程序员会叫道:天哪!这么复杂，我怎么用if、else、for来实现)

　　解决篇:

　　上面的这几点问题和矛盾从关系上来讲是层层递进的，要一个一个依次解决。先来说说美工何时介入到项目中来，在公司做过的这些项目以及我听说过的项目看，大致有以下几种:1)先有美工制作静态页面，完成后程序员直接向页面中添加程序代码;2)程序员随时和美工沟通，向美工描述页面需求，随要随做;3)程序员自己编写测试页面，然后让美工进行美化。

　　这3种方式可以说是个有利弊。方式1)对程序员来说绝对是个喜讯，它能使程序员最大限度的远离那些烦人的页面编码，提高程序员工作的含金量。同时，一套完整的页面可以展现全部业务的流程，对程序员开发也起到了规范的作用。但这种方式对美工的要求极高，美工要了解项目的需求，而这一般是达不到的。但可以让了解需求的人为其讲解，或是描绘出希望的页面的样式。这样虽然可以弥补美工对业务了解的不足，但也确实花掉了很多时间(而且是花掉了比较重要的人物的时间，因为了解整体业务的一般都是公司的牛人，他们的时间可是一刻千金呀)。方式2)是一个比较折中的方法，这样做无需太多的准备就可开始编码工作，程序员把握页面内容和样式，向美工详细描述，美工再根据描述设计页面，最后返回给程序员添加代码。这个反馈的过程一般比较迅速，效果也不错，可以达到程序员预期的效果，适用于项目时间要求比较紧的情况。该方式的问题在于没有一个形象化的完整的流程可供程序员参考，一切掌握在程序员手中，容易造成对需求的贪污和系统整体风格的不统一。方式3)一般用于对已有项目的美化上，对美工的要求也很高，她们需要具备在html和其他代码混合体的环境下工作的能力。而且修改的效果一般不是很佳，不到万不得已不推荐使用。

　　问题2.3.4.虽然表现出来的问题各不相同，但解决的方法却很相似。首先，美工要养成一些程序员编码时惯有的习惯，比如:文件命名要有意义、html代码要根据层次进行缩进等。其次，页面代码的一些细节也要注意，比如，使用居中或右对齐标签来取代空格，必须使用空格时也要用“ ”，不使用

标签，尽量使用表格等。再次，如果在条件允许的情况下，美工也可以学习一下夹杂在页面中的各种程序代码，了解其语义和工作原理，这将对与程序员的合作起到很大的帮助的。最后，就是程序员要在向页面文件中添加代码前先对页面代码做一下审核工作，在这里并不是看美工的页面是否美观，而是看在原有页面代码的基础上是否能够使用简单的条件、循环语句来显示数据(比如，页面布局过于复杂，不能通过简单的循环来显示所有数据)，否则就需要修改页面代码直到能满足要求为止。

　　做网站后台的流程一般是这样的:

　　一、网站规划阶段

　　这个阶段主要是对网站的功能、目标受众、内容、栏目进行规划。这期间会经常性地和有关领导进行沟通。首先，自己一定要对网站的整体规划清清楚楚，然后要吸收别人的建议。吸收别人的建议的过程，可以认认真真地做，也可以走过场，但是有这个过程以后，别人才不会对你的规划说三道四。

　　至于领导的意愿，和你的规划靠得上边的，你一定要让领导明白，他们的设想已经在你的规划中被考虑进去了。

　　项目的大致进度，要在这个阶段结束的时候确定下来。

　　二、后台模块划分和版面设计

　　这个阶段，程序员要和美工兵分两路分头行动。

　　后台模块划分如果做好了，后面的效率会高一些。这个过程不能省。

　　版面设计，美工既要考虑网站整体规划，又要考虑大家的建议，尤其是不能忽视领导们的观点(虽然大多数情况下领导的美术细胞少得可怜)。在这个大前提下，再兼顾美观、合理。一个好的美工，不仅仅能做出漂亮的页面，还要能迎合一下客户或者公司领导的意愿，而且能和程序员进行沟通。

　　在这个阶段，程序员和项目经理(项目负责人)要拿出一个可操作的模块划分方案，而美工要确定网站的版面框架、美术风格，做出网站首页和二级页面。

　　实际上，在第一个阶段(网站规划阶段)，美工就应该开始思考网站的风格了。在第二个阶段，则需要把比较抽象的初级设想变成具体的页面。基本上，首页定了，整个网站的页面就定了一大半了。

　　在这个阶段结束的时候，要将项目的进度计划进一步具体化。

　　三、数据库设计

　　这项工作很重要。但是程序员应该知道怎么去做。而且数据库设计是和一个人的理论水平、实际经验息息相关的，不是几句话能说明白的。大的、复杂的站点，数据库规划可能要用一周左右的时间，小的、简单的站点，数据库设计也需要2到3天。

　　在这个阶段，美工最好别闲着，继续完成页面设计。要知道下一个阶段，程序员可就要用到美工的页面了。最好别出现这样的情况:程序员要用到某个页面，而美工还没有把那个页面确定下来。

　　四、后台程序编码

　　这个阶段，程序员要紧张工作，会比较辛苦的。

　　程序员需要遵守的三个原则:

　　1、团队合作;

　　2、保证进度;

　　3、保证质量。

　　美工这个时候要辅助程序员做页面。这个阶段美工可能比较闲，但是一定要称职。

　　项目经理该和客户或者领导沟通的时候，一定要沟通。

　　五、除错、改进、页面美化

　　这个阶段，不多说了。项目经理和客户、领导的沟通，仍然是很重要的。