颜色炼金术少：制作配色方案和调色板

颜色是任何视觉设计中最重要的元素之一。正确使用后，它可能会对您的网站或应用程序产生巨大影响。但是，了解颜色理论仅仅足以实现这种影响。您需要拥有合适的工具腰带，以通过多种颜色轻松而成功地操作。幸运的是，通过提供大量颜色功能来解决这个实际问题。

> 在本教程中，我将探讨如何将其中一些颜色功能与其他较小的功能结合在一起，以生成柔性和可重复使用的混合物进行颜色操作。

钥匙要点

LINS提供了多种颜色功能，可用于为Web设计创建有影响力的配色方案和调色板。这些功能可以与其他较小的功能结合使用，以生成柔性和可重复使用的混合蛋白进行颜色操纵。

创建较少的配色方案涉及定义基本颜色，然后使用spin（）函数创建颜色变体。可以将这些变体放入列表中并根据需要提取，从而创建不同类型的配色方案。 通过使用环和有条件语句，可以使用
• 少量用于生成不同类型的调色板。 spin（）函数可用于创建全颜色光谱，而亮（）和darken（）函数可用于创建特定颜色的色调和阴影。
较少的颜色炼金术的使用提供了一些好处，包括创建一致和和谐的配色方案，简单地改变基本色素来调整配色方案的易度性以及创建可扩展和可重复使用的配色方案的能力。 >
创建配色方案
尝试以较少的方式创建配色方案时，大多数人采用最明显的方法，看起来像这样：

>此方法使用变量和Less的Spin（）函数来创建一个配色方案（在我们的情况下，Triadic）。这效果很好，但是对我来说，这不是特别可重复使用，并且不够灵活。幸运的是，可以使用Mixins解决问题。让我们看看我的意思。

上面的代码创建了三种类型的配色方案。我只解释最后一个，因为前两个具有相同的结构，并且不需要单个解释。.quad（）混合蛋白采用三个参数。第一个设置了该方案的基本颜色。第二个告诉Mixin返回哪种颜色变体。第三个定义了当少于编译代码时使用的css属性要使用。在Mixin的主体内部，Spin（）函数在四个方案中创建了三种可用的颜色变体，然后将这些变体放入列表中。 Extract（）函数获取所需的变体，该变体在第二个参数中定义。最后，在可变插值的帮助下，将颜色变体分配给定义的CSS属性。

我们现在可以将上述代码放在一个称为color_schemes的单独文件中。

>在这里，我们使用配色方案导入文件，然后为我们的网站或应用程序定义基本颜色。 DIV规则集中的最后三行，定义边框颜色，颜色和背景色属性的颜色。

@<span>base-color: #00ff00;
</span>@<span>triad-secondary: spin(@base-color, 120);
</span>@<span>triad-tertiary: spin(@base-color, -120);</span>

如您所见，混合蛋白可以与任何预期值为颜色的属性一起使用。此外，非常容易看到使用特定语句的属性。只要看看结尾，我们就知道了。例如，在最后一个语句中，您可以清楚地看到四Quad方案的第一个颜色变体将用作背景色属性的值。很酷，是吗？

这是编译的输出：

>请参阅codepen上的sitepoint（@sitepoint）的笔xwxmep。

生成调色板

在本节中，我将向您展示如何创建不同类型的调色板。为此，我将使用不太特定的循环和条件陈述（Mixin Guards）。如果您不熟悉这些构造，可以快速查看我以前的有关这些主题的文章。 在第一个示例中，我将创建一个产生颜色表的混合物。您已经使用了彩色选择器，对吗？所以，你知道我的意思。

