网页配色的好坏直接影响了网页的效果,所以,对网页设计师来讲,如何做好配色就成了至关重要的事情。《设计师谈网页配色》一文是由韩国I.R.i色彩研究所所著的《Web Color Design——设计师谈网页配色》一书整理而来,会逐渐贴出。文中图片都是书中所用原图(有些网站已改版)。
配色原理的相关知识
全面讲解配色的相关知识需要极长的篇幅,我们现在只讲解其中最基础最重要的一部分内容。或许大家会说“学习配色理论干什么?只要最终结果漂亮不就行了?”,但学习配色基本理论可以让大家更快的步入配色专家的行列。
当有人问起“为什么在这里用这个颜色?”时,我们的回答将不再是毫无说服力的“我感觉这样很漂亮!”,而是自豪的说“这种类似色调的搭配可以凝造优雅的氛围!”。
在下面讲解的配色原理中,主要根据色相和色调进行了一下列的分类。虽然除此之外还有很多其他的配色原理,在这里只讲解最基本最典型的5种配色原理。
我们在进行网页配色的时候要注意,在网页环境中相差很小的颜色不容易分辨出来。
(注:本系列所举的大多是站点主页配色实例,而这种配色实例很有可能不适用于下一级页面。)
基于色相的配色关系

上图为以色相环中的红色为基准进行的配色方案分析。采用不同色调的同一色相时,称之为同一色相配色;而采用两侧相近颜色时,称之为类似色相配色。
类似色相是指在色相环中相邻的两种色相。同一色相配色与类似色相配色总体上会给人一种安静整齐的感觉。例如在鲜红色旁边使用了暗红色时,当然会给人一种较协调整齐的感觉。
在色相环中位于红色对面的青绿色是红色的补色,补色的概念就是完全相反的颜色。在以红色为基准的色相环中,蓝紫色(Purple Blue)到黄绿色(Green Yellow)范围之间的颜色为红色的相反色相。相反色相配色是指搭配使用色相环中相距较远颜色的配色方案,这与同一色相配色或类似色相配色相比更具变化感。
基于色调的配色关系

上一幅图像的基本色调为苍白(Very pale)色调。同一色调配色是指选择同一色调不同色相颜色的配色方案,例如使用鲜红色(Vivid Red)与鲜黄色(Vivid Yellow)的配色方案。
类似色调配色是指使用如清澈(Pale)、灰亮(Light Grayish)等类似基准色调的配色方案,这些色调在色调表中比较靠近基准色调。相反色调配色是指使用如深暗(Deep)、黑暗(Dark)等与基准色调相反色调的配色方案,这些色调在色调表中远离基准色调。