颜色调色板二进制_审美无礼的人2：颜色和调色板

颜色调色板二进制

Color is very important in design - it plays both a visual and psychological role. Having a varied palette that matches the intent of your design greatly contributes to the overall aesthetic of your site.

颜色在设计中非常重要-它在视觉和心理上都起着作用。 具有与您的设计意图相匹配的各种调色板极大地有助于提高网站的整体美感。

You or your designer might already have a palette in mind for your project. If not, I highly recommend reading up on color theory for designers and creating your own color palettes. Ideally, a good palette will consist of either two contrasting "brand colors" or two similar colors (from a monochromatic scheme), and a few lighter or darker colors for versatility.

您或您的设计师可能已经为您的项目想到了调色板。 如果没有，我强烈建议为设计师阅读色彩理论，并创建自己的调色板 。 理想情况下，一个好的调色板将由两种对比的“品牌颜色”或两种相似的颜色（来自单色方案）以及一些较浅或较深的颜色组成，以实现多功能性。

Assuming you have your color palette chosen, the built-in color functions in Sass can be used to manipulate these colors.

假设您选择了调色板，则可以使用Sass中的内置颜色功能来操纵这些颜色。

引用调色板 (Referencing the Color Palette)

Sass $variables provide a great way to reference color values in an organized, reusable way. It is highly suggested that palette colors are named semantically rather than on their appearance. A variable like $color-blue has little meaning (other than that the color is blue), whereas $color-primary defines the color's role semantically. This also allows for flexibility for multiple themes, or if brand colors change in the future.

Sass $variables提供了一种以有序，可重用的方式引用颜色值的好方法。 强烈建议调色板颜色以语义而不是外观命名 。 像$color-blue这样的变量没有什么意义（除了颜色是蓝色以外），而$color-primary则从语义上定义颜色的角色。 这也可以为多个主题提供灵活性，或者在将来改变品牌颜色的情况下。

Though $color-variables are a good start, it is often a good idea to keep color variables organized in a Sass map. This way, the colors can be iterated, are more organized, and are more intuitive to reference.

尽管$color-variables是一个很好的开始，但是将颜色变量组织在Sass map通常是一个好主意。 这样，颜色可以进行迭代，更有条理并且更易于参考。

Below is a base color palette pulled from Scotch.io:

下面是从Scotch.io中提取的基本调色板：

$scotch-colors: (
  'primary': #8e3329, 
  'accent': #d98328,
  'secondary': #5a1321,
  'foreground': #191919,
  'background': #e9e9e9
);

Each color has a semantic meaning that describes the color's role. The Sass function map-get(), or a custom utility function (recommended), can be used to reference individual colors:

每种颜色都有描述颜色作用的语义 。 Sass函数map-get()或自定义实用程序函数（推荐）可用于引用各个颜色：

@function scotch-color($key: 'primary') {
  @return map-get($scotch-colors, $key);
}

$button-color: scotch-color('primary'); // #8e3329

A color palette should be limited in the number of colors it contains (aim for 4 - 7 colors). Other colors can be derived from tints and shades of the palette colors.

调色板应限制其包含的颜色数量（目标是4-7种颜色）。 其他颜色可以从调色板颜色的色调和阴影得出。

色调和阴影 (Tints and Shades)

Adding tints and shades to your color palette will give you a greater number of colors to work with in your project, while still achieving consistency and adhering to your original color palette. To get the tints and shades of a color in Sass, the mix() function can be used with white and black, respectively:

在调色板中添加色调和阴影将使您可以在项目中使用更多数量的颜色，同时仍可保持一致性并坚持原始调色板。 要在Sass中获得颜色的色调和阴影，可以分别将mix()函数与白色和黑色配合使用：

$color-primary: scotch-color('primary'); // #8e3329

$color-primary-tinted: mix(white, $color-primary, 10%); // #99473e
$color-primary-shaded: mix(black, $color-primary, 10%); // #7f2d24

If the tint/shade interval is established, a utility function can be provided that can return the shade/tint of the desired color, to the desired level (which is good for preventing magic numbers):

如果确定了色调/阴影间隔 ，则可以提供一个实用程序功能，该功能可以将所需颜色的阴影/色调恢复到所需的级别（这对于防止幻数很有用）：

$color-interval: 10% !global;

@function scotch-color-level($color-name: 'primary', $level: 0) {
  $color: scotch-color($color-name);
  $color-base: if($level < 0, black, white);

  @return mix($color-base, $color, $level * $color-interval);
}

