网页设计配色实例
网页设计配色应用实例剖析黑色系
网页设计配色应用实例剖析黑色系——黑色系黑色是暗色，是纯度、色相、明度最低的非彩色。
象征着力量，有时感觉沉默、虚空，有时感觉庄严肃穆，有时又意味着不吉祥和罪恶。
自古以来，世界各族都公认黑色代表死亡、悲哀黑色具有能吸收光线的特性，别有一种变幻无常的感觉。
黑色能和许多色彩构成良好的对比调和关系，运用范围很广。
黑色给人深沉、神秘、寂静、悲哀、压抑的感受。
黑色是最有力的搭配色。
黑色也常用来表示英俊的男人。
下面我们根据黑色系搭配不同的颜色所表现出的特性做不同的举例分析。
→黑色网页例图：黑色系分析：（明度对比：黑色+白色）从RGB和HBS模式可以看出，三组数字显示没有掺杂任何的数字，都统一到最高级0到255，即纯黑和纯白。
黑色白色属于没有色相和饱和度、只在明度两极的非色彩。
两种极端强烈对比的只在明度上有区别的颜色，与前面我们所说的三原色、对比色的对比还是有较大区别的。
该页面只有两种非色彩搭配，即黑色白色，衬映得该页面的设计元素也非常干净简练，旁边点缀大小得当的文字元素减小该页面有可能因此产生的单调感觉。
结论：黑白纯色在明度上反差非常大，视觉冲击强烈，主次分明，全站的贯穿运用，构成特色鲜明的设计风格，散发迷人的高品位的贵族气息。
黑白两种颜色的搭配使用通常可以表现出都市化的感觉，常用于现代派页面设计中。
黑色系分析：（非色彩系：黑白深灰色）该页面与上页配色类似，只是多了一组辅助色——灰色，黑、灰、白这三种非色彩在该页面里都运用到了。
大家从该页整体可以看到，多了辅助色灰色，令该页面层次感更丰富，过渡更柔和，空间感觉增强。
左上部点睛色白色块面的运用，使得这种空间感差距拉大，增强视觉层次感，同时突出标志品牌、主题思想。
另一作用在于突出文字的功能运用。
背景深灰色明度非常低，接近于黑色，稍不留心有可能会被忽略。
结合辅助色灰色再整体上看该色配色，主要起到丰富视觉层次感，缓和主色调黑色有可能带来的僵硬感。
结论：黑白灰非色彩色调所构成的页面较具特色，尤其灰色的加入更增添层次感。
网页设计配色应用实例剖析精品PPT课件
• 黑色白色属于没有色相和饱和度、只在明度两极 的非色彩。两种极端强烈对比的只在明度上有区 别的颜色，与前面我们所说的三原色、对比色的 对比还是有较大区别的。
• 该页面只有两种非色彩搭配，即黑色白色，衬映 得该页面的设计元素也非常干净简练，旁边点缀 大小得当的文字元素减小该页面有可能因此产生 的单调感觉。
• 点睛色橙色和白色点缀下打破了平面平淡 的配色格局，眼前顿时一亮的感觉。
• 结论：
• 灰色调非色彩所构成的页面颇具有独 特的魅力，整个页面呈现出平稳缓和的气 质。两个点睛色橙色和白色起到调动配色 页面的作用。
• 灰色应用（同类灰色＋多种颜色）网页例图：
黑色系
• 黑色是暗色，是纯度、色相、明度最低的非彩色。象征着 力量，有时感觉沉默、虚空，有时感觉庄严肃穆，有时又 意味着不吉祥和罪恶。自古以来，世界各族都公认黑色代 表死亡、悲哀黑色具有能吸收光线的特性，别有一种变幻 无常的感觉。
• 对于单独的R或G或B而言，当数值为0时， 代表这种颜色不发光；如果为255，则该颜 色为最高亮度。因此当RGB三种色光都发 到最强的亮度，纯白的RGB值就为 255,255,255。屏幕上黑的RGB值是0,0,0。 R，意味着只有红色存在，且亮度最强，G 和B都不发光。因此最红色的数值是 255,0,0。同理，最绿色就是0,255,0；而最 蓝色就是0,0,255。黄色较特殊，是由红色 加SB模式的B也能看出浅灰色在明度上较高，部 分渐变的深灰色在页面上所占用的面积也不少，
另一点睛色黑色的作用就是使明度色阶跨度加深、 明确，整个页面呈现灰蒙蒙的感觉得以减弱。
• 结论：
网页设计配色应用实例剖析——蓝色系
网页设计配色应用实例剖析——蓝色系蓝色是色彩中比较沉静的颜色。
象征着永恒与深邃、高远与博大、壮阔与浩渺，是令人心境畅快的颜色。
蓝色的朴实、稳重、内向性格，衬托那些性格活跃、具有较强扩张力的色彩，运用对比手法，同时也活跃页面。
另一方面又有消极、冷淡、保守等意味。
蓝色与红、黄等色运用得当，能构成和谐的对比调和关系。
蓝色是冷色调最典型的代表色，是网站设计中运用得最多的颜色，也是许多人钟爱的颜色。
蓝色表达着深远、永恒、沉静、无限、理智、诚实、寒冷的多种感觉。
蓝色会给人很强烈的安稳感，同时蓝色还能够表现出和平、淡雅、洁净、可靠等。
下面我们根据蓝色系不同属性的同类色、邻近色、高纯度对比、相对对比色等色彩搭配做不同的举例分析。
→蓝色高纯度对比网页例图：蓝色系分析：(高纯度对比：蓝色+玫瑰色)蓝色的HSB数值H色相为240度时是正蓝色。
上图的HSB模式S数值显示，所有主要配色的饱和度都是100%。
从主色调、辅色调HSB模式的数值可看出，这两种颜色在明度上有较大的区别，色相上稍有轻度变化，饱和度相同。
RGB模式上看，主色调与辅色调R数值都为0，G绿色的数值和B蓝色数值分量的变化，得到了不同蓝色的两结果。
点睛色仅是R红色与B蓝色两色调和而得没有掺杂其他颜色，因此饱和度呈最高值100%。
整个页面配色的饱和度都为100%，页面整体配色看起来视觉冲击力异常强烈。
辅助色白色让页面上的颜色的特性发挥到极致，是不可缺少的辅助配色。
结论：响亮、强烈刺激的词语似乎都适用于上图页面，源于高纯度烘托、微妙的冷暖变化配色上，体现出现代都市张扬时尚的气息。
白色块面的线型使得这种高纯度高强度的配色变得响亮却也缓和。
辅色调蓝色的运用透露出设计师的大胆与魄力，玫瑰色在色轮表里算是冷色系，但是与蓝色广义上的对比来说是暖色，在这里与蓝色搭配算是绝配了。
整个页面无不体现出特色和个性。
→蓝色浅蓝色网页例图：/start.html蓝色系分析： (同类色：浅蓝色)主色调HSB数值H显示200度，色轮度稍向绿色方位倾斜，但是由于从180度到270度基本上给人的视觉呈现还是蓝色范畴，因此与视觉上广义的蓝色差别不大。
网页设计配色应用实例剖析--黄色系
网页设计配色应用实例剖析——黄色系(1) 黄色是阳光的色彩，具有活泼与轻快的特点，给人十分年轻的感觉。
象征光明、希望、高贵、愉快。
浅黄色表示柔弱，灰黄色表示病态。
它的亮度最高，和其他颜色配合很活泼，有温暧感，具有快乐、希望、智慧和轻快的个性，有希望与功名等象征意义。
黄色也代表着土地、象征着权力，并且还具有神秘的宗教色彩。
黄色的性格冷漠、高傲、敏感、具有扩张和不安宁的视觉印象。
浅黄色系明朗、愉快、希望、发展，它的雅致，清爽属性，较适合用于女性及化妆品类网站。
中黄色有崇高，尊贵，辉煌、注意、扩张的心理感受。
深黄色给人高贵、温和、内敛、稳重的心理感受。
下面我们根据黄色系不同属性邻近色、同类色的高纯度低纯度色彩搭配做不同的举例分析。
→黄色系网页例图：黄色系分析：黄色是所有彩色中明度最高的颜色。
上图看到HSB模式的H数值是60度，正是正黄色，但RGB数值中加入了B蓝色数值为51，因此降低了HSB的饱和度S为80％，但是大面积的黄色仍使得该页面色彩明亮显眼。
辅助色是纯黑色，非色彩明度最低的颜色。
大面积显眼的正黄色有黑色的线条压制，黄色顿时显得沉稳，页面增添内容感。
白色虽然是点睛色，但由于非色彩的白色与黄色的明度最高，因此这里似乎没有起到"点睛"的作用。
结论：当鲜度、明度高的背景色与前景辅助色暗度低的黑色在明度形成较强烈的对比时，艳度降低，较能协调视觉。
整个页面配色单纯，却也不简单，形成另一种设计风格。
→黄色同类色网页例图：www.paralotna.pl黄色同类色分析该页面的配色很单纯，是同类色的黄色不同明度颜色，页面看起来干净、单纯。
点睛色白色淡黄色在深色黄色背景下比较显眼，且在最中间位置，是整个页面中的高调部分。
这三种黄色，明度都很高，只有背景辅助色明度稍低，点睛黄色H色相是三种颜色中黄色倾向最高的为57度，而60度是正黄色，因此明度也是最高的，充分的发挥其点睛色的作用。
背景色和前景色只在色相上明度上有非常微妙的变化，却也很巧妙，形成了变化较明显的空间层次感，削弱了同类色易产生的单调感。
网页设计配色应用实例剖析--橙色
网页设计配色应用实例剖析——橙色系(1)橙色具有轻快、欢欣、收获、温馨、时尚的效果，是快乐、喜悦、能量的色彩。
在整个色谱里，橙色具有兴奋度，是最耀眼的色彩。
给人以华贵而温暖，兴奋而热烈的感觉，也是令人振奋的颜色。
具有健康、富有活力、勇敢自由等象征意义，能给人有庄严、尊贵、神秘等感觉。
橙色在空气中的穿透力仅次于红色，也是容易造成视觉疲劳的颜色。
在网页颜色里，橙色适用于视觉要求较高的时尚，属于注目、芳香的颜色，也常被用于味觉较高的食品，是容易引起食欲的颜色。
下面我们根据橙色系不同属性邻近色、同类色、对比色的搭配做不同的举例分析。
橙色→橙色网页例图： 橙色系分析：主色调橙色HSB数值的H表示色相，显示的是30度，而30度正是橙色显示特征最标准的颜色——正橙色。
饱和度和亮度同时达到最高值，因此整个页面的视觉刺激是极其耀眼强烈的。
这里选取了三种面积相当又是整个页面使用得最少的颜色为点睛色，使页面生动的同时又运用于导航位置，从而达到突出主题的效果。
从HSB数值上看它们的明度纯度相对较低，与明度纯度较高的背景正橙色形成鲜明的对比。
通过围较大的背景白色、前景图片灰白色和小细节前景白色文字制造出明快气氛的同时，又呼应统一于整个页面。
辅助色在这里是橙色与白色的过渡色。
结论：饱和度与纯度很高特性明显的颜色，在达到视觉冲击力的同时，可适当采用少许对比色调和缓和于视觉，从而削弱视觉的疲劳度。
深橙红色系→深橙红色网页例图： .matisserestaurant.ca深橙红色系分析：从色相度中可以知道0度为正红色，30度为正橙色，而主色调的HSB数值H 显示22度可知，该深橙红色是橙色基础上加入少许邻近色红色，整体上降低了明度而得，因为红色本身较橙色明度低，因此这里橙红色的明度呈现出较低状态。
辅助色选取了明度相对于主色调更低的三种颜色，前面两种饱和度都较高，最后一种灰蓝色由于明度较高因此饱和度降低，是主色调与前面两种辅助色的协调色。
网页设计版式与网页配色
加生动有趣，提高了用户的关注度。同时，通过合理的动态效果设计，
使得页面整体视觉效果更加流畅。
WENKU DESIGN
WENKU DESIGN
2023-2026
END
THANKS
感谢观看
KEEP VIEW
WENKU DESIGN
WENKU DESIGN
WENKU
REPORTING
https://
PART 01
网页设计版式
网页版式的构成要素
字体
用于文本显示的字体类型，影 响文字的可读性和风格。
图片和图标
用于装饰或解释内容的图片和 图标。
布局
网页的整体结构，包括各个元 素的排列和组织方式。
色彩
网页的背景色、文字颜色和其 他视觉元素的颜色。
留白
页面中用于分隔元素、引导视 线或创造空间感的空白区域。
测试与调整
在实际应用中，对版式与配色进行测试和调整。 通过用户反馈和数据分析，了解用户对网页设计 的反应，不断优化和完善版式与配色方案。
PART 04
优秀网页设计案例分析
案例一：版式与配色完美结合的网页设计
优秀版式设计
该网页采用简洁、大气的版式设 计，使得内容层次分明、条理清 晰。同时，通过合理的布局和留 白，使得页面整体视觉效果舒适， 不会显得过于拥挤。
创意版式
该网页的版式设计非常独特，采用了一些非常规的排版方式，如倾斜的标题、不规则的布局等， 使得页面整体视觉效果非常突出。
配色方案
该网页的配色方案也非常有创意，主色调为橙色和黄色，辅以灰色和白色，整体色调鲜明、活泼 ，给人一种活力四射的感觉。
动态效果
该了用 户的关注度。
共同塑造品牌形象
网页设计配色应用实例剖析
网页设计配色应用实例剖析——紫色系紫色是一种在自然界中比较少见的颜色。
象征着女性化，代表着高贵和奢华、优雅与魅力，也象征着神秘与庄重、神圣和浪漫。
另一方面又有孤独等意味。
紫色在西方宗教世界中是一种代表尊贵的颜色，大主教身穿的教袍便采用了紫色。
紫色的明度在有彩色的色度中是最低的。
紫色的低明度给人一种沉闷、神秘的感觉。
在紫色中红的成份较多时，显得华丽和谐。
紫色中加入少量的黑，沉重、伤感、恐怖、庄严的感觉。
紫色中加入白，变得优雅、娇气，并充满女性的魅力。
紫色通常用于以女性为对象或以艺术作品介绍为主的站点，但很多大公司的站点中也喜欢使用包含神秘色彩的紫色，但都很少做大面积使用。
不同色调的紫色可以营造非常浓郁的女性化气息，在白色的背景色和灰色的突出颜色的衬托下，紫色可以显示出更大的魅力。
下面我们根据紫色系不同属性的邻近色、高纯度低纯度配色、相对对比色等色彩搭配做不同的举例分析。
紫色高纯度网页例图紫色系分析：（高纯度对比：同类紫色+同类对比色）紫色的HSB数值H色相为300度时是正紫色。
上图的HSB模式S数值显示，上组颜色饱和度基本都比较高，加上部分较高的明度组合，使该页面异常奢华艳丽。
辅色调之一的黄色是紫色强度最高的对比色，主、辅色面积的大小不同是形成视觉冲击力最大的主要原因。
值得一提的是右下脚的浅蓝色的运用，它在整个页面配色上是很谦逊的角色，但却既突出上面的文字内容，又不张扬的压抑住其他颜色的配色，属于丰富于页面的辅助作用。
如果把它试换成别的颜色似乎还是没有这个浅蓝色效果好。
另一辅助色浅紫红色又称粉红色，粉红色主要用于包含少女在内的女性站点。
因为从明亮到浅白色调的粉红色能够表现出可爱、乖巧的感觉，这里只做少量运用。
其他点睛色使用得虽多但面积很小，主要是主色调紫色附近的过渡色，例如群青、青莲、玫瑰、红色等点缀，闪亮耀眼，增强页面的视觉感染力，有渲染出华丽凸显现代气息的作用。
结论：紫色结合红色的紫红色是非常女性化的颜色，它给人的感觉通常都是浪漫、柔和、华丽、高贵优雅，特别是粉红色可以说是女性化的代表颜色。
网页设计配色精彩十例
网页设计配色精彩十例一、网页颜色原理和象征意义我们所有网页上颜色，在HTML下看到的是以颜色英文单词或者十六进制的表示方法（如#000000表示为黑色）。
不同的颜色有着不同的含义，给人各种丰富的感觉和联想。
红色：热情、奔放、喜悦、庄严黄色：高贵、富有、灿烂、活泼黑色：严肃、夜晚、沉着白色：纯洁、简单、洁净蓝色：天空、清爽、科技绿色：植物、生命、生机灰色：庄重、沉稳紫色：浪漫、富贵棕色：大地、厚朴二、网页颜色的使用风格不同的网站有着自己不同的风格，也有着自己不同的颜色。
网站使用颜色大概分为几种类型：1、公司色在现在企业中，公司的CI形象显得尤其重要，每一个公司的CI设计必然要有标准的颜色。
比如新浪网的主色调是一种介于浅黄和深黄之间的颜色，同时形象宣传、海报、广告使用的颜色都和网站的颜色一致。
再比如国富投资公司的主色调是C：100%，M：60%，Y：0%，K：0%。
这样的颜色使用到网站上显得色调自然、底蕴深厚。
2、风格色许多网站使用颜色秉承的是公司的风格。
比如海尔使用的颜色是一种中性的绿色，即充满朝气有不失自己的创新精神。
女性网站使用粉红色的较多，大公司使用蓝色的较多……这些都是在突出自己的风格。
3、习惯色这些网站的颜色使用很大一部分是凭自己的个人爱好，以个人网站较多使用，比如自己喜欢红色、紫色、黑色等，在做网站的时候就倾向于这种颜色。
每一个人都有自己喜欢的颜色，因此这种类型称为习惯色。
三、设计用色十例以下我将分别介绍十个配色较好的网站，大家可以学习和借鉴一下，培养对色彩的敏感以及独到的审美能力。
1）这是个大型的NBA是这个网站却用灰黑色RGB为（48，48，48/#333333）（以下颜色都用RGB表示），文章标题用色为RGB为（203，201，153/#CCCC99），菜单使用的为（112，119，112/#707770）。
这样的配色可以显示独特的个性，又不失大型网站的风采。
如图1图12）下面是一个娱乐类的综合性网站UGO，他的配色方案是背景色为黑色为（0，0，0）中嵌套RGB（0，0，82），字体白色RGB（255,255,255）,菜单为RGB（77,114,159感觉是生机盎然，充满了互动色彩和青春气息。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
网页设计配色颜色的使用在网页制作中起着非常关键的作用，有很多网站以其成功的色彩搭配令人过目不忘。
但是对于刚开始学习制作网页的人来说，往往不容易驾驭好网页的颜色搭配。
除了学习各种色彩理论和方法之外，笔者认为多学习一些著名网站的用色方法，对于我们制作美丽的网页可以起到事半功倍的作用。
所以，笔者总结了一些著名网站的颜色搭配方法，这些方法可以让我们的学习少走弯路，快速提高我们的网页制作水平。
一、网页颜色原理和象征意义我们所有网页上颜色，在HTML下看到的是以颜色英文单词或者十六进制的表示方法（如#000000表示为黑色）。
不同的颜色有着不同的含义，给人各种丰富的感觉和联想。
红色：热情、奔放、喜悦、庄严黄色：高贵、富有、灿烂、活泼黑色：严肃、夜晚、沉着白色：纯洁、简单、洁净蓝色：天空、清爽、科技绿色：植物、生命、生机灰色：庄重、沉稳紫色：浪漫、富贵棕色：大地、厚朴二、网页颜色的使用风格不同的网站有着自己不同的风格，也有着自己不同的颜色。
网站使用颜色大概分为几种类型：1、公司色在现在企业中，公司的CI形象显得尤其重要，每一个公司的CI设计必然要有标准的颜色。
比如新浪网的主色调是一种介于浅黄和深黄之间的颜色，同时形象宣传、海报、广告使用的颜色都和网站的颜色一致。
再比如国富投资公司的主色调是C：100%，M：60%，Y：0%，K：0%。
这样的颜色使用到网站上显得色调自然、底蕴深厚。
2、风格色许多网站使用颜色秉承的是公司的风格。
比如海尔使用的颜色是一种中性的绿色，即充满朝气有不失自己的创新精神。
女性网站使用粉红色的较多，大公司使用蓝色的较多……这些都是在突出自己的风格。
3、习惯色这些网站的颜色使用很大一部分是凭自己的个人爱好，以个人网站较多使用，比如自己喜欢红色、紫色、黑色等，在做网站的时候就倾向于这种颜色。
每一个人都有自己喜欢的颜色，因此这种类型称为习惯色。
三、设计用色十例以下我将分别介绍十个配色较好的网站，大家可以学习和借鉴一下，培养对色彩的敏感以及独到的审美能力。
1）这是个大型的NBA网站。
通常我们经常看到的此类网站以白色为背景，但是这个网站却用灰黑色RGB为（48，48，48/#333333）（以下颜色都用RGB表示），文章标题用色为RGB为（203，201，153/#CCCC99），菜单使用的RGB为（112，119，112/#707770）。
这样的配色可以显示独特的个性，又不失大型网站的风采。
如图1图12）下面是一个娱乐类的综合性网站UGO，他的配色方案是背景色为黑色RGB为（0，0，0）中嵌套RGB（0，0，82），字体白色RGB（255,255,255）,菜单为RGB（77,114,159）。
这样的虽以黑蓝为主色调，但是配以漂亮的图片，给人的感觉是生机盎然，充满了互动色彩和青春气息。
如图2。
图23）下面的这个网站是大名鼎鼎的微软公司网站，微软不仅软件做的好，连网页制作也是世界一流。
他的每一个网页都是制作的样板。
从网页我们就可以看出微软公司的风格、作风，以及雄厚的实力。
背景颜色使用蓝色RGB为（0，151，254），菜单为黑色RGB（0，0，11），菜单为灰色RGB（200，200，200），字体为黑色RGB（0，0，0），如图3。
图34)现在介绍的网站相对简单，但是她的用色也别具匠心，现在我们来看一看，整体上使用的是白色RGB（255，255，255），辅助色为RGB（79，88，95），菜单色为RGB（48，64，64）和RGB（0，81，111）字体使用的是RGB（83，86，91）。
虽然简单，但颜色搭配非常的科学合理。
如图4图45）下面的网站采用黄色调为主，很体现公司的个性，现在我们就来看一看她的颜色搭配。
主色调为黄色RGB为（255，199，48/#FFC730），辅助色调为RGB（49，102，46）字体为棕色RGB（153，103，0），中间再配以抽象的图片，显得个性十足但又不单调。
如图5图56）橘红色如果运用得当的话是一种非常使用于网页上的颜色。
下面的这个网站就是一个非常著名的例子。
他的主色调为RGB（255，151，0）辅助色调为RGB（255，103，4），菜单RGB为（252，200，0）。
字体使用黑色RGB为（0，0，0）。
此种配色显得主人较为前卫，色彩热烈，给人的震慑力较强。
如图6图67）鲜红色也是一种震撼感很强的颜色，如果搭配不当，也可能使网站没有风格和特点。
下面的这个网站就是使用红色比较好的网站。
我们来看看他的颜色搭配。
他使用的主色调是RGB（200，9，0），配以抽象的图形，文字使用的是RGB（213，229，167）显得美观而不失独特，大气而不逼人。
如图7图78）下面介绍的这种色调是我们制作网页的时候不会经常用到的颜色，如果使用到你的网页中，肯定会给人耳目一新的感觉。
他的主色调为RGB（144，151，97）辅助色调为RGB （173，168，112）边饰为黑色RGB（0，0，0）字体为黑色RGB（0，0，0）。
这样的搭配显得风格独特，颜色和谐而庄重。
如图8图89）下面的设计更加的简单化，但是颜色的使用使网页并不呆板，反而让人感觉到一股浓浓的生活和家庭气氛，使人置身于美丽和爱中。
他的主体是由两种颜色构成，分别是RGB （239，200，161）和RGB（201，254，200）。
如此简单，但是却栩栩如生，跃然网上。
如图9图910）下面举出这个例子是想证明一个道理——只要你有足够的想象力，你就能够设计出漂亮的网页。
目前在网上非常流行一句话就是网页的搭配不要超过四种主要颜色，否则就有杂乱之感。
下面的这个网站远远的超过了三种颜色，但是她并不失美丽。
因此重要的还是色彩的驾驭能力。
下面这个例子的菜单就使用了7种颜色，但是我们看到的网页并不杂乱，相反感觉作者很有创意。
如图10图10网页设计的颜色搭配需要在实践中不断的摸索和不断的创新，认真学习别人的先进方法和经验，可以快速的提高我们的制作水平。
可以说。
网页颜色搭配得当，成功也就走了一半。
如果大家有什么好的方法，别忘了和别人交流，让我们共同进步！红色系红色的色感温暖，性格刚烈而外向，是一种对人刺激性很强的颜色。
红色容易引起人的注意，也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳的颜色。
在众多颜色里，红色是最鲜明生动的、最热烈的颜色。
因此红色也是代表热情的情感之色。
鲜明红色极容易吸引人们的目光。
红色在不同的明度、纯度的状态（粉红、鲜红、深红）里，给人表达的情感是不一样的。
在网页颜色的应用机率中，根据网页主题内容的需求，纯粹使用红色为主色调的网站相对较少，多用于辅助色、点睛色，达到陪衬、醒目的效果。
通常都配以其他颜色调和。
红色相对于其他颜色，视觉传递速度最快。
由于以上的这些红色传达出的特性，因此人们喜欢用红色作为警示符号的颜色，例如：消防、惊叹号、错误提示等等。
为了让大家对红色的理解做更好的区别，下面我们分别对红色系根据邻近色、同类色、对比色的搭配做不同的举例分析。
朱红色→ 朱红色网页例图：http://www.muchvibe.ca朱红色在红色系里倾向黄色方向，是大红色加入黄色而得。
在色环表中，纯红色在HSB 里为0度，往360度方向呈现的是冷红色系，0度方向为黄色系。
整个页面里，主色调朱红色面积非常大、确定明显，辅助色主要由黑色、深红构成，（数值上选取的是深红色做标示）。
主色调的R呈现出255最高数值，S中100%，充分标明了红色最高特性。
辅助色的深红R为222，B87%，显示其充当辅助角色的这一特性。
结论：背景色朱红由于红色特性明显，饱和度、明度都非常的高，这里运用了辅助色深红、黑色压住并牵制朱红色抢眼的个性，也同样能达到突出前景主要图片内容的目的。
点睛色主要用于标志的突出上，其他导航文字、图片的部分运用等，调和并达到了不至于使得整个页面刺激中又透出的沉闷感。
这类颜色的组合比较容易使人提升兴奋度，红色特性明显，这一醒目的特殊属性，比较被广泛的应用于食品、时尚休闲等等类型的网站。
深红色→ 深红色网页例图：http:// 深红色在原有的红色基础上降低了明度而得，是红色系中的明度变化。
通过上图的数值显示看出明度较低。
这类颜色的组合随着明度的变暗，比较容易制造深邃、幽怨的故事气氛。
传达的是稳重、成熟、高贵、消极的心理感受。
这个页面背景色运用了纹样，是以目前选取的主色调颜色和明度较暗的深红色结合而的，使得明度稍暗。
数值上看，主色调也就是背景色的饱和度较高，但是由于降低了明度，颜色变得较沉稳。
辅助色RGB添加了适量的其他颜色，G和B数值区别不大，因此饱和度降低，颜色趋于柔和稳定。
点睛色的加入提亮，页面视觉效果强化。
结论：前景色通常要较明显的区别于背景色，达到台前的宣传目的。
当饱和度较低的前景色与背景色变化不明显时形成的是另外一种柔和统一的效果。
玫瑰红色→ 玫瑰红色网页例图：http://www.gentverwent.be玫瑰红色在色环上实际已经接近冷色，是红色系中的色相的微妙变化，是红色系里的冷色系。
我们在HSB中H数值可看出，0度为红色的最高值，越接近0度数值红色特性越明显，否则逐渐冷色倾斜，而该数值偏离0度稍远。
这个页面主要由两种不同明度、纯度的玫瑰色调组成。
两色数值显示，我们看到RGB 数值中R呈现的数值最高，红色特性较明显。
辅助色调的玫瑰色，加入少许G，色调向冷色稍微偏移，也由于加入了G，在HSB数值里，饱和度轻微减弱，但随着明度增加，色彩趋于艳丽，符合突出前景的目的。
主色调虽然纯度达到最高饱和，但由于明度降低，相对于辅色调较沉稳，适合做背景色。
数值上看，由于背景色和前景色的明度较为接近，加入白色边框，强烈了前景色于背景色的区分，加强视觉强化效果。
结论：背景色和前景色的明度较接近，颜色给人的视觉表象较闷，加入少量白色划分使得色彩引导的主次块面更分明，页面明快许多。
这类颜色的组合多用于女性主题，例如：化妆品、服装等，容易营造出娇媚、诱惑、艳丽等气氛。
明度粉红色→ 明度粉红色网页例图：http:// .au粉红色主要是红色系中的明度的高亮度的变化。
是红色系里的冷色系。
RGB数值显示明度较高，因此HSB中S纯度下降，几乎呈最低值。
主色调和辅助色调数值对比可知：主色调混合的G的份量较多且明度较高，因此纯度较低，色调柔和，在框架区域内较适合做类似背景色的辅助性岗位。
辅助色R 数值比主色调的R数值稍高，红色性稍明显，加入的G相对少，B明度稍低，因此相对纯度要高，辅色位置应用在框架区域的导航位置，起到突出导航作用。
点睛色突出标志及购物主体的作用。
背景白色除了突出前面粉红色主体的作用，在前景也有出现，背景色与前景色的相互牵制，减少空间距离的效果。
结论：RGB数值中，数值同时呈现相近的高数值时，色彩越柔和协调，纯度相对降低，页面呈高明度灰色段，视觉刺激缓慢。