カラーコード(Bootstrap)ｖ5.0.2/ｖ5.3.x

Bootstrapは、登場してからずっと更新され続けています。
コードをコピーする際は、必ず使用しているバージョンをきちんとご確認ください。
バージョンによっては、クラス名の確認また書き換えだけで、大変なことになる場合もあります。（私がそうでした。）

基本カラー

基本カラー

使用例

下記のように、色の指定を変数を用いることで統一性を維持することができます。

ソースコード　CSSの例

.component {
  color: var(--bs-gray-800);
  background-color: var(--bs-gray-100);　←この部分
  border: 1px solid var(--bs-gray-200);
  border-radius: .25rem;
}

.component-header {
  color: var(--bs-purple);
}

var(–bs-gray-100);　に何色が指定されているかが、下記の一覧となります。

色指定のまとめ表

用途の指定	色の指定	カラーコード
$primary	$blue	#0d6efd;
	$indigo	#6610f2;
	$purple	#6f42c1;
	$pink	#d63384;
$danger	$red	#dc3545;
	$orange	#fd7e14;
$warning	$yellow	#ffc107;
$success	$green	#198754;
	$teal	#20c997;
$info	$cyan	#0dcaf0;
$secondary	$gray-600	#6c757d;
$light	$gray-100	#f8f9fa;
$dark	$gray-900	#212529;

原色のカラーコード

基本設定されているカラーコードです。

このカラーコードは”scss/_variables.scss”で管理されています。

$blue	#0d6efd;
$indigo	#6610f2;
$purple	#6f42c1;
$pink	#d63384;
$red	#dc3545;
$orange	#fd7e14;
$yellow	#ffc107;
$green	#198754;
$teal	#20c997;
$cyan	#0dcaf0;

グレースケールカラー

グレースケールカラーも利用可能

$white	#fff;
$gray-100	#f8f9fa;
$gray-200	#e9ecef;
$gray-300	#dee2e6;
$gray-400	#ced4da;
$gray-500	#adb5bd;
$gray-600	#6c757d;
$gray-700	#495057;
$gray-800	#343a40;
$gray-900	#212529;
$black	#000;

多数ある設定カラーコード一覧

カラーのコード一覧。

実は用途別以外にもたくさんの色が設定されていますので、CSSでカスタムできます。

