Color颜色

Theme colors主题颜色

We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap’s scss/_variables.scss file.我们使用所有颜色的子集创建一个较小的调色板来生成配色方案，也可以作为Sass变量和Bootstrap的scss/_variables.scss文件中的Sass映射使用。

All these colors are available as a Sass map, $theme-colors.所有这些颜色都作为Sass映射和$theme-colors提供。

$theme-colors: (
"primary":    $primary,
"secondary":  $secondary,
"success":    $success,
"info":       $info,
"warning":    $warning,
"danger":     $danger,
"light":      $light,
"dark":       $dark
);

Check out our Sass maps and loops docs for how to modify these colors.查看我们的Sass映射和循环文档，了解如何修改这些颜色。

All colors所有颜色

All Bootstrap colors are available as Sass variables and a Sass map in scss/_variables.scss file. 所有Bootstrap颜色在scss/_variables.scss文件中作为Sass变量和Sass映射提供。To avoid increased file sizes, we don’t create text or background color classes for each of these variables. 为了避免增加文件大小，我们不为每个变量创建文本或背景色类。Instead, we choose a subset of these colors for a theme palette.相反，我们为主题调色板选择这些颜色的子集。

Be sure to monitor contrast ratios as you customize colors. 在自定义颜色时，一定要监视对比度。As shown below, we’ve added three contrast ratios to each of the main colors—one for the swatch’s current colors, one for against white, and one for against black.如下图所示，我们为每种主颜色添加了三个对比度：一个用于样例的当前颜色，一个用于对比白色，一个用于对比黑色。

Notes on Sass关于Sass的说明

Sass cannot programmatically generate variables, so we manually created variables for every tint and shade ourselves. Sass无法以编程方式生成变量，因此我们自己手动为每种颜色创建变量。We specify the midpoint value (e.g., $blue-500) and use custom color functions to tint (lighten) or shade (darken) our colors via Sass’s mix() color function.我们指定中点值（例如，$blue-500），并使用自定义颜色函数通过Sass的mix()颜色函数对颜色进行着色（变亮）或着色（变暗）。

Using mix() is not the same as lighten() and darken()—the former blends the specified color with white or black, while the latter only adjusts the lightness value of each color. 使用mix()与lighte()和darken()不同-前者将指定颜色与白色或黑色混合，而后者仅调整每种颜色的亮度值。The result is a much more complete suite of colors, as shown in this CodePen demo.结果是一套更加完整的颜色，如本CodePen演示所示。

Our tint-color() and shade-color() functions use mix() alongside our $theme-color-interval variable, which specifies a stepped percentage value for each mixed color we produce. 我们的tint-color()和shade-color()函数将mix()与$theme color interval变量一起使用，该变量为我们生成的每个混合颜色指定一个步长百分比值。See the scss/_functions.scss and scss/_variables.scss files for the full source code.有关完整的源代码，请参阅scss/_functions.scss和scss/_variables.scss文件。

Color Sass maps彩色Sass映射

Bootstrap’s source Sass files include three maps to help you quickly and easily loop over a list of colors and their hex values.Bootstrap的源Sass文件包括三个映射，可以帮助您快速轻松地循环颜色及其十六进制值列表。

• $colors lists all our available base (500) colors列出所有可用的基本（500）颜色
• $theme-colors lists all semantically named theme colors (shown below)列出所有语义命名的主题颜色（如下所示）
• $grays lists all tints and shades of gray列出所有灰色的色调和阴影

Within scss/_variables.scss, you’ll find Bootstrap’s color variables and Sass map. 在scss/_variables.scss中，您可以找到Bootstrap的颜色变量和Sass映射。Here’s an example of the $colors Sass map:下面是$colorsSass映射的一个示例：

$colors: (
"blue":       $blue,
"indigo":     $indigo,
"purple":     $purple,
"pink":       $pink,
"red":        $red,
"orange":     $orange,
"yellow":     $yellow,
"green":      $green,
"teal":       $teal,
"cyan":       $cyan,
"white":      $white,
"gray":       $gray-600,
"gray-dark":  $gray-800
);

Add, remove, or modify values within the map to update how they’re used in many other components. 在映射中添加、删除或修改值，以更新它们在许多其他组件中的使用方式。Unfortunately at this time, not every component utilizes this Sass map. 不幸的是，目前并非每个组件都使用此Sass映射。Future updates will strive to improve upon this. 未来的更新将努力改进这一点。Until then, plan on making use of the ${color} variables and this Sass map.在此之前，计划使用${color}变量和这个Sass映射。

Example例子

Here’s how you can use these in your Sass:以下是如何在Sass中使用这些功能：

.alpha { color: $purple; }
.beta {
color: $yellow-300;
background-color: $indigo-900;
}

Color and background utility classes are also available for setting color and background-color using the 500 color values.Color和background实用工具类也可用于使用500颜色值设置颜色和背景色。

Generating utilities生成实用工具

Added in v5.1.0

Bootstrap doesn’t include color and background-color utilities for every color variable, but you can generate these yourself with our utility API and our extended Sass maps added in v5.1.0.Bootstrap不包括每个颜色变量的color和background-color实用程序，但您可以使用我们的实用工具API和v5.1.0中添加的扩展Sass映射自行生成这些实用程序。

1. To start, make sure you’ve imported our functions, variables, mixins, and utilities.首先，确保您已经导入了我们的函数、变量、mixin和实用程序。
2. Use our map-merge-multiple() function to quickly merge multiple Sass maps together in a new map.使用map-merge-multiple()函数将多个Sass映射快速合并到一个新映射中。
3. Merge this new combined map to extend any utility with a {color}-{level} class name.合并这个新的组合映射以扩展任何具有{color}-{level}类名的实用程序。

Here’s an example that generates text color utilities (e.g., .text-purple-500) using the above steps.下面是一个使用上述步骤生成文本颜色实用程序（例如.text-purple-500）的示例。

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";
$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);
$utilities: map-merge(
$utilities,
(
"color": map-merge(
map-get($utilities, "color"),
(
values: map-merge(
map-get(map-get($utilities, "color"), "values"),
(
$all-colors
),
),
),
),
)
);
@import "bootstrap/scss/utilities/api";

This will generate new .text-{color}-{level} utilities for every color and level. 这将为每个颜色和级别生成新的.text-{color}-{level}实用程序。You can do the same for any other utility and property as well.您也可以对任何其他实用程序和属性执行相同的操作。