Colours

Theme colors

We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap’s scss/_variables.scss file.

Primary

secondary

success

info

warning

danger

light

dark

All colours

All Bootstrap colours are available as Sass variables and a Sass map in scss/_variables.scss file. To avoid increased file sizes, we don’t create text or background color classes for each of these variables. Instead, we choose a subset of these colours for a theme palette.

Be sure to monitor contrast ratios as you customize colors. As shown below, we’ve added three contrast ratios to each of the main colours—one for the swatch’s current colors, one for against white, and one for against black.

$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

All theme colours

$konkon #fe669e

$konkon-100

$konkon-200

$konkon-300

$konkon-400

$konkon-500

$konkon-600

$konkon-700

$konkon-800

$konkon-900

$primary #4285f4

$primary-100

$primary-200

$primary-300

$primary-400

$primary-500

$primary-600

$primary-700

$primary-800

$primary-900

$secondary #878787

$secondary-100

$secondary-200

$secondary-300

$secondary-400

$secondary-500

$secondary-600

$secondary-700

$secondary-800

$secondary-900

$success #34a853

$success-100

$success-200

$success-300

$success-400

$success-500

$success-600

$success-700

$success-800

$success-900

$danger #ea4335

$danger-100

$danger-200

$danger-300

$danger-400

$danger-500

$danger-600

$danger-700

$danger-800

$danger-900

$warning #fbbc05

$warning-100

$warning-200

$warning-300

$warning-400

$warning-500

$warning-600

$warning-700

$warning-800

$warning-900

$info #6ba4ff

$info-100

$info-200

$info-300

$info-400

$info-500

$info-600

$info-700

$info-800

$info-900

$light #f8f9fa

$light-100

$light-200

$light-300

$light-400

$light-500

$light-600

$light-700

$light-800

$light-900

$dark #212529

$dark-100

$dark-200

$dark-300

$dark-400

$dark-500

$dark-600

$dark-700

$dark-800

$dark-900