改编自我们未来的《 重构UI》

您看过这些时尚的调色板生成器吗？ 当您选择一种颜色时，用“三合一”或“第四大调”等音乐短语调整一些参数-并为您的网站获得五种完美的颜色？



这种选择理想配色方案的计算和科学方法非常诱人，但不是很有用。

好吧，如果您不希望网站看起来像这样：

您真正需要的

五个十六进制代码不会做任何事情。 要构建真实的东西，需要更完整的调色板。



好的调色板可以分为三类。

灰色的

文本，背景，面板，表单元素-几乎所有这些元素都存在于灰色界面中。



而且您将需要比您想象的更多的灰色。 似乎三到四个阴影很多，但是很快您就会想要比2号阴影更暗的东西，但比3号阴影稍亮的东西。

在实践中，建议选择8-10种阴影（稍后会详细介绍）。 这并不是要寻找77号阴影和78号阴影之间的差异，而是足够的数量。



通常，纯黑色看起来不自然，因此请从非常深的灰色开始，然后逐渐切换为白色。

原色

大多数网站需要一种或两种颜色来进行基本操作，导航元素等。 这些颜色定义了网站的整体外观：使您认为Facebook为“蓝色”的那些颜色，尽管实际上大多数是灰色的。

与灰色调色板一样，您需要选择较浅和较深阴影的调色板（5-10）。



最浅的阴影可以用作警报之类的有色背景，而较深的阴影则适合于文本。

口音颜色

除了主要的颜色外，每个站点还需要几种强调颜色才能与用户交流。

因此，要突出显示新功能，可以选择一种有吸引力的颜色，例如黄色，粉红色或蓝绿色：



可能还需要使用颜色来强调不同的语义状态，例如红色以确认破坏性行为：



...黄色警告：



...或绿色以强调积极趋势：



以及这些颜色的一些阴影，尽管在UI中应尽量少用。

如果创建的设计中颜色有助于区分或分类相似的元素（例如，图形上的线条，日历事件或项目中的标签），则可能需要更多的强调颜色。

通常，复杂的UI通常需要多达十种不同的颜色，每种颜色具有5-10个阴影。

预先定义阴影

当需要稍微更浅或更深的阴影时，您不需要使用CSS预处理器功能，例如变亮或变暗。 因此，您最终得到了35个略有不同的蓝色外观，它们看起来都一样。

而是定义一组固定的阴影以供选择。



如何制作这样的调色板？

首先选择基色

从浅色和深色调的基础色开始。

没有真正的科学方法，但是对于基本色和强调色，一个好的经验法则是选择一种与按钮背景搭配得很好的阴影。



重要的是要注意这里没有真正的规则，例如“以50％的亮度开始”等。 每种颜色的行为都略有不同，因此您仅需依靠自己的口味即可。

设定界限

然后选择最暗和最亮的阴影。 这也不是一种科学的方法，但是它有助于想象将在哪里使用这些颜色，并根据此上下文选择它们。

通常为文本保留最暗的阴影，为元素的背景保留最浅的阴影。 一个简单的警报是将这些阴影组合在一起的一个很好的例子。



从与原色色调相匹配的颜色开始，然后更改饱和度和亮度，直到满意为止。

填空

如果您已经决定了基本的阴影，深色和浅色阴影，那么仅是要填补它们之间的空白。

对于大多数项目，每种颜色至少需要五种阴影，最好接近十种，以免感到尴尬。

九是个很大的数字，因为它可以很好地分开，这使得填充空白变得容易一些。 让我们将最暗的阴影900 ，底部500和最亮的阴影称为100 。

首先选择700和300的阴影，它们恰好位于两个间隔的中间：它们将是两侧阴影之间的完美折衷。



这将在刻度上另外创建四个间隔（ 800、600、400和200 ），它们以相同的方式填充。



最后，您将获得一组相当平衡的颜色，足以实现您的设计思想。

那灰色呢？

对于灰色阴影，基色不是那么重要，但是其他过程是相同的。 从边缘开始并填充空白，直到获得正确的调色板。



通过项目中最暗的文本的颜色选择最暗的阴影，然后选择最亮的阴影-一种可以在浅白色背景下正常工作的阴影。

这不是一门科学。

无论如何，您都不应仅依靠数学来选择理想的调色板。

像上面的那种系统的方法非常适合作为开始，但是不要害怕在必要时进行更改。

在项目中真正开始使用颜色后，几乎不可避免地，您将需要略微更改某个阴影的饱和度，或者使几个阴影变亮或变暗。 相信你的眼睛，而不是数字。

只需在可选时不要添加太多新阴影即可。 如果不限制调色板，通常可以不使用颜色系统。