Couleur

Bootstrap est pris en charge par un système de couleurs étendu qui thématise nos styles et nos composants. Cela permet une personnalisation et une extension plus complètes pour tout projet.Commencez avec Bootstrap, le framework le plus populaire au monde pour créer des sites réactifs et mobiles, avec jsDelivr et un modèle de page de démarrage.

Sur cette page

Couleurs du thème

Nous utilisons un sous-ensemble de toutes les couleurs pour créer une palette de couleurs plus petite pour générer des combinaisons de couleurs, également disponible sous forme de variables Sass et d'une carte Sass dans le fichier scss/_variables.scss de Bootstrap.

Primary

Secondary

Success

Danger

Warning

Info

Light

Dark

Toutes ces couleurs sont disponibles sous forme de carte Sass, $theme-colors.

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

Consultez notre documentation sur les cartes et les boucles Sass pour savoir comment modifier ces couleurs.

Toutes les couleurs

Toutes les couleurs Bootstrap sont disponibles sous forme de variables Sass et d'une carte Sass dans le fichier scss/_variables.scss. Pour éviter d'augmenter la taille des fichiers, nous ne créons pas de classes de texte ou de couleur d'arrière-plan pour chacune de ces variables. Au lieu de cela, nous choisissons un sous-ensemble de ces couleurs pour une palette thématique.

Assurez-vous de surveiller les taux de contraste lorsque vous personnalisez les couleurs. Comme indiqué ci-dessous, nous avons ajouté trois rapports de contraste à chacune des couleurs principales : un pour les couleurs actuelles de la nuance, un pour le blanc et un pour le noir.

$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

Remarques sur Sass

Sass ne peut pas générer de variables par programmation, nous avons donc créé manuellement des variables pour chaque teinte et nuance nous-mêmes. Nous spécifions la valeur médiane (par exemple, $blue-500) et utilisons des fonctions de couleur personnalisées pour teinter (éclaircir) ou ombrer (assombrir) nos couleurs via le mix() fonction couleur.

Utiliser mix() n'est pas la même chose que lighten() et darken()—le premier mélange la couleur spécifiée avec du blanc ou noir, tandis que ce dernier ajuste uniquement la valeur de luminosité de chaque couleur. Le résultat est une suite de couleurs beaucoup plus complète, comme montré dans cette démo CodePen.

Nos fonctions tint-color() et shade-color() utilisent mix() avec notre $theme-color -variable d'intervalle, qui spécifie une valeur de pourcentage échelonnée pour chaque couleur mélangée que nous produisons. Voir les fichiers scss/_functions.scss et scss/_variables.scss pour le code source complet.

Cartes Sass en couleur

Les fichiers source Sass de Bootstrap incluent trois cartes pour vous aider à parcourir rapidement et facilement une liste de couleurs et leurs valeurs hexadécimales.

$colors répertorie toutes nos couleurs de base (500) disponibles
$theme-colors répertorie toutes les couleurs de thème sémantiquement nommées (indiquées ci-dessous)
$grays répertorie toutes les teintes et nuances de gris

Dans scss/_variables.scss, vous trouverez les variables de couleur de Bootstrap et la carte Sass. Voici un exemple de la carte $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
);

Ajoutez, supprimez ou modifiez des valeurs dans la carte pour mettre à jour la façon dont elles sont utilisées dans de nombreux autres composants. Malheureusement, à l'heure actuelle, tous les composants n'utilisent pas cette carte Sass. Les futures mises à jour s'efforceront d'améliorer cela. En attendant, prévoyez d'utiliser les variables ${color} et cette carte Sass.

Exemple

Voici comment vous pouvez les utiliser dans votre Sass :

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

Les classes utilitaires

Color et background sont également disponible pour définir color et background-color en utilisant les valeurs de couleur 500.

Bootstrap 5.2 | Personnalisation