建立您的调色板

曾经使用过那些花哨的调色板生成器之一吗？您知道，在选择起始颜色的地方，调整一些选项，其中可能包括诸如“黑社会”或“大四号”之类的音乐术语，然后为您提供建立网站时应使用的五个完美色样？

这种选择完美配色方案的经过科学计算的科学方法非常诱人，但不是很有用。

您不能用五个十六进制代码构建任何内容。要构建真实的东西，您需要更全面的颜色集供您选择。

您也将需要比您想象的更多的灰色-听起来三到四个阴影听起来足够多，但是不久之后您便希望您拥有比＃2阴影更暗但比＃3阴影更浅的东西。

实际上，您希望有8-10种阴影可供选择（稍后会有更多介绍）。没有太多的东西让您浪费时间在77号阴影和78号阴影之间进行选择，但是足以确保您不必付出太多折衷。

真正的黑色通常看起来很不自然，因此请从真正的深灰色开始，然后以稳定的增量逐渐达到白色。

大多数网站都需要一种或两种颜色用于主要动作，强调导航元素等。这些颜色决定了网站的整体外观-使您认为Facebook为“蓝色”的颜色，即使它是真的主要是灰色的。

就像使用灰色一样，您需要选择各种（5-10）较浅和较深的阴影。

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

在原色之上，每个站点都需要一些强调颜色以将不同的事物传达给用户。

例如，您可能想要使用引人注目的颜色（例如黄色，粉红色或蓝绿色）来突出显示新功能：

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

即使这些颜色在整个UI中应尽量少用，您也需要为这些颜色使用多种阴影。

如果要在需要使用颜色来区分或分类相似元素（例如图形上的线，日历中的事件或项目上的标签）的地方进行构建，则可能需要更多的强调色。

总而言之，对于复杂的UI，通常需要多达十种不同的颜色（每种颜色具有5-10种阴影）。

当您需要在调色板中创建较浅或较深的颜色变化时，请不要使用CSS预处理器功能（例如“变亮”或“变暗”）来动态创建阴影。这样您最终会得到35种略有不同的蓝调，它们看起来都一样。

相反，请在工作前定义一组固定的阴影，您可以从中选择。

首先，为要创建的比例尺选择一种基础颜色-浅色和深色调所基于的中间颜色。

没有真正的科学方法可以做到这一点，但是对于原色和强调色，一个好的经验法则是选择一种可以很好地用作按钮背景的阴影。

重要的是要注意，这里没有真正的规则，例如“从50％的亮度开始”或其他任何规则-每种颜色的行为都有所不同，因此您必须依靠眼睛才能做到这一点。

接下来，选择最暗的阴影和最亮的阴影。这也不是一门真正的科学，但它有助于思考将在何处使用它们并根据上下文选择它们。

颜色最暗的阴影通常保留给文本，而最亮的阴影可能用于为元素的背景着色。

一个简单的警报组件是结合了这两种用例的一个很好的示例，因此它是选择这些颜色的好地方。

从与您的基础色相匹配的颜色开始，然后调整饱和度和亮度，直到满意为止。

一旦有了基本，最暗和最浅的阴影，您只需要填补它们之间的空白即可。

对于大多数项目，每种颜色至少需要5种阴影，如果不想太受限制，则可能需要接近10种阴影。

九是个很大的数字，因为它很容易划分，并且使填补空白更加直接。我们将其称为最暗的阴影900，基本阴影500和最浅的阴影100。

首先选择阴影700和300，即阴影中间的阴影。您希望这些阴影感觉像是两侧阴影之间的完美折衷。

这样会在刻度尺上再创建四个孔（800、600、400和200），您可以使用相同的方法进行填充。

您应该最终获得一组相当平衡的颜色，这些颜色应提供足够的选择来适应您的设计思想，而又不会感到局限。

对于灰色，基色并不那么重要，但是除此之外，过程是相同的。从边缘开始并填补空白，直到拥有所需的东西。

通过为项目中最暗的文本选择一种颜色来选择最深的灰色，并为那些微妙的灰白色背景选择合适的颜色来选择最浅的灰色。

尽管很诱人，但您不能完全依靠数学来制作完美的调色板。

像上面描述的那样的系统方法非常适合入门，但是如果需要，不要害怕进行一些微调。

在设计中实际开始使用颜色后，几乎不可避免的是要调整阴影的饱和度，或者使几个阴影变浅或变深。相信你的眼睛，而不是数字。

只要可以避免，就尽量避免过于频繁地添加新阴影。如果您不想限制调色板，那么也可能根本没有颜色系统。