// Example:
.panel {
  background-color: scotch-color-level('primary', 2);
}

Sass also provides a scale-color() function that allows the red, green, blue, saturation, lightness, and alpha components of a color to be manipulated based on the scale the color is already at. That is, if a color is already light, increasing the $lightness component won't lighten it by as much as that of a darker color.

Sass还提供了scale-color()函数，该函数允许根据颜色所处的比例来操纵颜色的红色，绿色，蓝色，饱和度，亮度和alpha分量。 也就是说，如果颜色已经是浅色，则增加$lightness分量将不会像深色颜色那样使它变亮。

The lighten() and darken() output similar colors, but colors can blow out quickly with these functions. Keep that in mind if you decide to use them.

lighten()和darken()输出相似的颜色，但是使用这些功能可以darken()颜色快速消失 。 如果您决定使用它们，请记住这一点。

不透明度和透明度 (Opacity and Transparency)

A project design can be greatly enhanced by including thoughtful levels of transparency with the project's color palette. Transparency is contextual - its effectiveness in a design is based on the background that it covers. Transparency is mainly used to create contrast, and with different colors and backgrounds, the opacity level to achieve effective contrast may vary.

通过在项目的调色板中包含周到的透明度级别，可以大大增强项目设计。 透明度是上下文相关的 -其在设计中的有效性基于其所涵盖的背景。 透明度主要用于创建对比度 ，并且使用不同的颜色和背景， 实现有效对比度的不透明度级别可能会有所不同。

With that said, it's a good idea to aggregate the different (semantic) levels of opacity used in a project's design with Sass maps:

话虽如此，将项目设计中使用的不同（语义）不透明度级别与Sass映射聚合在一起是一个好主意：

$scotch-opacity: (
  'light': 0.8, // opacity used with lighter colors
  'dark': 0.4   // opacity used with darker colors
  // ... etc.
);

A utility scotch-color-alpha() function can be provided to adjust the color based on a given $opacity level using the rgba() function:

可以使用scotch-color-alpha()函数使用rgba()函数基于给定的$opacity级别调整颜色：

@function scotch-color-alpha($name: 'primary', $opacity: 0) {
  $color: scotch-color($name);

  // Get the named opacity level, if it exists
  @if map-key-exists($scotch-opacity, $opacity) {
    $opacity: map-get($scotch-opacity, $opacity);
  }

  // Use rgba() to manipulate the color's alpha level
  @return rgba($color, $opacity);
}

// Example usage:
$button-transparent-color: scotch-color-alpha('primary', 'light');
// => rgba(#8e3329, 0.8)

The opacify() and transparentize() functions may also be used to decrease/increase transparency respectively. These functions are really only useful if the color already has transparency. However, a well-established color palette should be based on fully opaque colors.

opacify()和transparentize()函数也可以分别用于减少/增加透明度。 仅当颜色已经具有透明度时，这些功能才真正有用。 但是， 公认的调色板应基于完全不透明的颜色 。

对比和可及性 (Contrast and Accessibility)

When deciding which two colors make a good foreground/background color pair, it might be tempting to use the lightness($color) function to conditionally choose a foreground color:

在确定哪两种颜色构成良好的前景色/背景色对时，可能很想使用lightness($color)函数有条件地选择前景色：

// Returns either a dark or light foreground color, given
// the background color
@function scotch-foreground-color($bgcolor, $threshold: .65) {
  @return if(lightness($bgcolor) >= $threshold, $color-dark, $color-light);
}

This works for many scenarios, but can throw false positives/negatives for colors near the $threshold. Alternatively, it is recommended that contrast between color pairs are manually checked, especially for accessibility.

这适用于许多情况，但可能会使$threshold附近的颜色产生假阳性/阴性。 另外，建议手动检查颜色对之间的对比度 ，尤其是对于可访问性。

The Web Content Accessibility Guidelines state that the contrast ratio between foreground images/text and a background should be at least 4.5:1 (3:1 for larger text) for level AA, and 7:1 (4.5:1 for larger text) for level AAA. You can read more about the contrast minimum to understand the rationale and how this value is calculated.

Web内容可访问性指南指出，对于AA级，前景图像/文本与背景之间的对比度应至少为4.5：1（大文本为3：1），对于AA级为7：1（大文本为4.5：1） 。 AAA级。 您可以阅读有关最小对比度的更多信息，以了解基本原理以及如何计算该值。

