网页布局和配色设计——配色小手册(综合)
网页设计传统配色方案2024
引言概述：网页设计中的色彩选择对于页面的整体效果和用户体验至关重要。
传统的配色方案是指那些经典、常用且在设计中广泛应用的色彩组合。
本文将继续探讨网页设计传统配色方案，旨在为设计师提供更多灵感和选择。
正文内容：一、深色系传统配色方案1.黑白经典：黑色与白色的组合是一种经典的、简洁大气的传统配色方案。
黑白搭配可以营造出高对比的视觉效果，适用于多种类型的网页设计。
2.深蓝与白色：深蓝色是传统配色方案中常见的选择之一。
与纯白色的搭配能够给人带来舒适和专业感，适用于金融、科技等领域的网页设计。
二、明亮色系传统配色方案1.红与白色：红色是一个有活力和吸引力的颜色，与白色搭配可以营造出醒目而清晰的页面效果。
适用于餐饮、旅游等类型的网页设计。
2.黄绿与白色：黄绿色是一种鲜明且积极向上的颜色，与白色的搭配可以给人带来清新和亲和感，适合教育、环保等领域的网页设计。
三、自然色系传统配色方案1.蓝绿色与棕色：蓝绿色与棕色的搭配可以给人带来舒适和和谐的感觉，适用于自然和健康相关的网页设计。
2.红褐与绿色：红褐色是一种富有质感的颜色，与绿色的搭配可以打造出生动而富有活力的页面效果，适合农业、生态等领域的网页设计。
四、经典配色方案的运用技巧1.对比与平衡：在选择传统配色方案时，需要注意对比和平衡。
例如，在使用深色系传统配色方案时，可以在黑色背景上使用白色文字来实现对比，同时保持页面的平衡。
2.强调重点：传统配色方案的优势之一是可以帮助设计师达到强调重点的效果。
通过合理的运用色彩，可以将关键信息或功能突出展示，提升用户体验。
五、适用场景和注意事项1.适用场景：传统配色方案适用于各行各业的网页设计，特别适合于需要表达传统、专业、稳定等特点的项目。
2.注意事项：在使用传统配色方案时，需要注意与品牌形象的一致性、用户体验的友好性，并对不同屏幕设备做好颜色适配等。
总结：通过分析深色系、明亮色系和自然色系等传统配色方案的特点和运用技巧，我们可以在网页设计中更加灵活地运用这些经典色彩组合。
网站配色方案与网页色彩搭配
1 分析：
紫色具有创造、谜、忠诚、神秘及稀有等内涵。象征着女性化，代表着高贵和奢华、优雅与魅力，也象征着神秘与庄重、神圣和浪漫。紫色通常被用于以女性为对象或以艺术品介绍为主的站点，但很多大公司的站点中也喜欢使用蕴含着神秘、尊贵和高尚的紫色。
2 搭配：
紫色加入少量的白色，就会成为一种十分优美、柔和的色彩。随着白色的不断加入，也就不断产生不同层次的淡紫色，可使紫色的沉闷性格消失，变得优雅、娇气，并充满女性魅力。
2、 在紫色中加入少量的黑，其感觉就趋于沉闷、伤感、恐怖。
3、 在紫色中加入白，可使紫色沉闷的性格消失，变得优雅、娇气，并充满女性的魅力。
六、白色的色感光明，性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。如果在白色中加入其它任何色，都会影响其纯洁性，使其性格变的含蓄。
1、 在白色中混入少量的红，就成为淡淡的粉色，鲜嫩而充满诱惑。
深蓝色是沉稳的且较常用的色调，能给人以沉稳、冷静、严谨和成熟的心理感受。它主要用于营造安稳、可靠及略带有神秘感的氛围，一般用于企业宣传类网站的设计中。
四、绿色
1 分析：
在商业网页设计中，绿色所传递的是清爽、理想、希望和生长的意象，较符合服务业、卫生保健业、教育行业、农业类网页设计的要求。绿色通常与环保意识有关，也经常使人联想到有关健康方面的事物。绿色与人类息息相关，是自然之色，代表了生命与希望，也充满了青春与活力。它生机勃勃，象征着生命。它本身具有特定的与自然、健康相关的感受，所以也经常被用于与自然、健康相关的站点。此外，绿色还经常用于一些公司的儿童站点或教育站点。绿色具有黄色和蓝色两种成分，绿色的性格最为平和、安稳，是一种柔顺、恬静、满足及优美的色彩。
一、红色
1 分析：
网页布局色彩搭配技巧
⽹页布局⾊彩搭配技巧⽹页设计的基础--⽹页布局正如您现在看到的，⽹页的布局变得越来越重要。
访问者不愿意再看到只注重内容的站点。
虽然内容很重要，但只有当⽹页布局和⽹页内容成功结合时，这种⽹页或者站点才是招⼈喜欢的。
缺任何⼀⾯你都⽆法留住太过“挑剔”的访问者。
⽹页布局的基本理念最开始⽹页呈现在你⾯前的时侯，它就好像⼀张⽩纸，它需要挥洒你的设计才华。
假如你知道什么是⼀种约定俗成的标准或者说⼤多数访问者的浏览习惯，那么你可以在此基础上加上⾃⼰的东西。
总结出来就是先锋在线⽹站制作⼈员对⽹页布局的设计理念：1.页⾯尺⼨：⼀般分辨率在800×600的情况下，页⾯显⽰尺⼨为780×428象素；分辨率在640×480的情况下页⾯显⽰尺⼨为620×311象素；分辨率在1024×768的情况下，页⾯显⽰尺⼨为1007×600。
分辨率越⾼页⾯尺⼨越⼤。
我们经常看到有的⽹页上的说明：本⽹页适合在1024×768分辨率下浏览...不要搞成这样！永远不要让浏览者调整分辨率去适应你的⽹页尺⼨，⽽是应该⾃动适应浏览者的分辨率尺⼨，这就是使⽤者(浏览者)优先原则。
浏览器的⼯具栏也是影响页⾯尺⼨的原因。
⼀般⽬前的浏览器的⼯具栏都可以取消或者增加，那么当你显⽰全部的⼯具栏时，和关闭全部⼯具栏时，页⾯的尺⼨是不⼀样的。
在⽹页设计过程中，向下拖动页⾯⼤概是惟⼀给⽹页增加更多内容(尺⼨)的⽅法。
但我想提醒⼤家除⾮你能肯定站点的内容能吸引⼤家拖动，否则不要让访问者拖动页⾯超过三屏。
虽然现在很多⿏标都有滚轮设计，但是⽹页的设计布局是越少⽤到⿏标越好。
2.整体形象：是图形与⽂本的结合应该是层叠有序的整体。
虽然，显⽰器和浏览器都是矩形，但对于页⾯的造型，你可以充分运⽤⾃然界中的其它形状以及它们的组合：矩形、圆形、三⾓形、菱形等轮廓。
对于不同的形状，它们所代表的意义是不同的。
⽐如矩形代表着正式，规则，你注意到很多ICP和政府⽹页都是以矩形为整体造型；圆形轮廓代表柔和，团结，温暖，安全等，许多时尚站点喜欢以圆形为页⾯整体造型轮廓；三⾓形、梯形代表着⼒量，权威，牢固，侵略等，许多⼤型的商业站点为显⽰它的权威性常以三⾓形为页⾯整体造型；菱形代表着平衡，协调，公平，⼀些交友站点常运⽤菱形作为页⾯整体造型。
网页布局结构与色彩搭配解析
二、色彩搭配的基本原理和常见搭配方式
3、对比度：对比度是衡量两种颜色在视觉上的差异程度。高对比度的颜色搭 配可以增强网页的视觉效果，但过多使用可能会使网页显得过于刺眼。
三、不同应用场景和需求下的色 彩搭配分析
三、不同应用场景和需求下的色彩搭配分析
1、新闻类网站：新闻类网站以传递信息为主要目的，要求色彩搭配简洁明了。 使用对比度较高的色彩搭配可以突出标题和重点段落，提高阅读体验。例如，黑 色和白色的对比搭配可以很好地突面内容。
四、总结
四、总结
网页布局结构与色彩搭配是网页设计的重要组成部分，对于提高用户体验和 提升网站质量具有关键作用。通过选择合适的布局结构和色彩搭配，能够使用户 更加愉悦地使用网站，同时也能更好地传递网站的信息和价值。
四、总结
希望本次演示的解析能对相关从业人员有所帮助，在未来的工作中注重布局 结构和色彩搭配的运用，为打造更加优秀、实用的网页提供支持。
四、实际操作案例
1、确定主题：该电商网站主要销售环保产品，主题为“绿色生活”。 2、确定色彩搭配方案：以绿色为主色调，搭配灰色和白色。绿色代表环保， 灰色和白色则可以营造出简洁、干净的视觉效果。
四、实际操作案例
3、应用色彩搭配方案：首页的背景色为淡绿色，产品图片使用深绿色，与背 景形成对比度，突出产品。标题文字使用白色，与背景色形成强烈对比，引导用 户视线。副标题和正文使用灰色，保持视觉上的平衡。
3、品牌官网：品牌官网是展示品牌形象的重要平台，色彩搭配要与品牌形象 保持一致。例如，对于科技品牌，通常使用蓝色、灰色等冷色调来营造一种专业、 可靠的形象；而对于儿童品牌，则可以使用较为鲜艳的色彩来传达一种活泼、有 趣的氛围。
四、实际操作案例
四、实际操作案例
网页颜色搭配表及颜色搭配技巧
网页颜色搭配表及颜色搭配技巧网页颜色搭配表及颜色搭配技巧颜色搭配常识：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橙色也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨，时尚的效果。
网页布局和配色设计配色小手册(基本)
很多设计师都会为色彩问题而烦恼,它们常常对色彩地理解与认识各抒己见,花费很多精力去讨论与研究色彩搭配地问题。
为了使设计师摆脱关于配色地困扰,越来越多地辅助配色工具开始出现,例如ColorImpact,ColorKey等等,这些软件都可以为设计师在色彩地搭配上提供好地帮助,使得设计师将更多地精力放在设计地其它部分,设计出更多精美地作品。
本章中介绍地ColorKey Xp软件就是一款人性化,科学化地交互式配色辅助工具。
4.1 熟悉软件功能ColorKey是由Quester主导开发,Blueedea.软件开发工作组测试开封地配色辅助工具,最新版本为ColorKey Xp Beat5,下载地址为http://pic1.blueidea./2003/09/627/CKXP.zip。
它可以使用户地配色工具变得更加轻松与更有乐趣,使用户地配色方案得以延伸与扩展,使用户地作品更加丰富与绚丽。
4.1.1 软件简介ColorKey 所采用地色彩体系（Color System）,是以国际标准地“蒙塞尔（Munsell）色彩体系“配色标准与Adobe标准地色彩空间转换系统为基准地。
程序采用了与标准图形图像设计软件兼容地色彩分析模式与独创地配色生成公式,使得一切色彩活动都严格控制与有矩可循。
程序在合理配色范围内也允许用户发挥自我调控能动性,使配色方案地生成更特色化与适应不同地需求。
程序按照蒙塞尔色彩体系地配色原理,对色彩地搭配进行了补色配合,同类色配合,对比色配合等不同分类,最新ColorKey Xp Beat5版本中扩展了对整体配色区域地色彩调整功能,使得设计者可以更大程度地控制色彩倾向,并为WEB色彩提供了WEB安全色接近模式。
新增了色彩配色方案地输出模式,修改了原有HTML输出地面貌,使色彩代码可以更好地显示与使用,籍由AI格式色彩配色方案输出扩展了 ColorKey 地适用范围,使它不仅仅仅仅仅仅能服务于网页色彩设计（RGB与HEX色彩描述）,也可以为专业图形图像色彩设计（CMYK色彩描述）提供辅助,并在多个设计师交流色彩方案时,有了一个方便地交换文件指导设计沟通。
网页配色与版式布局的设计
网页配色与版式布局的设计随着互联网技术的不断发展，人们的生活和工作方式都逐渐依赖于网络。
作为一个网站设计师，网页配色与版式布局的设计是非常重要的一项工作。
网页的外观设计很大程度上决定了用户的第一印象和留存率，因此网页配色和版式布局的设计缺一不可。
一、网页配色的设计网页配色是网页设计中的一个非常重要的环节，尤其在对于品牌网站而言。
网页配色包括网页背景色、文本颜色、链接颜色等等。
合理的网页配色可以提高用户体验度，增强品牌的辨识度和美观度。
1. 网页背景色网页背景色选择是网页设计中最基础的设计，对于网页整体风格的呈现起到至关重要的作用。
一般来说，选择浅色和中灰色的背景可以显得比较舒适，能够有效减小用户的视觉负担，避免斑驳感。
而过于鲜艳的颜色则会刺激到用户的视觉感官，导致视疲劳，从而降低用户体验度。
一般来说，可以根据网站内容和主题来选择相应的色彩。
2. 文字颜色网页文字的颜色选择也是非常关键的，一般来说，应该尽可能地保证文字颜色与背景颜色的对比度。
文字颜色也应该为浅色系，不过在有些情况下可以选择深色系作为重点标识或强调。
3. 链接颜色链接是网页中最需要用户点击浏览的部分，因此需要设置与其他文字不同的颜色以吸引用户的注意力。
点击后的链接颜色一般需要做出区分，建议使用比较醒目的颜色，以便用户得知自己已经浏览过的网页链接。
二、网页版式布局的设计除了网页配色外，版式布局对于网页设计来说也非常重要。
网页版式布局是一种以图形布局与排版设计为基础的方式，可以将一些不同易于用户理解的元素整合在一起，例如：导航、搜索、广告、邮件订阅等等。
网页版式布局可以增加网页的一致性和可视性，也可以提升用户的浏览质量。
1. 网页导航网页导航是网站的门户，也是用户进入网站的入口。
在独立网站中，网页导航需要尤其重视，因为其可以使用户更加快速地进入所需的内容，从而提高用户留存率。
网页导航布局要简单、清晰，提供易于使用的功能，如主菜单、子菜单、搜索功能、栏目分类等。
网页设计基础配色及页面排版布局
LOGO
Page 17
举例如下
让你想表达的内容清晰，醒目。让阅览者一开始就可以明白你的意思
避免使用不清晰的字体，否则容易使阅览者产生反感和麻烦 （除非你需要这种效果）
恰当的选择你所需要的字体
LOGO
Page 18
举例如下
但是，经过特别的处理，你可以使用一些本来并不合适的字体，比如
注意文字在编排时的方向，注意安排阅览者的视线
一开始好象总感觉文字
在这里面的表现力有些 苍白了。对主题的表达 没有什么帮助。那么试 一下改成这样行不行
LOGO
Page 29
总结 实例欣赏
· 网页设计颜色 1.广告图片、文字与整体网站风格的统一协调性
LOGO
Page 30
总结 实例欣赏
2.主题突出有很多方法，尽量少用大红大绿来体现突出 内（且 ）尽颜 量色 保不 证宜 在太 多 种 太 颜 花 色 哨 以 3
如果你不小心做成了这样（有意安排这种效果的不在此例）
LOGO
Page 27
在设计上要富于创造性
根据作品主题的要求，突出文字设计的个性色彩，创造
与众不同的独具特色的字体，给人以别开生面的视觉感受，有利于作者设 计意图的表现。设计时，应从字的形态特征与组合上进行探求，不断修改， 反复琢磨，这样才能创造出富有个性的文字，使其外部形态和设计格调都 能唤起人们的审美愉悦感受。 这是一个很普通的文字版面
颜色搭配案例
Page 31
01
02
03
LOGO
总结 实例欣赏
3.知道图片中心在哪里？
4.把平面做出动态来
LOGO
Page 32
总结 实例欣赏
5.发挥素材最大的利用率,文字也是有生命的
网页中的色彩及配色
网页中的色彩及配色
1.2 网页配色
HTML中的第二种表示颜色的方法是使用 RGB(R,G,B)表示，括号中的R、G、B分别用 0~255的十进制数或百分比表示红绿蓝，例如， RGB(255,0,0)或RGB(100%,0%,0%)都表示红色。 第三种方法，就是使用颜色的关键字表示， 共16个，如表所示。
网页中的色彩及配色
1.1 网页色彩
网页界面的首要功能是传递信息，色彩正是创造 有序的视觉信息流程的重要元素。 网页界面中利用色彩分布，可以将不同类型的信 息分类排布，并利用各种色彩带给人的不同心理效 果，很好地区分出主次顺序，从而形成有序视觉流 程。
网页中的色彩及配色
1.1 网页色彩
网页界面传递的信息内容与传递方式应该是相互统 一的，这是设计作品成功的必要条件。 网页界面中不同的内容需要不同的色彩来表现。 利用不同色彩自身的表现力、情感效应以及审美心 理感受，可以使网页的内容与形式有机地结合起来， 以色彩的内在力量来烘托主题、突出主题。
网页中的色彩及配色
1.2 网页配色
在网页配色中，还要注意一些误区： (1)不要在一个网页中使用过多的颜色，否则会给 浏览者以杂乱的感觉。 (2)背景色和前景色的对比要大，以便突出主要文 字内容。
网页中的色彩及配色
1.2 网页配色
在HTML中颜色表示的方法有3种，其中最常用的 是6位16进制的整数表示法。 例如bgcolor=#FF0000 其中#用于对颜色代码的声明，代码前面的FF表示 三原色中的红色，取值范围是16进制的00~FF，中 间两位即00表示三原色中的绿色，最后两位即00表 示蓝色，00表示没有颜色，FF表示颜色最强。 所以#000000表示黑色，#FFFFFF表示白色， #FF0000表示红色，#00FF00表示绿色，#0000FF表 示蓝色。
网页色彩搭配及版面布局
网页色彩搭配及版面布局网页色彩搭配及版面布局网页中最难处理的也就是色彩搭配的问题了。
如何运用最简单的色彩表达最丰富的含义，体现企业形象是网页设计人员需要不断学习、探索的课题。
下面是YJBYS店铺整理的网页色彩搭配及版面布局相关知识，希望对你有帮助!网页色彩搭配1、运用相同色系色彩：所谓相同色系，是指几种色彩在360°色相环上位置十分相近，大约在45°左右或同一色彩不同明度的几种色彩，如：，这种搭配的优点是易于使网页色彩趋于一致，对于网页设计新手有很好的`借鉴作用，这种用色方式容易塑造网页和谐统一的氛围，缺点是容易造成页面的单调，因此往往利用局部加入对比色来增加变化，如局部对比色彩的图片等。
这种方法不失为一种设计的好方法。
2、运用对比色或互补色：所谓对比色，是指色相环相距较远，大约在100°左右，视觉效果鲜亮、强烈，而互补色则是色相环上相距最远的连种色彩，即相距180°，其对比关系最强烈、最富有刺激性，往往使画面十分突出，如：，这种用色方式容易塑造活泼、韵动的网页效果，特别适合体现轻松、积极的素材的网站，缺点是容易造成色彩的花，使用中注意色彩使用的度。
值得注意的是，以上两种用色方式在实际应用中要注意主体色彩的运用，即以一种或两种色彩为主，其它色彩为辅，不要几种色彩等量使用，以免造成色彩的混乱。
3、使用过渡色：过渡色能够神奇地将几种不协调的色彩统一起来，在网页中合理地使用过渡色能够使你的色彩搭配技术更上一层楼。
过渡色包括几种形式：两种色彩的中间色调、单色中混入黑、白、灰进行调和以及单色中混入相同色彩进行调和等等，您可以自己尝试调配，在以后的更新中，我会专题介绍如何使用过渡色。
网页版面布局一般来说，企业网站首页的布局比较灵活，着重设计，这里我所说的布局主要是指内页的版面布局。
中、小型企业网站的内页布局一般比较简单，即内页的一栏式版面布局，从排版布局的角度而言，我们还可以设计成等分两栏式、三栏式、多栏式，不等分两栏式、三栏式、多栏式等等，但因为浏览器宽幅有限，一般不宜设计成三栏以上的布局。
简单优雅的网站颜色方案-黑白网页设计
简单优雅的网站颜色方案-黑白网页设计网页设计的世界里，黑白两色仿佛是最纯粹的语言，它们简洁、有力，又充满无穷的变化。
今天，就让我们一起探索这个简单而优雅的黑白网页设计方案。
一、设计理念在设计之初，我们明确了这样一个核心理念：用最少的颜色，传达最丰富的情感和信息。
黑白两色，看似对立，实则互补，它们共同构筑了一个平衡、和谐、高级的视觉体验。
二、颜色搭配1.黑色背景黑色，作为网页的背景色，给人一种稳重、深邃的感觉。
它既能突出白色文字和图像的鲜明对比，又能营造出一种神秘、专业的氛围。
2.白色主体白色，作为网页的主体色，它纯净、简洁，让人眼前一亮。
我们将白色应用于文字、图像、导航栏等元素，使其成为视觉焦点。
3.灰色辅助灰色，作为黑白的过渡色，它既不会抢走黑白的视觉焦点，又能增加层次感。
在网页设计中，我们用灰色来表示辅助信息，如注释、标签等。
4.亮色点缀在黑白灰的基础上，我们可以适当地加入一些亮色，如红色、蓝色、绿色等，作为点缀。
这些亮色既能活跃氛围，又能引导用户关注重要信息。
三、布局设计1.简洁的导航栏导航栏作为用户浏览网页的重要工具，我们将其设计得简洁明了。
黑色背景上，白色文字清晰可见，灰色图标点缀其间，既美观又实用。
2.突出的是网页的核心内容，我们采用大号白色文字，搭配黑色背景，使其具有强烈的视觉冲击力。
同时，灰色辅助文字和保持一定的间距，层次感分明。
3.清晰的版式在版式设计上，我们遵循简洁、对称的原则。
黑色、白色、灰色三种颜色交替出现，形成一种视觉节奏。
同时，留白的设计使得整个网页看起来更加透气、舒适。
4.丰富的内容在内容呈现上，我们采用图文结合的方式。
白色文字搭配高质量的黑色或灰色图像，既保证了信息的传达，又增加了视觉美感。
四、交互设计1.清晰的按钮按钮作为用户与网页交互的重要元素，我们将其设计得简洁明了。
黑色背景上，白色文字搭配灰色图标，清晰可见，易于。
2.动态效果为了增加网页的趣味性，我们可以加入一些动态效果。
页面设计配色技巧-网页色彩搭配技巧-怎么配色
页面设计配色技巧-网页色彩搭配技巧-怎么配色在进行〔网页〔制定〕〕时，可以使用的页面色彩搭配技巧有这些：1.使用近邻色，可以避免色彩杂乱，使得页面层次分明;2.使用对比色，用对比色来点缀和丰富页面，可以起到画龙点睛的作用。
1. 使用近邻色相邻色指的是色环中相邻、相近的颜色，既可以是相近的两种颜色，也可以是相隔的几种颜色，但相隔的颜色最多不能超过五种。
例如，蓝色和紫色，红色和黄色等颜色。
利用相邻的颜色来制定页面，可以使页面的色彩搭配更加方便，也可以避免色彩杂乱，使得页面层次分明，整体页面效果更容易达到和谐统一。
2. 使用对比色所谓对比色是指色环相差不到180度的两种颜色，互相之间的角度越大，意味着对比度越大。
例如，蓝色和橙色，红色和绿色，以及紫色和黄色等。
通过合理地运用对比色，可以使页面与众不同，给浏览者带来生动的视觉效果，并特别页面的重点，吸引浏览者进一步浏览，更深入地了解本网站的信息。
在制定页面制定中，一般以一种颜色为主色调，用对比色来点缀和丰富页面，可以起到画龙点睛的作用。
3. 使用黑色黑色是一种经典的颜色，也是一种神秘的颜色，它含有攻击性，但它在邪恶中也隐藏着优雅，在沉稳中也包涵着威严，它与力量密不可分，它是最具表现力的颜色，激烈而鲜亮。
因此，当黑色与鲜亮多变的排版相结合，再加上对比色和辅助色，页面就会有一种独特而鲜亮的质感。
黑色的页面制定往往能顺利地掩盖一些缺陷，并能特别一些内容和效果。
4. 使用背景色一般来说，应使用素雅的颜色作为背景色，避免使用复杂的图片图案和高纯度的颜色，背景色的颜色应与页面的主色调相协调，背景色的目的是为了辅助主色调，丰富页面制定的整体性。
因此，背景色不应该使用纯度太高的颜色。
如果为了美化页面而使用一些颜色过于复杂的图片，那么不仅会使页面华而不实，而且会混淆受众，不容易特别重点。
同时，应该注意的是，背景色要与文字的颜色形成激烈的对比，这样才干特别文字，从而特别页面的主题。
网页配色方案大全
警告提醒语句的颜色 #000000
配色方案三 (西瓜红色):
浏览器边框颜色 #ffe1f0
顶部菜单表格背景(深背景) #ffe1f0
顶部菜单表格背景(浅背景) #fff4fa
表格边框颜色一 #ff51b0
表格边框颜色二 #ff8cc6
配色方案十 (紫色):
浏览器边框颜色 #f8dcf8
顶部菜单表格背景(深背景) #f8dcf8
顶部菜单表格背景(浅背景) #fff0ff
表格边框颜色一 #983498
表格边框颜色二 #d890d8
标题表格颜色一（深背景） #f8dcf8
标题表格颜色二（浅背景） #fff0ff
顶部菜单表格背景(浅背景) #fff9f7
表格边框颜色一 #ff8e68
表格边框颜色二 #ffa98c
标题表格颜色一（深背景） #ffe9e1
标题表格颜色二（浅背景） #fff9f7
表格体颜色一 #fff9f7
表格体颜色二(1和2颜色在首页显示中穿插) #ffe9e1
表格标题栏字体颜色 #9b2700
标题表格颜色一（深背景） #ffe1f0
标题表格颜色二（浅背景） #fff4fa
表格体颜色一 #fff4fa
表格体颜色二(1和2颜色在首页显示中穿插) #ffe1f0
表格标题栏字体颜色 #bf0069
表格内容栏字体颜色 #bf0069
警告提醒语句的颜色 #602060
表格内容栏字体颜色 #151595
警告提醒语句的颜色 #602060
配色方案十二（淡蓝色）：
浏览器边框颜色 #e8f0ff
第二章网页布局和色彩搭配
网站布局
网页布局的标准 美观、适用 1、网页中的基本元素 (1)网站标志LOGO LOGO的大小：88*31、120*60、120*90 (2)网站导航(一组超链接，帮助访问者快速准确地浏览网站) 原则：简洁，容易操作 位置：顶部或左侧 常用的方式：悬停式 (3)网页的主体内容 注意视觉流程原理、文图结合、动静结合、松紧适当
密集构成形式
把基本形态按密集与疏散、虚与实、向心与扩展等方式进行构成的形式称为密集构成 形式。它具有方向性和目的性的运动特征。在这种形式的构图中，元素最密集的地方 和最稀疏的地方均为视觉的焦点
发射构成形式
以一点或多点为中心，呈向周围发射、扩散等视觉效果，具有较强的动感及节奏感。 格线和基本形呈发射状的构成形式，称为发射构成。此种类的构成，是骨格线和基本 形用离心式、向心式、同心式以及几种发射形式相叠而组成的
肌理构成形式
肌理是物质表面的形态，通常是指物体表面的纹理感觉。它具有粗糙、细腻、柔软、 生硬、干燥、湿润等特性，既有自然形态的肌理(如水波纹、木纹、树叶纹等)，也有 人为形态的肌理(如布纹、墙纸等)。在网页设计中，大部分情况下可作为网页的背景 出现在页面设计中，使用适当的肌理作为背景图案，将起到很好的视觉调节作用
偶然形面是在现实生活中偶然获得的一种视觉形态。在平面设计领域大部分偶然形面 是通过特殊技术手段（如绘图软件中的滤镜或毛笔绘制）获得的。它表现出来的是一 种自然的、无序的形态，有着丰富的象征意义
构成的形式
（1）重复构成形式
重复构成是指用同一形态或同组形态有序地反复出现，形成某种规律的构图形式。重 复构成具有强化记忆的功能，反复地出现会不断地加强视觉冲击，加深形象认识
网页配色方案设计
网页配色方案设计在网页设计过程中，配色方案的选择是至关重要的。
一个好的配色方案可以提升用户体验，增加网页的视觉吸引力，并传达出正确的品牌形象。
本文将介绍一些常用的网页配色方案和设计原则，并分享一些实用的配色工具供参考。
一、配色方案的选择1. 单一色调配色方案单一色调配色方案是指围绕一个主色调来设计网页的配色方案。
这种方案简单、干净，给人以整洁明快的感觉。
主色调可以根据品牌形象、网页内容和行业特点来选择。
在设计中，可以使用不同的亮度和饱和度来创造层次感和视觉效果。
2. 对比色配色方案对比色配色方案是指将两种互补色或者相对亮度、饱和度对比明显的颜色进行搭配。
这种配色方案能够产生强烈的视觉对比，使网页元素更加醒目。
对比色可以用于按钮、链接和重要信息的突出展示。
3. 类似色配色方案类似色配色方案是指将相邻的色调进行搭配，由于色调接近，给人以和谐、舒适的感觉。
这种配色方案适用于需要温暖、亲切氛围的网页设计，比如儿童教育、健康生活等领域。
4. 渐变色配色方案渐变色配色方案是指通过将两种或多种颜色进行平滑过渡来营造出渐变效果。
渐变色在网页设计中可以用于背景、按钮和突出元素的设计，给人以柔和、华丽的感觉。
这种配色方案可以通过线性渐变、径向渐变或者角度渐变来实现。
二、设计原则1. 保持简洁在进行网页配色设计时，要尽量保持简洁，避免使用过多的颜色。
一个简洁的配色方案能够让用户更容易理解信息，提高页面的可读性和可导航性。
2. 追求对比对比是网页设计中常用的一种方式，可以通过对比色、明暗对比和大小对比等来吸引用户的注意力，突出重要内容。
对比的使用要恰到好处，避免过度使用导致视觉疲劳。
3. 保持一致性在整个网页中要保持一致的配色方案，避免大面积的颜色变化。
一致的配色方案能够给用户提供良好的视觉体验，增加网页的可信度和专业感。
三、实用的配色工具1. Adobe ColorAdobe Color 是一款在线的配色工具，提供了多种配色方案的选择和自定义调整的功能。
网页设计颜色搭配表
平面设计颜色搭配表平面设计颜色搭配表最佳颜色搭配一、色彩处理色彩是人的视觉最敏感的东西。
主页的色彩处理得好，可以锦上添花，达到事半功倍的效果。
色彩总的应用原则应该是“总体协调，局部对比”，也就是：主页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。
在色彩的运用上，可以根据主页内容的需要，分别采用不同的主色调。
因为色彩具有象征性，例如：嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征着春、夏、秋、冬。
其次还有职业的标志色，例如：军警的橄榄绿，医疗卫生的白色等。
色彩还具有明显的心理感觉，例如冷、暖的感觉，进、退的效果等。
另外，色彩还有民族性，各个民族由于环境、文化、传统等因素的影响，对于色彩的喜好也存在着较大的差异。
充分运用色彩的这些特性，可以使我们的主页具有深刻的艺术内涵，从而提升主页的文化品位。
下面介绍几种常用的配色方案：1.暖色调。
即红色、橙色、黄色、赭色等色彩的搭配。
这种色调的运用，可使主页呈现温馨、和煦、热情的氛围。
2.冷色调。
即青色、绿色、紫色等色彩的搭配。
这种色调的运用，可使主页呈现宁静、清凉、高雅的氛围。
3.对比色调。
即把色性完全相反的色彩搭配在同一个空间里。
例如：红与绿、黄与紫、橙与蓝等。
这种色彩的搭配，可以产生强烈的视觉效果，给人亮丽、鲜艳、喜庆的感觉。
当然，对比色调如果用得不好，会适得其反，产生俗气、刺眼的不良效果。
这就要把握“大调和，小对比”这一个重要原则，即总体的色调应该是统一和谐的，局部的地方可以有一些小的强烈对比。
最后，还要考虑主页底色（背景色）的深、浅，这里借用摄影中的一个术语，就是“高调”和“低调”。
底色浅的称为高调；底色深的称为低调。
底色深，文字的颜色就要浅，以深色的背景衬托浅色的内容（文字或图片）；反之，底色淡的，文字的颜色就要深些，以浅色的背景衬托深色的内容（文字或图片）。
这种深浅的变化在色彩学中称为“明度变化”。
有些主页，底色是黑的，但文字也选用了较深的色彩，由于色彩的明度比较接近，读者在阅览时，眼睛就会感觉很吃力，影响了阅读效果。
网页设计常用色彩搭配表配色表
本节将网页设计中常见的色彩搭配按照色相的顺序归类。
每类都以该色相为主，配以其他色相或者同色相的，应用对比和调和的方法，并按照从轻快到浓烈的顺序排序。
色彩搭配看似复杂，但并不神秘。
既然每种色彩在印象空间中都有自己的位置，那么色彩搭配得到的印象可以用加减法来近似估算。
如果每种色彩都是高亮度的，那么它们的叠加，自然会是柔和、明亮的；如果每种色彩都是浓烈的，那么它们叠加，就会是浓烈的。
当然在实际设计过程中，设计师还要考虑到乘除法，比如同样亮度和对比度的色彩，在色环上的角度不同，搭配起来就会得到千变万化的感觉。
因此本书除了要列举出按色相的搭配，也要将印象作为重点的搭配分类列举出来，以供读者参考。
亮度高的色彩搭配在一起就会得到柔和、明亮、温和的感觉。
为了避免刺眼，设计师一般会用低亮度的前景色调和，同时色彩在色环之间的距离也有助于避免沉闷。
对于柔和、清洁、爽朗的印象，色环中蓝到绿相邻的颜色应该是最适合的。
并且亮度偏高。
可以看到，几乎每个组合都有白色参与。
当然在实际设计时，可以用蓝绿相反色相的高亮度有彩色代替白色。
可爱、快乐、有趣印象中的色彩搭配特点是，色相分布均匀，冷暖搭配，饱和度高，色彩分辨度高。
#66CCCC#CCFF66#FF99CC#FF9999#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#CCCC33#FF9933#FFFFCC#009933#0099CC#CCCCCC#FF6666#FF6600#FFFF66#009966#CC6633#FFCC99#CC6600#CC0066#009999#FFCC33运动的色彩要强化激烈、刺激的感受，同时还要体现健康、快乐、阳光。
web配色方案
Web配色方案1. 简介在设计Web页面时，配色方案是至关重要的，它能够影响用户对网站的第一印象，提升用户体验。
本文将介绍几种常见的Web配色方案，并提供一些实用的建议。
2. 基本原则在选择Web配色方案之前，我们需要了解一些基本原则。
2.1 色轮理论色轮理论是指将颜色按照特定次序组合成一个圆环，在这个圆环上相互靠近的颜色具有一定的关联性。
常见的方式有：•三原色配色方案：基于红、绿、蓝三个原色的配色方案，可产生丰富的色彩。
例如，蓝色和黄色可产生绿色。
•互补色配色方案：选择彼此相对的颜色进行搭配，使得对比强烈，例如红色和绿色。
•相似色配色方案：选择相邻的颜色进行搭配，使得整体色调和谐。
例如橙色和黄色。
2.2 色彩对比在Web设计中，色彩对比是非常重要的，它可以决定页面内容的易读性。
选择对比度高的配色方案能够提高用户的阅读体验。
对比度可以通过以下方式来衡量：•亮度对比：将颜色转换成灰度，并比较颜色间的亮度差异。
•色彩对比：比较颜色在色轮中的位置，确保彼此之间有足够的色彩差异。
2.3 色彩心理学色彩心理学研究了不同颜色对人们情绪和行为的影响。
在Web设计中，选择适当的配色方案可以引发用户的情感共鸣，增强页面的吸引力。
一些常见的色彩心理学理论包括：•红色：代表激情、力量和紧张感。
•蓝色：代表平静、和谐和信任。
•绿色：代表自然、健康和安全感。
3. 常见的Web配色方案3.1 单色配色方案单色配色方案是最简单且常见的配色方案之一。
它基于一个主色调，并在不同亮度和饱和度下使用该颜色。
该方案具有简洁、统一和专业的特点。
以下是一些常见的单色配色方案：•蓝色单色方案：不同亮度的蓝色搭配，适合展现科技、信任和可靠性。
•橙色单色方案：不同亮度的橙色搭配，适合展现创新、活力和温暖。
•紫色单色方案：不同亮度的紫色搭配，适合展现优雅、神秘和独特。
3.2 对比配色方案对比配色方案基于不同颜色之间的对比度，使得页面内容更加明确和突出。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
很多设计师都会为色彩问题而烦恼，他们常常对色彩的理解和认识各抒己见，花费很多精力去讨论和研究色彩搭配的问题。
为了使设计师摆脱关于配色的困扰，越来越多的辅助配色工具开始出现，例如ColorImpact、ColorKey等等，这些软件都可以为设计师在色彩的搭配上提供好的帮助，使得设计师将更多的精力放在设计的其他部分，从而设计出更多精美的作品。
下面介绍的ColorKey Xp软件就是一款人性化、科学化的交互式配色辅助工具。
4.1 熟悉软件功能ColorKey是由Quester主导开发，软件开发工作组测试发行的配色辅助工具，最新版本为ColorKey Xp Beat5，下载地址为/2003/ 09/627/CKXP.zip。
它可以使用户的配色工具变得更加轻松和更有乐趣，使用户的配色方案得以延伸和扩展，使用户的作品更加丰富和绚丽。
4.1.1 软件简介ColorKey 所采用的色彩体系（Color System），是以国际标准的“蒙塞尔（Munsell）色彩体系“配色标准和Adobe标准的色彩空间转换系统为基准的。
程序采用了和标准图形图像设计软件兼容的色彩分析模式和独创的配色生成公式，使得一切色彩活动都严格控制和有据可循。
程序在合理的配色范围内也允许用户发挥自我调控的能动性，使配色方案的生成更加特色化和适应不同的需求。
程序按照蒙塞尔色彩体系的配色原理，对色彩的搭配进行了补色配合、同类色配合、对比色配合等不同分类，最新的ColorKey Xp Beat5版本中扩展了对整体配色区域的色彩调整功能，使得设计者可以更大程度地控制色彩倾向，并为Web色彩提供了Web安全色接近模式。
新增了色彩配色方案的输出模式，修改了原有HTML输出的面貌，使色彩代码可以更好地显示和使用。
通过使用AI格式色彩配色方案输出扩展了ColorKey 的适用范围，使它不仅能服务于网页色彩设计（RGB及HEX色彩描述），也可以为专业的图形图像色彩设计（CMYK色彩描述）提供辅助，并在多个设计师交流色彩方案时，有了一个方便的交换文件指导设计沟通。
目前该最新测试版只提供了配色中难度较大的和最能让色彩作品有光彩的“补色配合方案”。
4.1.2 软件基本功能ColorKey Xp是一款简单易用的配色软件，接下来针对软件的操作界面、色彩控制面板、外部拾色器和输出功能等几方面全方位介绍其基本的使用方法。
ColorKey Xp操作界面安装ColorKey Xp之后，可以在桌面上看到ColorKey Xp软件的快捷图标，如图1所示。
双击该图标可以打开ColorKey Xp 软件。
或者在开始菜单中找到相应的程序单击打开，如图2所示。
图1 双击桌面图标 图2 单击程序菜单 进入软件，首先看到的是选择界面，目前“另类锋芒”版本在体验版中还没有发布内容，我们单击“传统经典”按钮，如图3所示。
进入软件操作界面，如图4所示。
图3 选择界面 图4 软件操作界面 软件界面左上角显示当前操作的文字说明或解释。
界面右上角分别是“返回开始菜单”按钮和“关闭”按钮。
左下角为功能按钮。
界面中间左侧显示的19个六边形色块是软件的配色区域。
其中正中间的色块为主色块，是用户可以自定义色彩的，而其他色块将图5 界面分解 ColorKey Xp 色彩控制面板操作界面有色的4个色彩控制面板，其中调整配色限制阈值面板和整体色彩偏移面板提供了配色调整的高端功能。
善用细节调整，可以获得更好更灵活的配色方案。
功能按钮具体介绍如下：RGB 色彩调节器面板可以通过拖动滑块或者直接输入数值来产生RGB 色彩。
在色彩条上单击鼠标，也可使滑块迅速移动到单击位置。
在调节器左侧的色彩方块中可以及时浏览当前所配的颜色，单击该颜色块，可以将当前调配的色彩显示在六边形主色块上。
调整配色限制阈值面板中显示的是默认设置，用户如果想要得到更多样化的组合，可以调整色彩HSB 参数或者使用其他选项按钮。
整体色彩偏移面板可以使整个配色区域的颜色都向一个方向偏移。
“全部为Web安全色”选项相信对许多网页设计者比较实用。
Web 颜色调节面板完全展开时，可以提供256种网络安全色。
另外，用户还可以通过该面板底部的“Web 颜色”文本框来输入或者粘贴色彩值。
ColorKey Xp 外部拾色器在操作界面中单击“启动外部拾色器”按钮，弹出“外部拾色器面板”，如图6所示。
在打开的外部拾色器面板中单击“吸管”图标，就可以在屏幕范围内自由吸取所需要的色彩，如图7所示。
图6 外部拾色器面板 图7 拾色效果在面板上单击鼠标右键，在弹出的菜单中可以选择不同的色彩代码格式，如图8所示。
在ColorKey Xp 的RGB 文本框中输入RGB 数值，然后单击“刷新配色”按钮，即可在色彩六边形中显示新的配色方案，如图9所示。
图8 选择不同的色彩代码格式图9 创建新的配色方案如果对颜色明暗度不满意，可以通过单击“整体色彩偏移”面板上的调整按钮，获得更好的配色效果，如图10所示。
单击“接近补色”按钮，可以改变配色的方案，或者补色配色方案。
如果是为网页设计制作方案，可以通过单击“全部为Web安全色”按钮，将颜色转换为Web安全色，如图11所示。
图10 提高色彩亮度图11 获得补色的Web安全色ColorKey Xp的输出功能此软件中色彩文件的输出功能，使得设计师在团体工作时就色彩意见沟通和色彩信息共享方面有了一个可以通用的简单的解决方案。
通过共享色彩配置文件可以让团队内的色彩设计有一个统一的标准。
单击操作界面中的“输出配色方案”按钮，弹出“配色文案文件输出选项”对话框，如图12所示。
选择输出HTML格式配色文件或者AI格式配色文件，单击“输出文件”按钮，如图13所示。
图12 选择输出格式图13 输出文件过程将方案发布为HTML格式，使用IE浏览器打开，效果如图14所示。
将方案发布为AI格式，使用Illustrator打开，如图15所示。
图14 发布为HTML格式图15 发布为AI格式4.2 网页配色案例——汽车网站颜色搭配按照常理来说，汽车类网站的配色较为单调，一般都是使用较为神秘和高贵的黑色或者银色作为主色调。
但是随着年轻一代的成长，越来越多的主打时尚品牌的汽车厂商，开始将汽车的主要用户指向了年轻一代，这也就使得网站的配色也呈现出了多样性，如图16所示。
图16 配色案例效果步骤1设计网站页面之前，首先要根据网站的行业分类来决定整个页面的色调，本案例将设计一个汽车类的时尚网站，所以将选择色彩较为鲜艳的颜色作为主色，使用Photoshop 创建一个新文件，如图167所示。
设置前景色为#cd0e13，为画布填充，如图178所示。
图167 新建网页文档图18 填充主色步骤2 为了增加页面的层级感，一般情况下不会直接使用纯色作为背景。
会使用渐变颜色增加页面的空间和层次感。
在“渐变编辑器”中分别降低和提高颜色的亮度，制作线性渐变效果，如图189所示。
并为画布填充颜色，如图20所示。
图179 设置渐变颜色图20 填充渐变效果步骤3启动ColorKey Xp，在“色彩调节器”中输入颜色值# cd0e13，按下回车键，如图191所示。
单击“刷新配色”按钮，得到一个配色方案，如图202所示。
图181 选定主色图192 选择配色方案步骤4单击整体色彩偏移面板上的“接近主色”按钮，单击“刷新配色”按钮，得到如图213所示的方案。
单击其中一个色块，记下其颜色值为#f38400，如图224所示。
图203 调整颜色方案 图214 记下颜色数值步骤5 打开标尺，从标尺中拖曳出辅助线，用来定位网站的格局，如图235所示。
图225 辅助线定位步骤6设置“前景色”为“步骤4”中的颜色，使用“圆角矩形工具”绘制如图246所示的图形。
使用相同的方法绘制色块，并使用中性色（也就是白色）绘制色彩，效果如图257所示。
图236 绘制图形 图247 绘制图形 步骤7 设置“前景色”为白色，使用“矩形选框工具”绘制矩形，制作网页的头部导航，效果如图268所示。
为所有形状图层添加“描边”样式，效果如图279所示。
图258 添加描边效果图269 添加图层样式步骤8此处选择描边颜色时，尽量选择页面中已有的颜色，例如暗红色#ae0c0f，描边效果如图30所示。
选择跟页面中颜色色调一致的素材图片作为装饰，效果如图281所示。
图30 描边效果图271 全部描边效果步骤9导入网站的Logo，并输入二级导航内容，如图292所示。
继续设置页面中的文字部分，注意文字的颜色要尽量在主色和辅色中选择，完成效果如图303所示。
图282 插入图片图293 添加部分文字步骤10为页面中橙色部分添加文字，依然从现有颜色中选择，继续设置页面中的文字部分，注意文字的颜色要尽量在主色和辅色中选择，完成效果如图314所示。
图304 继续辅助添加颜色步骤11同样的配色方法，输入其他辅助的图片和版底信息，完成页面效果如图35所示。
图315 最终配色效果4.3 平面广告配色案例——洗发水配色案例在设计行业中颜色搭配一直贯穿始终，本案例将根据一张主题图确定广告的各种配色。
要确定行业的主色调，首先要根据不同的广告内容确定。
洗发水广告可以选择蓝色、绿色或者紫色作为主色调，如图36所示。
图36 配色案例效果步骤1 首先打开制作广告的主题图像，效果如图327所示。
将背景图层复制一个，如图338所示。
图327 打开主题图图338 复制图层步骤2 执行“色相/饱和度”命令，调整图像色调，效果如图349所示。
为“背景副本”图层添加图层蒙版，如图40所示。
图349 调整图像色调图40 添加蒙版步骤3 使用“剪切工具”对图像剪切，调整图像构图，效果如图41所示。
返回ColorKey Xp软件，单击“启动外部拾色器”按钮，如图42所示。
图41 调整构图图42 启动外部拾色器步骤4 在人像中范围最广的青色部分单击，取样效果如图43所示。
将数值输入到数值框中，效果如图44所示。
图43 颜色取样图44 选择主色步骤5 单击“刷新配色”按钮，得到配色方案，如图45所示。
使用“钢笔工具”绘制路径并转化为选区，使用配色方案颜色填充，效果如图46所示。
图45 选择配色方案图46 添加装饰条步骤6同样的方式填充另外两种颜色，采用中性色白色和灰色填充，效果如图47所示。
加入产品图像和商标文字，效果如图48所示。
图47 添加辅助色图48 添加商标和文字步骤6使用文本工具，分别使用白色和灰色输入主题文字，突出效果，完成页面效果如图49所示。
图49 最终配色效果。