颜色搭配的讲解

4.3.3　色彩的搭配

在网站开发中，为了使得整个布局显示出非常理想的效果，我们必须对所有布局要素进行色彩搭配。我们使用的颜色表示方法是6位16进制数展示，每两位表示三原色中的一种，每种三原色可以由0～255中任何一个数表示，这样一共能组合出的颜色是255×255×255=16 581 375种。

什么是Web安全色(W ebcolors)

同样的颜色代码在不同的软件，硬件平台显示的颜色效果不一定是一样的。比如，PC机和苹果机支持的256颜色不完全一致，只有216种是一样的，这216色就是Web安全色的由来。这216种颜色是在不同硬件环境、不同操作系统、不同浏览器都能正常显示的颜色。用216安全色配色可以避免颜色失真。

安全色的16进制表示是: 00，33，66，99，CC，FF。而十进制表示是0，51，102，153，204，255。对于由三原色表示的颜色代码，必须红绿蓝同时为安全色的时候我们才认为该颜色是安全色。因此，颜色代码#FFCC33是安全色，而#AABBCC不是安全色。

216色在显示高精度的渐变效果或是真彩色图像照片时有一定的欠缺，但是对于徽标或者二维平面的显示是绰绰有余的。

十六进制的三原色表示颜色的方法并不能体现出色彩的三属性。因此我们无法根据色彩的三属性进行颜色的搭配。不过幸运的是，互联网上有许多专门用于网页布局配色的工具，这些配色工具甚至能够根据我们制定好的某种色相、亮度和饱和度的颜色，根据许多经验的模式，傻瓜式的生成出我们需要与之搭配的颜色代码。

在此，我们介绍一款优秀的配色工具color scheme。

它在互联网的地址为http://wellstyled.com/tools/colorscheme/index-en.html^[2]。

图4-1　调色工具color scheme

左侧是一个色相环，下侧显示当前颜色，在色相环上点击鼠标可以改变当前颜色的色相。拖动色相环右侧上下的brightness和saturation分别改变当前的亮度和饱和度，当然也可以直接在左下方手工填写色相、亮度和饱和度的比例。在右上方有一个搭配色选择的设定，选项有monochromatic(单色搭配)，contrast(强烈对比搭配)，soft contrast(一般对比搭配)，double-contrast(两类似色+一对比色搭配)，analogic(类似色搭配)。右侧会根据选中的当前颜色和搭配色选项自动分析出搭配效果比较好的多种颜色的十六进制代码。