Bootstrap colors
All colors
All Bootstrap colors 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 colors for a theme palette
.
$blue
#0d6efd
$blue-100 #cfe2ff rgb(207, 226, 255)
$blue-200 #9ec5fe rgb(158, 197, 254)
$blue-300 #6ea8fe rgb(110, 168, 254)
$blue-400 #3d8bfd rgb(61, 139, 253)
$blue-500 #0d6efd rgb(13, 110, 253)
$blue-600 #0a58ca rgb(10, 88, 202)
$blue-700 #084298 rgb(8, 66, 152)
$blue-800 #052c65 rgb(5, 44, 101)
$blue-900 #031633 rgb(3, 22, 51)
$indigo
#6610f2
$indigo-100 #e0cffc rgb(224, 207, 252)
$indigo-200 #c29ffa rgb(194, 159, 250)
$indigo-300 #a370f7 rgb(163, 112, 247)
$indigo-400 #8540f5 rgb(133, 64, 245)
$indigo-500 #6610f2 rgb(102, 16, 242)
$indigo-600 #520dc2 rgb(82, 13, 194)
$indigo-700 #3d0a91 rgb(61, 10, 145)
$indigo-800 #290661 rgb(41, 6, 97)
$indigo-900 #140330 rgb(20, 3, 48)
$purple
#6f42c1
$purple-100 #e2d9f3 rgb(226, 217, 243)
$purple-200 #c5b3e6 rgb(197, 179, 230)
$purple-300 #a98eda rgb(169, 142, 218)
$purple-400 #8c68cd rgb(140, 104, 205)
$purple-500 #6f42c1 rgb(111, 66, 193)
$purple-600 #59359a rgb(89, 53, 154)
$purple-700 #432874 rgb(67, 40, 116)
$purple-800 #2c1a4d rgb(44, 26, 77)
$purple-900 #160d27 rgb(22, 13, 39)
$pink
#d63384
$pink-100 #f7d6e6 rgb(247, 214, 230)
$pink-200 #efadce rgb(239, 173, 206)
$pink-300 #e685b5 rgb(230, 133, 181)
$pink-400 #de5c9d rgb(222, 92, 157)
$pink-500 #d63384 rgb(214, 51, 132)
$pink-600 #ab296a rgb(171, 41, 106)
$pink-700 #801f4f rgb(128, 31, 79)
$pink-800 #561435 rgb(86, 20, 53)
$pink-900 #2b0a1a rgb(43, 10, 26)
$red
#dc3545
$red-100 #f8d7da rgb(248, 215, 218)
$red-200 #f1aeb5 rgb(241, 174, 181)
$red-300 #ea868f rgb(234, 134, 143)
$red-400 #e35d6a rgb(227, 93, 106)
$red-500 #dc3545 rgb(220, 53, 69)
$red-600 #b02a37 rgb(176, 42, 55)
$red-700 #842029 rgb(132, 32, 41)
$red-800 #58151c rgb(88, 21, 28)
$red-900 #2c0b0e rgb(44, 11, 14)
$orange
#fd7e14
$orange-100 #ffe5d0 rgb(255, 229, 208)
$orange-200 #fecba1 rgb(254, 203, 161)
$orange-300 #feb272 rgb(254, 178, 114)
$orange-400 #fd9843 rgb(253, 152, 67)
$orange-500 #fd7e14 rgb(253, 126, 20)
$orange-600 #ca6510 rgb(202, 101, 16)
$orange-700 #984c0c rgb(152, 76, 12)
$orange-800 #653208 rgb(101, 50, 8)
$orange-900 #331904 rgb(51, 25, 4)
$yellow
#ffc107
$yellow-100 #fff3cd rgb(255, 243, 205)
$yellow-200 #ffe69c rgb(255, 230, 156)
$yellow-300 #ffda6a rgb(255, 218, 106)
$yellow-400 #ffcd39 rgb(255, 205, 57)
$yellow-500 #ffc107 rgb(255, 193, 7)
$yellow-600 #cc9a06 rgb(204, 154, 6)
$yellow-700 #997404 rgb(153, 116, 4)
$yellow-800 #664d03 rgb(102, 77, 3)
$yellow-900 #332701 rgb(51, 39, 1)
$green
#198754
$green-100 #d1e7dd rgb(209, 231, 221)
$green-200 #a3cfbb rgb(163, 207, 187)
$green-300 #75b798 rgb(117, 183, 152)
$green-400 #479f76 rgb(71, 159, 118)
$green-500 #198754 rgb(25, 135, 84)
$green-600 #146c43 rgb(20, 108, 67)
$green-700 #0f5132 rgb(15, 81, 50)
$green-800 #0a3622 rgb(10, 54, 34)
$green-900 #051b11 rgb(5, 27, 17)
$teal
#20c997
$teal-100 #d2f4ea rgb(210, 244, 234)
$teal-200 #a6e9d5 rgb(166, 233, 213)
$teal-300 #79dfc1 rgb(121, 223, 193)
$teal-400 #4dd4ac rgb(77, 212, 172)
$teal-500 #20c997 rgb(32, 201, 151)
$teal-600 #1aa179 rgb(26, 161, 121)
$teal-700 #13795b rgb(19, 121, 91)
$teal-800 #0d503c rgb(13, 80, 60)
$teal-900 #06281e rgb(6, 40, 30)
$cyan
#0dcaf0
$cyan-100 #cff4fc rgb(207, 244, 252)
$cyan-200 #9eeaf9 rgb(158, 234, 249)
$cyan-300 #6edff6 rgb(110, 223, 246)
$cyan-400 #3dd5f3 rgb(61, 213, 243)
$cyan-500 #0dcaf0 rgb(13, 202, 240)
$cyan-600 #0aa2c0 rgb(10, 162, 192)
$cyan-700 #087990 rgb(8, 121, 144)
$cyan-800 #055160 rgb(5, 81, 96)
$cyan-900 #032830 rgb(3, 40, 48)
$gray-500
#adb5bd
$gray-100 #f8f9fa rgb(248, 249, 250)
$gray-200 #e9ecef rgb(233, 236, 239)
$gray-300 #dee2e6 rgb(222, 226, 230)
$gray-400 #ced4da rgb(206, 212, 218)
$gray-500 #adb5bd rgb(173, 181, 189)
$gray-600 #6c757d rgb(108, 117, 125)
$gray-700 #495057 rgb(73, 80, 87)
$gray-800 #343a40 rgb(52, 58, 64)
$gray-900 #212529 rgb(33, 37, 41)
$black
#000000 rgb(0, 0, 0)
$white
#ffffff rgb(255, 255, 255)