.<span>analog(@color, @variant, @property) {
</span>  @<span>first: spin(@color, 30);
</span>  @<span>second: spin(@color, -30);
</span>  @<span>list: @first, @second;
</span>  <span>@return: extract(@list, @variant);
</span>  @<span>{property}: @return;
</span><span>}
</span>
.<span>triad(@color, @variant, @property) {
</span>  @<span>first: spin(@color, 120);
</span>  @<span>second: spin(@color, -120);
</span>  @<span>list: @first, @second;
</span>  <span>@return: extract(@list, @variant);
</span>  @<span>{property}: @return;
</span><span>}
</span>
.<span>quad(@color, @variant, @property) {
</span>  @<span>first: spin(@color, 90);
</span>  @<span>second: spin(@color, -90);
</span>  @<span>third: spin(@color, 180);
</span>  @<span>list: @first, @second, @third;
</span>  <span>@return: extract(@list, @variant);
</span>  @<span>{property}: @return;
</span><span>}</span>

.Color-palette（）Mixin进行三个实际参数。第一个定义了调色板的基本颜色。第二个定义要生成多少个色板。第三个设置了Spin（）函数所需的自旋步骤。

实际上，还有一个参数：@index。但它仅用于内部来使循环工作。在上面的代码中设置时，循环将通过代码迭代25次，创建25个CSS类 - 每个色板一个。每个类名称将按照.swatch- [数字]模式构造（例如，.swatch-1）。

通过使用从旋转步骤的当前索引乘法得出的值来生成每个色板的颜色。该值将添加到循环的每个迭代的基本颜色值中。这会产生全色谱，以相同的颜色开始和结尾（在我们的情况下为红色）。

这是编译的输出：>

@<span>base-color: #00ff00;
</span>@<span>triad-secondary: spin(@base-color, 120);
</span>@<span>triad-tertiary: spin(@base-color, -120);</span>

请参阅codepen上的sitepoint（@sitepoint）生成较少的调色板。

>该混合物可用于创建任何类型的彩色表 - 带有任何数量的色板，并且具有更大或更小的旋转步骤。例如，您只能生成四个色板，其旋转步骤为90度，这将为平方配色方案产生色板。您有无限的可能性。只是继续进行自己的实验。

> 在下一个示例中，我们将创建一种产生特定颜色的色调和阴影的混合蛋白。根据Wikipedia的说法：

颜色是颜色与白色的混合物，它会增加轻度，阴影是颜色与黑色的混合物，可降低轻度。

>我们将在一分钟内看到，在Less的Lighten（）和DAMBEN（）内置功能的帮助下，可以轻松地创建色调和阴影。

此版本的.color-palette（）mixin采用两个实际参数 - 调色板的类型（阴影或色调）和基本颜色。为了使可能在阴影和色调之间切换，＆运算符与While关键字一起使用。这意味着，如果我们使用“阴影”作为第一个参数，则将使用DAMTEN（）函数的代码。 在两种情况下，背景颜色分别由光亮（）或darken（）函数生成，该功能分别使用定义的基本颜色和当前索引乘以10％。注意相对参数。重要的是要包含它，以便调整是相对于当前值的。>

>

注意：不用担心两个混合物共享一个和相同的名字。多亏了模式匹配功能，更少知道要使用哪一个。

.<span>analog(@color, @variant, @property) {
</span>  @<span>first: spin(@color, 30);
</span>  @<span>second: spin(@color, -30);
</span>  @<span>list: @first, @second;
</span>  <span>@return: extract(@list, @variant);
</span>  @<span>{property}: @return;
</span><span>}
</span>
.<span>triad(@color, @variant, @property) {
</span>  @<span>first: spin(@color, 120);
</span>  @<span>second: spin(@color, -120);
</span>  @<span>list: @first, @second;
</span>  <span>@return: extract(@list, @variant);
</span>  @<span>{property}: @return;
</span><span>}
</span>
.<span>quad(@color, @variant, @property) {
</span>  @<span>first: spin(@color, 90);
</span>  @<span>second: spin(@color, -90);
</span>  @<span>third: spin(@color, 180);
</span>  @<span>list: @first, @second, @third;
</span>  <span>@return: extract(@list, @variant);
</span>  @<span>{property}: @return;
</span><span>}</span>

