פלטת הצבעים של Bootstrap

צבעי ערכת הנושא ב-Bootstrap 5.3

הצבעים הסמנטיים של Bootstrap, עם משתנה ה-CSS, משתנה ה-Sass ומחלקת הרקע של כל אחד.

הפלטה המלאה של Bootstrap 5.3

עשרה צבעים ועוד gray, לכל אחד גוונים מ-100 עד 900. הגוון 500 הוא צבע הבסיס. פתח צבע כדי לראות את הגוונים שלו ולהעתיק אותם.

Bootstrap 4 לעומת Bootstrap 5

צבעי ערכת הנושא ב-Bootstrap 4.6 לעומת Bootstrap 5.3. הצבעים שהשתנו הם primary, success, info ו-dark.

העתקת הפלטה המלאה

משתני CSS (HEX)

העתקה: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⁩;
}

משתני Sass

העתקה$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⁩;

פריימוורקים נוספים

Tailwind CSS, Material Design ו-Bootstrap הם סימנים מסחריים של בעליהם. הערכים לקוחים מהתיעוד הרשמי ומהחבילות שפורסמו של כל פרויקט: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.