网页配色方法探讨

平面教程：网页配色方法探讨

教程思路

1.合理安排网站颜色

2.学习网页制作的一些关于颜色方面的参考
3.几种典型配色方案

4.在线配色器

5.培养网页设计色感

一.合理安排网站颜色
        很多网站设计者忽视了网站颜色的重要性，其实颜色应该成为网站设计需要考虑的首要因素。如果没有认真考虑颜色设计，网站会很没有特色，并且可能会很混乱，让用户感到厌烦。网站颜色一定要精心挑选。
        然而，很多浏览器只能呈现256种颜色，并且不同的浏览器，呈现出的256种颜色也不同，通常这些浏览器只能共享216种颜色。设计网站重要内容时，应该运用这216种颜色。

        如果利用浏览器中不存在的颜色（此216种颜色以外的颜色），浏览器会混合这些颜色，这些颜色会出现小圆点，浏览器会显示出一种与其相近的颜色，这种现象称为抖动。一些显示器会扭曲这些圆点，图片就会失真。如果出现这种情况，文章就会难以阅读，所以利用纯色作为设计元素时，使用浏览器安全色（216种颜色）。有时，即使是网络安全色，也要谨慎利用。

        眼睛使用时间太长，容易产生视觉疲劳。眼睛后方，存在一种包含数百万感光神经细胞的薄层组织，我们称之为杆状细胞、圆锥细胞。圆锥细胞可以对特殊波长的光产生反应，当观看红盒子时，眼睛容易产生疲劳感，这时，与其相对的圆锥细胞就会出现，因此会看到蓝绿光。这个原理可以应用于网站设计中。

        警告标志通常为黄色的，因为黄色光首先进入视线，所以浏览者会首先关注黄色。利用这种颜色设计的广告，会吸引用户的注意，但是，建议不要过多使用此种颜色。访问者登录后，网站没有必要采用明亮的颜色，否则用户会产生反感。如果访问者已经在浏览网站，这就证明设计很成功。
        网站中避免出现太多的黄色、红色内容，这些颜色应该只出现在需要用户关注的内容中，否则用户会感到视觉疲劳，他们就不会长时间浏览网站。颜色不应该成为访问者离开网站的原因。

二.颜色参考
        在HTML里，颜色有两种表示方式。一种是用颜色名称表示，比如blue表示蓝色。另外一种是用16进制的数值表示RGB的颜色值。RGB是Red，Green，Blue意思，RGB每个原色的最小值是0，最大值是255，如果换算成16进制表示，就是(#00)，(#FF)。比如白色的RGB(255,255,255)，就用#FFFFFF表示；还有黑色的RGB(0,0,0)，就用#000000表示。
注：在W3C制定的HTML 4.0标准中，只有16种颜色可以用颜色名称表示(aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow)，其它的颜色都要用16进制RGB颜色值表示。

        当然，现在的浏览器支持更多的颜色名称。不过为保险起见，建议还是采用16进制RGB颜色值来表示颜色。并且在值前加上#这个符号。
为了方便大家找到合适的颜色，我们在这里列了一些颜色说明，以供大家参考，不妨作为一种速查工具。

1. Web安全颜色
        以前，很多电脑显示器最多支持256色，因此出现了216种Web安全颜色，以保证网页的颜色能够正确显示。
        那为什么不是256种Web安全颜色呢？因为Microsoft和Mac操作系统有40种不同的系统保留颜色。
        以下为216种Web安全颜色：

 2.微软支持的颜色
        下面是微软IE4.0以上都支持的颜色名称：

三.几种典型配色方案
        这里以韩国网站为例来说明。韩国网站的配色多以蓝色、桔黄色为多，原因是这2个颜色的组合最为丰富。

四.在线配色器
        在web站点设计中，对网页进行配色通常是设计师的直觉感受或者多次反复实验：例如对网页颜色主色彩的选择，考虑各种颜色的色调、饱和度，等等...，最终才能达到比较好的配色效果。
        现在，网络上有一些专用于配色设计的调色板工具，对网页配色设计都很有价值。
使用方法的简要说明如下：
1. 选择基色
        在配色前，在左侧的调色板中先选择一个基色（Base color），选择基色也很有讲究，调色版为我们划分了暖色(warm)和冷色(cold)两种色调，并依此进行了更精确的数值区分（直接对基色微调按钮进行操作）。

2. 选择配色方案
        在Scheme的选择菜单中可以选择多种方案进行配色，具体有：单色配色、对比色配色（基色加补色）、可调整的对比色配色（可以调整Distance参数对补色进行微调）、双对比色（两个比较接近的颜色及它们所对应的补色）、类似色（基色和它相接近的颜色）。
a. 单色配色方案(monochromatic)：如果整个网页配色由一些单一颜色渐变组成，这个方案是不错的选择。
b. 对比色配色（contrast）:原理是为基色增加与其色差比较大的几种对比色。如果整个网页的色彩反差比较大，并且形成反差的颜色数量不是很多，推荐用这种方案。
c. 可调整的对比色配色（soft contrast）：参照b方案，可以进一步调整各对比色与基色的色差，方法是调节Distance参数。
d. 双对比色（double contrast）：两个比较接近的颜色及它们所对应的对比色（4个一组），为基色增加一个相近颜色，同时调节出这两种颜色的对比色，如果将Distance调节至0，将只看到2个一组的对比色，随着Distance的增加，会逐渐显现4个一组 － 两对对比色。
e. 类似色（analogic)：与基色比较接近的各种颜色，推荐色彩比较柔和、反差不明显的网页使用。
3.自定义基色的色调（Hue）、饱和度(Saturation)、亮度(Brightness)
对这些选项进行微调后，所配置的方案颜色会起到相应变化。
4.在最底部的select选择器中，可以特别地为色盲设计的相应的配色方案。

五.培养网页设计色感

        许多网站做不好，原因是在配色问题上，假如自己的绘图艺术能力不高，要突破的是在颜色和内容的运用上,至少看起来要专业一些，工整一些，务实一些。做站的第一步，通常是要先确定所要运用的颜色。怎么去确定，做自己的个站一般设计者会依心情来顶，用颜色去表达心情，当然，这是在积累了一定经验以后的，大胆想象和运用自己所确定的颜色。确定好颜色，再者就是绘制界面。
        下面介绍一些培养网页设计色感的方法：
1.多看网站