De kleuren van Bootstrap 5.3: de theme colors (primary, secondary, success…) en het volledige palet van blue-100 tot gray-900, met Sass- en CSS-variabelen klaar om te kopiëren.
De semantische kleuren van Bootstrap, met hun CSS-variabele, Sass-variabele en achtergrondklasse.
Tien kleuren plus gray, met tinten van 100 tot 900. Tint 500 is de basiskleur. Open een kleur om de tinten te bekijken en te kopiëren.
De theme colors van Bootstrap 4.6 vergeleken met die van Bootstrap 5.3. Primary, success, info en dark zijn veranderd.
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;Het blauw van Bootstrap 5 ($blue en $primary) is #0D6EFD. In Bootstrap 4 was primary #007BFF.
Bootstrap 5.3 stelt de theme colors beschikbaar als CSS-variabelen, bijvoorbeeld var(--bs-primary) of var(--bs-success). In Sass kun je $primary gebruiken of de tinten van het palet, zoals $blue-500.
Bootstrap 5.3 heeft acht theme colors (primary, secondary, success, danger, warning, info, light en dark) en een palet van tien kleuren (blue, indigo, purple, pink, red, orange, yellow, green, teal en cyan) plus gray, elk met tinten van 100 tot 900.
Tailwind CSS, Material Design en Bootstrap zijn merken van hun respectieve eigenaren. De waarden komen uit hun documentatie en openbare pakketten: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.