Thankfully, Lea Verou has created a handy tool for checking color contrast that should come in handy as you are choosing color pairs. Combining the primary color in the example palette, Scotch red (#8e3329), and the 'light' color, white (#ffffff), yields a contrast ratio of 7.9, which is acceptable for any size text at all levels. This would make a good background/foreground color pair!

值得庆幸的是，Lea Verou创建了一个方便的工具来检查颜色对比 ，这在您选择颜色对时应该会派上用场。 结合在该示例中的调色板的原色， 苏格兰红色（ #8e3329 ），和'light'色， 白色（ #ffffff ），得到7.9的对比度，这是在所有各级任何大小的文本上可接受的。 这将是一个很好的背景/前景颜色对！

自定义颜色变体 (Custom Color Variants)

Sometimes, a project will have custom color variants provided by a designer. This makes it easier to determine what the various shades and tints of each color in the palette will be (as they are provided in advance). This also means that we can't take advantage of the convenience of a color shade/tint function. Google's Material Design is a good example of carefully chosen color variants arranged as a spectrum for each base color:

有时，项目会具有设计师提供的自定义颜色变体 。 这样可以更轻松地确定调色板中每种颜色的各种阴影和色调（预先提供）。 这也意味着我们无法利用颜色阴影/色调功能的便利性。 Google的Material Design是精心挑选的颜色变体的一个很好的例子，颜色变体按照每种基本颜色的光谱进行排列：

Multidimensional (nested) Sass maps should be used for custom color variants when they are provided. Here's how the original color palette and color function can be adapted for custom colors:

提供多维（嵌套）Sass贴图时，应将其用于自定义颜色变体 。 以下是原始调色板和颜色功能如何适应自定义颜色的方法：

$scotch-color-key: 'base' !default;

$scotch-colors: (
  'primary': (
    'base': #8e3329,
    'light': #d9534f,
    'dark': #c9302c
  ),
  'accent': (
    'base': #d98328,
    'light': #dd8f3d,
    'dark': #c57623
  ),
  'secondary': (
    'base': #5a1321,
    'light': #7b1a2d,
    'dark': #51111e
  ),
  'foreground': (
    'base': #191919,
    'light': #333333,
    'dark': #111111,
    'darker': #000000
  ),
  'background': (
    'base': #e9e9e9,
    'light': #ffffff,
    'dark': #dddddd
  )
);

The modified scotch-color() function to handle specific color variants can be seen in this Sassmeister.

可以在此Sassmeister中看到经过修改的scotch scotch-color()函数以处理特定的颜色变化。

The base (default) color key is defined in $scotch-color-key. The scotch-color() function is modified above to retrieve a specific color variant based on the variant key, and desired opacity setting. With this, a color can still be retrieved with only one argument; e.g. $color: scotch-color('primary').

基本（默认）颜色键在$scotch-color-key定义。 上面对scotch-color()函数进行了修改，以基于变体键和所需的不透明度设置来检索特定的颜色变体。 这样一来，仍然可以仅使用一个参数来检索颜色。 例如$color: scotch-color('primary') 。

See the Pen 0d74b9a54fb2ebc3c3be270284ed618d by David Khourshid (@davidkpiano) on CodePen.

请参阅CodePen上的David Khourshid（ @davidkpiano ）的Pen 0d74b9a54fb2ebc3c3be270284ed618d 。

结论 (Conclusion)

Colors are a very important part of a design project. As such, it is best to organize a project's color palette in a Sass map to easily reference specific colors with map-get or a utility function (however you choose to implement it). Sass provides a variety of color functions to manipulate colors to produce shades and tints for a fuller color spectrum. For custom colors, use multidimensional color maps for organization.

颜色是设计项目中非常重要的部分。 因此，最好在Sass映射中组织项目的调色板，以使用map-get或实用程序功能（无论选择如何实现）轻松引用特定颜色。 Sass提供了多种颜色功能，可以操纵颜色以产生阴影和色调 ，从而获得更完整的色谱。 对于自定义颜色，请使用多维颜色图进行组织。

The overall goal for an aesthetic, colorful design in Sass is to be able to:

在Sass中进行美学，多彩设计的总体目标是能够：

• provide and reference colors that fit cohesively with the given color palette, and...
  提供和参考颜色以与给定的调色板紧密结合，并...
• prevent magic (hex) numbers.
  防止魔术（十六进制）数字。

Keep an eye out for the next article in the series, Aesthetic Sass 3: Typography and Vertical Rhythm!

请密切注意本系列的下一篇文章，《 审美Sass 3：印刷术和垂直节奏》 ！

翻译自: https://scotch.io/tutorials/aesthetic-sass-2-colors

颜色调色板二进制