View on GitHub

Color (カラー)

Bootstrap はどんなプロジェクトでもカスタマイズ可能な、拡張性のあるカラーシステムによって成り立っています。

On this page

テーマカラー

Bootstrap ではいくつかの色を選出して小さなカラーパレットを作成し、カラースキームを生成しています。これらは scss/_variables.scss にある Sass 変数や Sass マップとして利用可能です。

Primary

Secondary

Success

Danger

Warning

Info

Light

Dark

利用可能な全ての色は Sass マップ $theme-colors から利用可能です。

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

これらの色のカスタマイズについては、Sass マップとループについてのドキュメントをご覧ください。

全ての色

Bootstrap の全ての色は scss/_variables.scss の Sass 変数や Sass マップとして利用できます。ファイルサイズの増大を防ぐために、これらの色にはそれぞれテキスト色や背景色としてのクラスを設けていません。代わりに選出した色をテーマパレットとして用意しています。

色をカスタマイズする際には、コントラスト比に注目してください。以下に示すように、それぞれのメインカラーに3つのコントラスト比を用意しています。それぞれ、スウォッチの現在の色に対して、白色に対して、そして黒色に対してです。

$blue #0d6efd

$blue-100

$blue-200

$blue-300

$blue-400

$blue-500

$blue-600

$blue-700

$blue-800

$blue-900

$indigo #6610f2

$indigo-100

$indigo-200

$indigo-300

$indigo-400

$indigo-500

$indigo-600

$indigo-700

$indigo-800

$indigo-900

$purple #6f42c1

$purple-100

$purple-200

$purple-300

$purple-400

$purple-500

$purple-600

$purple-700

$purple-800

$purple-900

$pink #d63384

$pink-100

$pink-200

$pink-300

$pink-400

$pink-500

$pink-600

$pink-700

$pink-800

$pink-900

$red #dc3545

$red-100

$red-200

$red-300

$red-400

$red-500

$red-600

$red-700

$red-800

$red-900

$orange #fd7e14

$orange-100

$orange-200

$orange-300

$orange-400

$orange-500

$orange-600

$orange-700

$orange-800

$orange-900

$yellow #ffc107

$yellow-100

$yellow-200

$yellow-300

$yellow-400

$yellow-500

$yellow-600

$yellow-700

$yellow-800

$yellow-900

$green #198754

$green-100

$green-200

$green-300

$green-400

$green-500

$green-600

$green-700

$green-800

$green-900

$teal #20c997

$teal-100

$teal-200

$teal-300

$teal-400

$teal-500

$teal-600

$teal-700

$teal-800

$teal-900

$cyan #0dcaf0

$cyan-100

$cyan-200

$cyan-300

$cyan-400

$cyan-500

$cyan-600

$cyan-700

$cyan-800

$cyan-900

$gray-500 #adb5bd

$gray-100

$gray-200

$gray-300

$gray-400

$gray-500

$gray-600

$gray-700

$gray-800

$gray-900

$black #000

$white #fff

Sass における注意

Sass はプログラム的手法で変数を生成することができません。そのため Bootstrap では全てのティントおよびシェードに対して色の変数を用意しています。これらはまず中央の値を設定し (例： $blue-500) 、カスタムカラー関数内で Sass の mix() 関数を用いて明るくしたり暗くしたりすることで生成しています。

mix() は lighten() や darken() とは異なります。前者は色を白や黒と混ぜていますが、後者は色の明度を変更しているだけです。結果として、CodePen のデモのように、より完成度の高い色の組み合わせを実現しています。

tint-color() や shade-color() 関数は、生成する色の段階ごとに用意された $theme-color-interval 変数と mix() しています。ソースコードは scss/_functions.scss と scss/_variables.scss ファイルを参照してください。

色の Sass マップ

Bootstrap のソース Sass ファイルには、色のリストとその hex 値を簡単にループできる3つのマップがあります。

$colors は全てのベース (500) カラーを持っています。
$theme-colors は意味のある名前を持ったテーマカラーを持っています。
$grays はグレーの全ての明るさ違いの色を持っています。

scss/_variables.scss 内には、Bootstrap の色変数と Sass マップがあります。以下が $colors Sass マップの例です:

$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
);

コンポーネントで使われている色の変更は、マップへ値を追加・削除・編集することで行なえます。ただし、全ての コンポーネントがこの Sass マップを利用しているわけではありません。今後のアップデートでは改良が行われる予定です。それまでは、この Sass マップに ${color} 変数を追加することを検討してください。

サンプル

以下が Sass でこれらを使う例です:

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

カラーユーティリティクラスを用いることでも、500 カラー値を使った color と background-color の設定を行うことができます。