Bootstrap 5.3의 색을 담았어요. 테마 색상(primary, secondary, success…)과 blue-100부터 gray-900까지 전체 팔레트를 Sass·CSS 변수와 함께 복사할 수 있어요.
Bootstrap의 의미 색상을 CSS 변수, Sass 변수, 배경 클래스와 함께 담았어요.
10가지 색과 gray가 있고, 각각 100~900 셰이드가 있어요. 500이 기본 색이에요. 색을 열면 셰이드를 보고 복사할 수 있어요.
Bootstrap 4.6의 테마 색상을 Bootstrap 5.3과 비교했어요. 바뀐 색은 primary, success, info, 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;Bootstrap 5의 파란색($blue와 $primary)은 #0D6EFD 색이에요. Bootstrap 4에서 primary는 #007BFF 색이었어요.
Bootstrap 5.3은 테마 색상을 CSS 변수로 제공해요. var(--bs-primary)나 var(--bs-success)처럼 쓰세요. Sass에서는 $primary나 $blue-500 같은 팔레트 셰이드를 쓸 수 있어요.
Bootstrap 5.3에는 테마 색상 8가지(primary, secondary, success, danger, warning, info, light, dark)와 10가지 색(blue, indigo, purple, pink, red, orange, yellow, green, teal, cyan)에 gray를 더한 팔레트가 있어요. 각 색에는 100부터 900까지 셰이드가 있어요.
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.