Ver en GitHub

Color

Bootstrap está respaldado por un extenso sistema de colores que da tema a nuestros estilos y componentes. Esto permite una personalización y extensión más completa para cualquier proyecto.

On this page

Colores del tema

Usamos un subconjunto de todos los colores para crear una paleta de colores más pequeña para generar esquemas de color, también disponibles como variables Sass y un Sass map en el archivo scss/_variables.scss de Bootstrap.

Primary

Secondary

Success

Danger

Warning

Info

Light

Dark

Todos estos colores están disponibles como un Sass map, $theme-colors.

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

Consulta nuestra documentación de Sass maps y loops para saber cómo modificar estos colores.

Todos los colores

Todos los colores de Bootstrap están disponibles como variables Sass y un Sass map en el archivo scss/_variables.scss. Para evitar un aumento del tamaño de los archivos, no creamos clases de color de texto o fondo para cada una de estas variables. En su lugar, elegimos un subconjunto de estos colores para una paleta del tema.

Asegúrate de monitorear las relaciones de contraste al personalizar los colores. Como se muestra a continuación, hemos añadido tres relaciones de contraste a cada uno de los colores principales—una para los colores actuales de la muestra, una contra el blanco y una contra el negro.

$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

Notas sobre Sass

Sass no puede generar variables programáticamente, así que creamos manualmente las variables para cada tinte y sombra. Especificamos el valor del punto medio (p. ej., $blue-500) y usamos funciones de color personalizadas para teñir (aclarar) u oscurecer nuestros colores mediante la función de color mix() de Sass.

Usar mix() no es lo mismo que lighten() y darken()—el primero mezcla el color especificado con blanco o negro, mientras que los últimos solo ajustan el valor de luminosidad de cada color. El resultado es un conjunto de colores mucho más completo, como se muestra en esta demo de CodePen.

Nuestras funciones tint-color() y shade-color() usan mix() junto con nuestra variable $theme-color-interval, que especifica un valor porcentual escalonado para cada color mezclado que producimos. Consulta los archivos scss/_functions.scss y scss/_variables.scss para el código fuente completo.

Mapas de color de Sass

Los archivos fuente Sass de Bootstrap incluyen tres maps para ayudarte a recorrer rápidamente y de forma sencilla una lista de colores y sus valores hexadecimales.

$colors lista todos nuestros colores base (500) disponibles
$theme-colors lista todos los colores del tema con nombre semántico (mostrados a continuación)
$grays lista todos los tintes y sombras de gris

Dentro de scss/_variables.scss, encontrarás las variables de color y el Sass map de Bootstrap. Aquí hay un ejemplo del Sass map $colors:

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

Añade, elimina o modifica valores dentro del map para actualizar cómo se usan en muchos otros componentes. Lamentablemente, en este momento, no todos los componentes utilizan este Sass map. Las futuras actualizaciones se esforzarán por mejorar esto. Hasta entonces, planea usar las variables ${color} y este Sass map.

Ejemplo

Así es como puedes usarlos en tu Sass:

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

Las clases utilitarias de color y fondo también están disponibles para establecer color y background-color usando los valores de color 500.

Generando utilidades

Añadido en v5.1.0

Bootstrap no incluye utilidades de color y background-color para cada variable de color, pero puedes generarlas tú mismo con nuestra API de utilidades y nuestros mapas Sass extendidos añadidos en v5.1.0.

Para empezar, asegúrate de haber importado nuestras funciones, variables, mixins, y utilidades.
Usa nuestra función map-merge-multiple() para combinar rápidamente múltiples mapas Sass en un nuevo mapa.
Combina este nuevo mapa para extender cualquier utilidad con un nombre de clase {color}-{level}.

Aquí hay un ejemplo que genera utilidades de color de texto (p. ej., .text-purple-500) usando los pasos anteriores.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@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";

Esto generará nuevas utilidades .text-{color}-{level} para cada color y nivel. Puedes hacer lo mismo para cualquier otra utilidad y propiedad.