>

这是编译的输出：>

请参阅codepen上的sitepoint（@sitepoint）生成颜色色板。

摘要

>您还可以使用许多其他事情来处理颜色，以及少量提供的颜色功能。但是，嘿，您不想要10,000个字的教程，对吗？给定的示例足以让您开始，并概述可用的可能性。由您深入研究并继续进行实验。少快乐编码！

经常询问有关颜色炼金术的问题，

>

什么是颜色炼金术少，如何工作？

颜色炼金术，较少的是使用较少的动态预处理程序样式语言创建配色方案和调色板的方法。它允许您定义变量，混合素，功能和许多其他技术，使您可以制作更可维护，可维护和可扩展的CSS。更少的是，您可以创建基本颜色，然后使用功能来减轻，变暗，饱和，饱和，旋转和混合颜色，为您的网站或应用程序创建和谐的配色方案。

>

如何创建一个使用较少的？

使用较少的配色方案使用较少的配色涉及定义基本色彩，然后使用更少的功能来创建该颜色的变化。例如，您可以使用轻盈和变暗的功能来创建较浅和深色的基本色调。您还可以使用饱和和饱和功能来调整颜色的强度，并使用自旋功能来创建互补的颜色。通过结合这些功能，您可以创建各种配色方案。

>

>少少量炼金术？它使您可以创建一致且和谐的配色方案，从而可以增强网站或应用程序的视觉吸引力。它还可以轻松调整您的配色方案，因为您可以简单地更改基本颜色，其余颜色将自动更新。此外，较少的允许您创建可扩展和可重复使用的配色方案，从长远来看可以节省您的时间和精力。

>

>与其他CSS预处理器相比，颜色alchemy？ >较少的与其他CSS预处理器相似，例如Sass创建配色方案的能力。但是，Limes具有更简单的语法，并且更容易学习，这对初学者来说是一个不错的选择。它还具有一组可靠的功能来操纵颜色，这可以使您对您的配色方案有更多的控制。

我可以使用较少的颜色炼金术来打印设计吗？

，而较少的是用于Web设计，您也可以将其用于打印设计。您可以使用SIMS创建配色方案，然后将其导出为CSS文件，该文件可用于打印设计软件。但是，请记住，由于颜色空间的差异，颜色可能会在屏幕和印刷中出现不同。

我如何以更少的？在线了解更多有关颜色炼金术的信息。您可以首先阅读官方的文档，该文档及其功能及其功能提供了全面的概述。还有许多可用的教程和指南，可以使您完成以较少的配色方案的过程。

>我可以将颜色炼金术用于移动应用设计较少的颜色吗？较少的允许您创建一个一致的配色方案，该方案可以在包括移动应用在内的不同平台上使用。这可以帮助确保在所有平台上都具有一致的用户体验。

>我需要使用哪些工具用于颜色炼金术？

以较少用于颜色炼金术，您将需要一个文本编辑器才能进行。编写较少的代码和较少的编译器，以将您的代码较少地编译到CSS中。有很多免费的和付费的文本编辑器，可用的编译器较少，因此您可以选择最适合您的需求和偏好的编辑器。

>

如果我的色盲>，我可以用更少的颜色炼金术吗？

是的，即使您是色盲，也可以使用较少的颜色炼金术。较少的允许您根据数学功能创建配色方案，因此您无需依靠对颜色的看法。但是，您可能需要从其他人那里获得反馈，以确保您的配色方案在视觉上吸引人并且所有用户都可以访问。

>如果您'在您的配色较低的情况下遇到问题，您可以采取几个步骤。首先，检查您的错误代码较少。如果您的代码正确，请尝试调整基本颜色或功能的参数。如果您仍在遇到问题，请考虑从社区较少或专业的网页设计师那里寻求帮助。

以上是颜色炼金术少：制作配色方案和调色板的详细内容。更多信息请关注PHP中文网其他相关文章！