–bs-blue: #0d6efd;	–bs-blue: #0d6efd;
–bs-indigo: #6610f2;	–bs-indigo: #6610f2;
–bs-purple: #6f42c1;	–bs-purple: #6f42c1;
–bs-pink: #d63384;	–bs-pink: #d63384;
–bs-red: #dc3545;	–bs-red: #dc3545;
–bs-orange: #fd7e14;	–bs-orange: #fd7e14;
–bs-yellow: #ffc107;	–bs-yellow: #ffc107;
–bs-green: #198754;	–bs-green: #198754;
–bs-teal: #20c997;	–bs-teal: #20c997;
–bs-cyan: #0dcaf0;	–bs-cyan: #0dcaf0;
–bs-black: #000;	–bs-black: #000;
–bs-white: #fff;	–bs-white: #fff;
–bs-gray: #6c757d;	–bs-gray: #6c757d;
–bs-gray-dark: #343a40;	–bs-gray-dark: #343a40;
–bs-gray-100: #f8f9fa;	–bs-gray-100: #f8f9fa;
–bs-gray-200: #e9ecef;	–bs-gray-200: #e9ecef;
–bs-gray-300: #dee2e6;	–bs-gray-300: #dee2e6;
–bs-gray-400: #ced4da;	–bs-gray-400: #ced4da;
–bs-gray-500: #adb5bd;	–bs-gray-500: #adb5bd;
–bs-gray-600: #6c757d;	–bs-gray-600: #6c757d;
–bs-gray-700: #495057;	–bs-gray-700: #495057;
–bs-gray-800: #343a40;	–bs-gray-800: #343a40;
–bs-gray-900: #212529;	–bs-gray-900: #212529;
–bs-primary: #0d6efd;	–bs-primary: #0d6efd;
–bs-secondary: #6c757d;	–bs-secondary: #6c757d;
–bs-success: #198754;	–bs-success: #198754;
–bs-info: #0dcaf0;	–bs-info: #0dcaf0;
–bs-warning: #ffc107;	–bs-warning: #ffc107;
–bs-danger: #dc3545;	–bs-danger: #dc3545;
–bs-light: #f8f9fa;	–bs-light: #f8f9fa;
–bs-dark: #212529;	–bs-dark: #212529;
–bs-primary-rgb: 13,110,253;	–bs-primary-rgb: 13,110,253;
–bs-secondary-rgb: 108,117,125;	–bs-secondary-rgb: 108,117,125;
–bs-success-rgb: 25,135,84;	–bs-success-rgb: 25,135,84;
–bs-info-rgb: 13,202,240;	–bs-info-rgb: 13,202,240;
–bs-warning-rgb: 255,193,7;	–bs-warning-rgb: 255,193,7;
–bs-danger-rgb: 220,53,69;	–bs-danger-rgb: 220,53,69;
–bs-light-rgb: 248,249,250;	–bs-light-rgb: 248,249,250;
–bs-dark-rgb: 33,37,41;	–bs-dark-rgb: 33,37,41;
–bs-primary-text-emphasis: #052c65;	–bs-primary-text-emphasis: #052c65;
–bs-secondary-text-emphasis: #2b2f32;	–bs-secondary-text-emphasis: #2b2f32;
–bs-success-text-emphasis: #0a3622;	–bs-success-text-emphasis: #0a3622;
–bs-info-text-emphasis: #055160;	–bs-info-text-emphasis: #055160;
–bs-warning-text-emphasis: #664d03;	–bs-warning-text-emphasis: #664d03;
–bs-danger-text-emphasis: #58151c;	–bs-danger-text-emphasis: #58151c;
–bs-light-text-emphasis: #495057;	–bs-light-text-emphasis: #495057;
–bs-dark-text-emphasis: #495057;	–bs-dark-text-emphasis: #495057;
–bs-primary-bg-subtle: #cfe2ff;	–bs-primary-bg-subtle: #cfe2ff;
–bs-secondary-bg-subtle: #e2e3e5;	–bs-secondary-bg-subtle: #e2e3e5;
–bs-success-bg-subtle: #d1e7dd;	–bs-success-bg-subtle: #d1e7dd;
–bs-info-bg-subtle: #cff4fc;	–bs-info-bg-subtle: #cff4fc;
–bs-warning-bg-subtle: #fff3cd;	–bs-warning-bg-subtle: #fff3cd;
–bs-danger-bg-subtle: #f8d7da;	–bs-danger-bg-subtle: #f8d7da;
–bs-light-bg-subtle: #fcfcfd;	–bs-light-bg-subtle: #fcfcfd;
–bs-dark-bg-subtle: #ced4da;	–bs-dark-bg-subtle: #ced4da;
–bs-primary-border-subtle: #9ec5fe;	–bs-primary-border-subtle: #9ec5fe;
–bs-secondary-border-subtle: #c4c8cb;	–bs-secondary-border-subtle: #c4c8cb;
–bs-success-border-subtle: #a3cfbb;	–bs-success-border-subtle: #a3cfbb;
–bs-info-border-subtle: #9eeaf9;	–bs-info-border-subtle: #9eeaf9;
–bs-warning-border-subtle: #ffe69c;	–bs-warning-border-subtle: #ffe69c;
–bs-danger-border-subtle: #f1aeb5;	–bs-danger-border-subtle: #f1aeb5;
–bs-light-border-subtle: #e9ecef;	–bs-light-border-subtle: #e9ecef;
–bs-dark-border-subtle: #adb5bd;	–bs-dark-border-subtle: #adb5bd;
–bs-white-rgb: 255,255,255;	–bs-white-rgb: 255,255,255;
–bs-black-rgb: 0,0,0;	–bs-black-rgb: 0,0,0;