色彩概念术语
我在《理解色彩理论》中讨论过的内容,在本文学习网页设计配色方案时将派上用场。
标准色轮在分析不同配色方案时很有帮助。
首先,介绍几种传统的配色方案。
类似色
类似色配色方案最易创建,以传统十二等分色轮上相邻的三种颜色为基础构建。可通过调整这些颜色的色调、明暗度和亮度进行微调。
类似色:橙色、红橙色和红色。
单色系
单色系配色方案基于单一颜色,色相始终保持一致,但包含该色相的不同色调、明暗度和亮度变化。
这个单色系配色方案使用了各种深浅和亮度的绿色。
三角色
三角色配色方案使用色轮上均匀分布的三种颜色。想象一个等边三角形与色轮在三个点相交,从而确定三种基础颜色。同样可改变这些颜色的色调、明暗度和亮度来调整方案。
这个三角色配色方案使用了黄色、红色和蓝色。
互补色
互补色配色由色轮上相对的颜色组成。想象一条直线穿过色轮任意位置,这条线上的颜色即可构成互补色配色方案。
蓝色和橙色:一种互补色配色方案。
分裂互补色
相比互补色,分裂互补色方案较为少见。它使用一种基色及该基色互补色两侧相邻的两种颜色。同样可通过调整色调、明暗度和色度进行修改。
分裂互补色配色方案:黄绿色 vs. 红色和蓝紫色。基色是明亮的绿色。
四色配色
四色配色方案类似于三色方案,但使用矩形而非三角形从色轮选择基色。该方案提供两对互补色作为基础。通常,当其中一种颜色比其他颜色更占主导时,效果最佳。
四色配色方案:蓝绿色和蓝紫色 vs. 红橙色和黄橙色。
进行调整
即使使用传统配色方案,最终仍可能出现刺眼或不美观的组合。此时需通过自定义和人工干预,调整色调、明暗度和色度尤为重要。例如,以下类似色方案虽未违反规则,但因缺乏对比度,视觉上并不吸引人。
低对比度的类似色配色方案。
将其与此种类似色方案比较,后者使用了相同色相,但采用了不同的色调、明暗度和色度。
经过调整以提高对比度的类似色配色方案。
可见,这种配色方案更具吸引力,且具备网页设计所需的对比度。
自定义配色方案
并非所有配色方案都基于传统模型。事实上,一些最引人注目的方案仅使用中性调色板搭配一个鲜艳的强调色。有时依靠人类直觉从头创作,反而能产生比传统模型更出色的效果。
中性自定义配色方案,辅以强调色。
创建自己的配色方案时,建议以传统模型为起点建立基础,再调整色调。
此外,上述示例均包含五种颜色。虽非硬性要求,但这值得遵循。确定五种基础颜色后,可根据网站需求增减数量,这也是人类直觉发挥重要作用之处。
Adobe Kuler
Adobe Kuler是有助于创建配色方案的在线工具。你可使用“规则”根据本文描述的传统模型可视化创建方案,并通过滑块和文本输入框轻松调整每种颜色。
Kuler还允许使用图像创建色板,这可能产生有趣的结果。
使用 Adobe Kuler 从图像中提取配色方案。
创建好配色方案后,可复制每种颜色的HEX代码,或登录Kuler下载色板文件,以便在Adobe Illustrator或Photoshop中使用。
对比度
为网页创建配色方案时,最后要记住的是对比度。前述两种类似色方案的比较很好地说明了其重要性。若配色方案中所有色调明度相同,会导致设计单调乏味。因此,创建配色方案时务必考虑对比度。

