Цвета Bootstrap

←Bootstrap

Стандартные цвета определены в виде переменных в файле _variables.scss. Переменные цветов, которые вы хотите изменить, нужно копировать в файл _custom.scss, изменять значение цвета и убирать !default.

Подробнее: http://v4-alpha.getbootstrap.com/getting-started/options/

Выглядит это примерно так:

Шаблон для просмотра цветов Bootstrap:

<pre>
<span class="color-name color-name-white"></span> $white:  <span class="color-name" style="background-color: #fff"></span> #fff;
<span class="color-name color-name-black"></span> $black:  <span class="color-name" style="background-color: #000"></span> #000;
<span class="color-name color-name-red"></span> $red:    <span class="color-name" style="background-color: #d9534f"></span> #d9534f;
<span class="color-name color-name-orange"></span> $orange: <span class="color-name" style="background-color: #f0ad4e"></span> #f0ad4e;
<span class="color-name color-name-yellow"></span> $yellow: <span class="color-name" style="background-color: #ffd500"></span> #ffd500;
<span class="color-name color-name-green"></span> $green:  <span class="color-name" style="background-color: #5cb85c"></span> #5cb85c;
<span class="color-name color-name-blue"></span> $blue:   <span class="color-name" style="background-color: #0275d8"></span> #0275d8;
<span class="color-name color-name-teal"></span> $teal:   <span class="color-name" style="background-color: #5bc0de"></span> #5bc0de;
<span class="color-name color-name-pink"></span> $pink:   <span class="color-name" style="background-color: #ff5b77"></span> #ff5b77;
<span class="color-name color-name-purple"></span> $purple: <span class="color-name" style="background-color: #613d7c"></span> #613d7c;

// Create grayscale
<span class="color-name color-name-gray-dark"></span> $gray-dark:     <span class="color-name" style="background-color: #292b2c"></span> #292b2c;
<span class="color-name color-name-gray"></span> $gray:          <span class="color-name" style="background-color: #464a4c"></span> #464a4c;
<span class="color-name color-name-gray-light"></span> $gray-light:    <span class="color-name" style="background-color: #636c72"></span> #636c72;
<span class="color-name color-name-gray-lighter"></span> $gray-lighter:  <span class="color-name" style="background-color: #eceeef"></span> #eceeef;
<span class="color-name color-name-gray-lightest"></span> $gray-lightest: <span class="color-name" style="background-color: #f7f7f9"></span> #f7f7f9;

// Reassign color vars to semantic color scheme
<span class="color-name color-name-brand-primary"></span> $brand-primary: <span class="color-name color-name-blue"></span> $blue;
<span class="color-name color-name-brand-success"></span> $brand-success: <span class="color-name color-name-green"></span> $green;
<span class="color-name color-name-brand-info"></span> $brand-info:    <span class="color-name color-name-teal"></span> $teal;
<span class="color-name color-name-brand-warning"></span> $brand-warning: <span class="color-name color-name-orange"></span> $orange;
<span class="color-name color-name-brand-danger"></span> $brand-danger:  <span class="color-name color-name-red"></span> $red;
<span class="color-name color-name-brand-inverse"></span> $brand-inverse: <span class="color-name color-name-gray-dark"></span> $gray-dark;

// Settings for the `&lt;body&gt;` element.
<span class="color-name color-name-brand-body-bg"></span> $body-bg:       <span class="color-name color-name-white"></span> $white;
<span class="color-name color-name-body-color"></span> $body-color:    <span class="color-name color-name-gray-dark"></span> $gray-dark;
<span class="color-name color-name-inverse-bg"></span> $inverse-bg:    <span class="color-name color-name-gray-dark"></span> $gray-dark;
<span class="color-name color-name-inverse-color"></span> $inverse-color: <span class="color-name color-name-gray-lighter"></span> $gray-lighter;

// Links
<span class="color-name color-name-link-color"></span> $link-color:       <span class="color-name color-name-brand-primary"></span> $brand-primary;
<span class="color-name color-name-link-hover-color"></span> $link-hover-color: darken($link-color, 15%);
</pre>

.color-name {
  display: inline-block;
  width: 3rem;
  height: 1.5rem;
  border: solid 1px black;

  &-white  { background-color: $white }
  &-black  { background-color: $black }
  &-red    { background-color: $red }
  &-orange { background-color: $orange }
  &-yellow { background-color: $yellow }
  &-green  { background-color: $green }
  &-blue   { background-color: $blue }
  &-teal   { background-color: $teal }
  &-pink   { background-color: $pink }
  &-purple { background-color: $purple }

  &-gray-dark     { background-color: $gray-dark }
  &-gray          { background-color: $gray }
  &-gray-light    { background-color: $gray-light }
  &-gray-lighter  { background-color: $gray-lighter }
  &-gray-lightest { background-color: $gray-lightest }

  &-brand-primary { background-color: $brand-primary }
  &-brand-success { background-color: $brand-success }
  &-brand-info    { background-color: $brand-info }
  &-brand-warning { background-color: $brand-warning }
  &-brand-danger  { background-color: $brand-danger }
  &-brand-inverse { background-color: $brand-inverse }

  &-body-bg       { background-color: $body-bg }
  &-body-color    { background-color: $body-color }
  &-inverse-bg    { background-color: $inverse-bg }
  &-inverse-color { background-color: $inverse-color }

  &-link-color       { background-color: $link-color }
  &-link-hover-color { background-color: $link-hover-color }
}