The colors of Bootstrap 5.3: the theme colors (primary, secondary, success…) and the full palette from blue-100 to gray-900, with Sass and CSS variables ready to copy.
Bootstrap’s semantic colors, with their CSS variable, Sass variable and background class.
Ten colors plus gray, with shades from 100 to 900. Shade 500 is the base color. Open a color to see and copy its shades.
The Bootstrap 4.6 theme colors compared with Bootstrap 5.3. The ones that changed are primary, success, info and dark.
Bootstrap 5.3 #0D6EFD
Bootstrap 4.6 #007BFF
Bootstrap 5.3 #6C757D
Bootstrap 4.6 #6C757D
Bootstrap 5.3 #198754
Bootstrap 4.6 #28A745
Bootstrap 5.3 #DC3545
Bootstrap 4.6 #DC3545
Bootstrap 5.3 #FFC107
Bootstrap 4.6 #FFC107
Bootstrap 5.3 #0DCAF0
Bootstrap 4.6 #17A2B8
Bootstrap 5.3 #F8F9FA
Bootstrap 4.6 #F8F9FA
Bootstrap 5.3 #212529
Bootstrap 4.6 #343A40
:root {
--bs-primary: #0d6efd;
--bs-secondary: #6c757d;
--bs-success: #198754;
--bs-danger: #dc3545;
--bs-warning: #ffc107;
--bs-info: #0dcaf0;
--bs-light: #f8f9fa;
--bs-dark: #212529;
}$primary: #0d6efd;
$secondary: #6c757d;
$success: #198754;
$danger: #dc3545;
$warning: #ffc107;
$info: #0dcaf0;
$light: #f8f9fa;
$dark: #212529;
$blue-100: #cfe2ff;
$blue-200: #9ec5fe;
$blue-300: #6ea8fe;
$blue-400: #3d8bfd;
$blue-500: #0d6efd;
$blue-600: #0a58ca;
$blue-700: #084298;
$blue-800: #052c65;
$blue-900: #031633;
$indigo-100: #e0cffc;
$indigo-200: #c29ffa;
$indigo-300: #a370f7;
$indigo-400: #8540f5;
$indigo-500: #6610f2;
$indigo-600: #520dc2;
$indigo-700: #3d0a91;
$indigo-800: #290661;
$indigo-900: #140330;
$purple-100: #e2d9f3;
$purple-200: #c5b3e6;
$purple-300: #a98eda;
$purple-400: #8c68cd;
$purple-500: #6f42c1;
$purple-600: #59359a;
$purple-700: #432874;
$purple-800: #2c1a4d;
$purple-900: #160d27;
$pink-100: #f7d6e6;
$pink-200: #efadce;
$pink-300: #e685b5;
$pink-400: #de5c9d;
$pink-500: #d63384;
$pink-600: #ab296a;
$pink-700: #801f4f;
$pink-800: #561435;
$pink-900: #2b0a1a;
$red-100: #f8d7da;
$red-200: #f1aeb5;
$red-300: #ea868f;
$red-400: #e35d6a;
$red-500: #dc3545;
$red-600: #b02a37;
$red-700: #842029;
$red-800: #58151c;
$red-900: #2c0b0e;
$orange-100: #ffe5d0;
$orange-200: #fecba1;
$orange-300: #feb272;
$orange-400: #fd9843;
$orange-500: #fd7e14;
$orange-600: #ca6510;
$orange-700: #984c0c;
$orange-800: #653208;
$orange-900: #331904;
$yellow-100: #fff3cd;
$yellow-200: #ffe69c;
$yellow-300: #ffda6a;
$yellow-400: #ffcd39;
$yellow-500: #ffc107;
$yellow-600: #cc9a06;
$yellow-700: #997404;
$yellow-800: #664d03;
$yellow-900: #332701;
$green-100: #d1e7dd;
$green-200: #a3cfbb;
$green-300: #75b798;
$green-400: #479f76;
$green-500: #198754;
$green-600: #146c43;
$green-700: #0f5132;
$green-800: #0a3622;
$green-900: #051b11;
$teal-100: #d2f4ea;
$teal-200: #a6e9d5;
$teal-300: #79dfc1;
$teal-400: #4dd4ac;
$teal-500: #20c997;
$teal-600: #1aa179;
$teal-700: #13795b;
$teal-800: #0d503c;
$teal-900: #06281e;
$cyan-100: #cff4fc;
$cyan-200: #9eeaf9;
$cyan-300: #6edff6;
$cyan-400: #3dd5f3;
$cyan-500: #0dcaf0;
$cyan-600: #0aa2c0;
$cyan-700: #087990;
$cyan-800: #055160;
$cyan-900: #032830;
$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;The Bootstrap 5 blue ($blue and $primary) is #0D6EFD. In Bootstrap 4, primary was #007BFF.
Bootstrap 5.3 exposes the theme colors as CSS variables, for example var(--bs-primary) or var(--bs-success). In Sass you can use $primary or palette shades such as $blue-500.
Bootstrap 5.3 has eight theme colors (primary, secondary, success, danger, warning, info, light and dark) and a palette of ten colors (blue, indigo, purple, pink, red, orange, yellow, green, teal and cyan) plus gray, each with shades from 100 to 900.
Tailwind CSS, Material Design and Bootstrap are trademarks of their respective owners. The values come from their public documentation and packages: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.