配色技巧，给初学者的6条网页设计安全配色指南

唉妈呀我的眼睛！如果你确定不想烧焦访问者的眼睛，遵循一般的指南避开颜色面板上右上角的位置来进行调色。

你刚刚学会了：

在上两个部分你已经学会了运用色彩理论的几个不同的方面。您学会了如何使用：

饱和度和明度

当你在颜色选择器上拖动选色点的时候，你会看到“S”和“B”的值在改变，这分别代表“饱和度”和“亮度”。同时你会也看到色相的值保持不变。所以你是通过改变基础色的饱和度和亮度来创建变色的。

饱和度和色彩

饱和度生动地表达了你的颜色。举个例子来说，想象一下“我的白衬衫被溢出的红酒渗透了”。在颜色选择器上，饱和度取决于有多少的白色与你的基本色进行混合。白色越少，饱和度越高。

当你向右拖动选色点的时候，你减少了白色的量，提高了饱和度，因此“S”值上升了。当你向左拖动选色点的时候，你增加了白色的量，降低了饱和度，因此“S”值下降了。

这种将基本色与白色混合的方式也叫做创建一种“色彩”。这个词来自于颜料混合，就是将白色的颜料与彩色的颜料进行混合。

亮度与色度

亮度是往你的颜色中混合多少黑色。黑色越少，亮度越大。

当你向上拖动选择点的时候，你减少了黑色的量，提高了亮度，因此，拾色器上的“B”值就上升了。当向下拖动选择点的时候，你增加了黑色，“B”值就下降了。

这种将基本色与黑色混合的方式也叫做创建“色度”。这同样来自于颜料混合，就是将黑色的颜料与彩色的颜料进行混合。

色调

当你用灰色混合基本色时就创建了“色调”。当你从色板的右上角挪出的时候，你同时降低了饱和度和亮度，也就是同时增加了白色和黑色（灰色），也就创建了色调。因此基本上任何时候只要你的饱和度和亮度都不到100%，这就是一种色调。

同样，这个术语来自于颜料混合，将灰色颜料与一种彩色颜料混合。这也就是词语“调淡”的由来。很酷吧？

单色配色方案

“单色”配色方案是你使用基本色以及基于基本色调整颜色的浓淡、阴影及色调来进行扩展。你刚刚已经学习过了所有这些术语在实践设置中的含义。因此通过挑选一种强调色以及它的变色，你实际上已经创建了单色的配色方案。

接下来呢？

在灰度基础上继续练习你的单色配色方案直到你已经非常自信。试着用不同的色相作为你的强调色来进行创作，尝试在使用中改变饱和度和亮度。

当你觉得得心应手的时候，继续添加一个额外的强调色。我建议你在第一次尝试的时候使用橙色和蓝色，因为它们是相处最和谐的“二人组”。然后尝试绿色和蓝色，在我的经验中，这是第二简单的。这些组合是最容易打动客户的。

为了帮助你更好地理解网页设计的配色方案，你能做的最好的事绝对是利用浏览器扩展插件颜色取样器来抓取颜色样例，比如说Colorzilla，通过它来开始研究经验丰富的设计师是怎么做的。当你浏览网页时，看到一个非常棒的配色方案，用颜色取样器将配色方案分离出来。分析样例中每个色相，看看什么饱和度和亮度水平效果最好。也要注意这些颜色都是怎么相互搭配的。

如果有疑问，你可以求助于你的“安全第一”指南，这样你就能远离“惨不忍睹”了。

**********************************************

楼主翻阅大量的词典，参考专业术语翻译此文

如果你觉得文章对你有帮助，请点赞让更多的人看到