网页布局和配色设计——配色小手册(综合)

很多设计师都会为色彩问题而烦恼，他们常常对色彩的理解和认识各抒己见，花费很多精力去讨论和研究色彩搭配的问题。为了使设计师摆脱关于配色的困扰，越来越多的辅助配色工具开始出现，例如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所示。