Skip to content

Instantly share code, notes, and snippets.

@Justintime50
Last active November 14, 2024 19:31
Show Gist options
  • Save Justintime50/ff46af4176d35fb325a309ec8e29dc9f to your computer and use it in GitHub Desktop.
Save Justintime50/ff46af4176d35fb325a309ec8e29dc9f to your computer and use it in GitHub Desktop.
Bootstrap 5 Color Palette
// Bootstrap 5 Color Palette
// Docs: https://getbootstrap.com/docs/5.3/customize/color
// Theme colors
$primary: #0d6efd;
$secondary: #6c757d;
$success: #198754;
$info: #0dcaf0;
$warning: #ffc107;
$danger: #dc3545;
$light: #f8f9fa;
$dark: #212529;
// Blue
$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
$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
$purple-100: #e2d9f3;
$purple-200: #c5b3e6;
$purple-300: #a98dda;
$purple-400: #8c66cd;
$purple-500: #6f42c1;
$purple-600: #59359a;
$purple-700: #432874;
$purple-800: #2c1a4d;
$purple-900: #160d27;
// Pink
$pink-100: #f7c5da;
$pink-200: #ef8bb5;
$pink-300: #e6528f;
$pink-400: #de186a;
$pink-500: #d63384;
$pink-600: #b02a68;
$pink-700: #89204d;
$pink-800: #631533;
$pink-900: #3c0b1a;
// Red
$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
$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
$yellow-100: #fff3cd;
$yellow-200: #ffe69c;
$yellow-300: #ffd966;
$yellow-400: #ffcc33;
$yellow-500: #ffc107;
$yellow-600: #cc9a06;
$yellow-700: #997404;
$yellow-800: #664d03;
$yellow-900: #332701;
// Green
$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
$teal-100: #d2f4ea;
$teal-200: #a6e9d5;
$teal-300: #79ddc0;
$teal-400: #4dd2aa;
$teal-500: #20c997;
$teal-600: #1aa179;
$teal-700: #13795b;
$teal-800: #0d503c;
$teal-900: #06281e;
// Cyan
$cyan-100: #c5f5fc;
$cyan-200: #8beefa;
$cyan-300: #51e8f7;
$cyan-400: #17e2f4;
$cyan-500: #0dcaf0;
$cyan-600: #0aa2c0;
$cyan-700: #087990;
$cyan-800: #055160;
$cyan-900: #032830;
// Gray
$white: #fff;
$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;
$black: #000;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment