[備忘] Boostrap5 のカラーコード一覧

[MITSUHIRO-KURIKI]

開発者ツールで手移ししたので備忘

@charset "UTF-8";
/* Custom boostrap color 
   https://bootstrap-guide.com/customize/css-variables */

:root {
  --bs-blue:        #0d6efd;
  --bs-indigo:      #6610f2;
  --bs-purple:      #6f42c1;
  --bs-pink:        #d63384;
  --bs-red:         #dc3545;
  --bs-orange:      #fd7e14;
  --bs-yellow:      #ffc107;
  --bs-green:       #198754;
  --bs-teal:        #20c997;
  --bs-cyan:        #0dcaf0;
  --bs-black:       #000;
  --bs-black-rgb:     0, 0, 0;
  --bs-white:       #fff;
  --bs-white-rgb:     255, 255, 255;
  --bs-gray:        #6c757d;
  --bs-gray-dark:   #343a40;
  --bs-gray-100:    #f8f9fa;
  --bs-gray-200:    #e9ecef;
  --bs-gray-300:    #dee2e6;
  --bs-gray-400:    #ced4da;
  --bs-gray-500:    #adb5bd;
  --bs-gray-600:    #6c757d;
  --bs-gray-700:    #495057;
  --bs-gray-800:    #343a40;
  --bs-gray-900:    #212529;
  --bs-primary:     #0d6efd;
  --bs-primary-rgb:   13, 110, 253;
  --bs-secondary:   #6c757d;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success:     #198754;
  --bs-success-rgb:   25, 135, 84;
  --bs-info:        #0dcaf0;
  --bs-info-rgb:      13, 202, 240;
  --bs-warning:     #ffc107;
  --bs-warning-rgb:   255, 193, 7;
  --bs-danger:      #dc3545;
  --bs-danger-rgb:    220, 53, 69;
  --bs-light:       #f8f9fa;
  --bs-light-rgb:     248, 249, 250;
  --bs-dark:        #212529;
  --bs-dark-rgb:      33, 37, 41;

  /* bs-gradient */
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0));

  /* bs-heading-color */
  --bs-heading-color: inherit;

  /* bs-link-decoration */
  --bs-link-decoration: underline;

  /* bs-border */
  --bs-border-width:       1px;
  --bs-border-style:       solid;
  --bs-border-radius:      .375rem;
  --bs-border-radius-sm:   .25rem;
  --bs-border-radius-lg:   .5rem;
  --bs-border-radius-xl:   1rem;
  --bs-border-radius-xxl:  2rem;
  --bs-border-radius-2xl:  var(--bs-border-radius-xxl);
  --bs-border-radius-pill: 50rem;

  /* bs-button */
  --bs-btn-color-light: var(--bs-light);
  --bs-btn-color-dark:  var(--bs-dark);

  /* bs-box-shadow */
  --bs-box-shadow:       0 .5rem 1rem rgba(0, 0, 0, .15);
  --bs-box-shadow-sm:    0 0.125rem 0.25rem rgba(0, 0, 0, .075);
  --bs-box-shadow-lg:    0 1rem 3rem rgba(0, 0, 0, 0.175);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, .075);

  /* bs-focus-ring */
  --bs-focus-ring-width:   .25rem;
  --bs-focus-ring-opacity: .25;
}
[data-bs-theme="light"] {

  /* bs-****-text-emphasis */
  --bs-primary-text-emphasis:  #052c65;
  --bs-secondary-text-emphasis:#2b2f32;
  --bs-success-text-emphasis:  #0a3622;
  --bs-info-text-emphasis:     #055160;
  --bs-warning-text-emphasis:  #664d03;
  --bs-danger-text-emphasis:   #58151c;
  --bs-light-text-emphasis:    #495057;
  --bs-dark-text-emphasis:     #495057;

  /* bs-****-bg-subtle */
  --bs-primary-bg-subtle:   #cfe2ff;
  --bs-secondary-bg-subtle: #e2e3e5;
  --bs-success-bg-subtle:   #d1e7dd;
  --bs-info-bg-subtle:      #cff4fc;
  --bs-warning-bg-subtle:   #fff3cd;
  --bs-danger-bg-subtle:    #f8d7da;
  --bs-light-bg-subtle:     #fcfcfd;
  --bs-dark-bg-subtle:      #ced4da;
  
  /* bs-****-border-subtle */
  --bs-primary-border-subtle:   #9ec5fe;
  --bs-secondary-border-subtle: #c4c8cb;
  --bs-success-border-subtle:   #a3cfbb;
  --bs-info-border-subtle:      #9eeaf9;
  --bs-warning-border-subtle:   #ffe69c;
  --bs-danger-border-subtle:    #f1aeb5;
  --bs-light-border-subtle:     #e9ecef;
  --bs-dark-border-subtle:      #adb5bd;

  /* bs-body-bg */
  --bs-body-color:   #212529;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg:      #fff;
  --bs-body-bg-rgb:    255, 255, 255;

  /* bs-emphasis-color */
  --bs-emphasis-color:   #000;
  --bs-emphasis-color-rgb: 0, 0, 0;
  /* bs-secondary-color */
  --bs-secondary-color:   rgba(33, 37, 41, .75);
  --bs-secondary-color-rgb: 33, 37, 41;
  --bs-secondary-bg:      #e9ecef;
  --bs-secondary-bg-rgb:    233, 236, 239;
  /* bs-tertiary-color */
  --bs-tertiary-color:   rgba(33, 37, 41, .5);
  --bs-tertiary-color-rgb: 33, 37, 41;
  --bs-tertiary-bg:      #f8f9fa;
  --bs-tertiary-bg-rgb:    248, 249, 250;

  /* bs-link-color */
  --bs-link-color:         #0d6efd;
  --bs-link-color-rgb:       13, 110, 253;
  --bs-link-hover-color:   #0a58ca;
  --bs-link-hover-color-rgb: 10, 88, 202;

  /* bs-code-color */
  --bs-code-color: #d63384;

  /* bs-highlight-color */
  --bs-highlight-color: #212529;
  --bs-highlight-bg:    #fff3cd;

  /* bs-border-color */
  --bs-border-color:             #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, .175);

  /* bs-button */
  --bs-button-bg-color: var(--bs-light);

  /* bs-focus-color */
  --bs-focus-ring-color: rgba(13, 110, 253, .25);

  /* bs-form */
  --bs-form-valid-color:          #198754;
  --bs-form-valid-border-color:   #198754;
  --bs-form-invalid-color:        #dc3545;
  --bs-form-invalid-border-color: #dc3545;
}
[data-bs-theme="dark"] {
    color-scheme: dark;

    /* bs-****-text-emphasis */
    --bs-primary-text-emphasis:   #6ea8fe;
    --bs-secondary-text-emphasis: #a7acb1;
    --bs-success-text-emphasis:   #75b798;
    --bs-info-text-emphasis:      #6edff6;
    --bs-warning-text-emphasis:   #ffda6a;
    --bs-danger-text-emphasis:    #ea868f;
    --bs-light-text-emphasis:     #f8f9fa;
    --bs-dark-text-emphasis:      #dee2e6;

    /* bs-****-bg-subtle */
    --bs-primary-bg-subtle:   #031633;
    --bs-secondary-bg-subtle: #161719;
    --bs-success-bg-subtle:   #051b11;
    --bs-info-bg-subtle:      #032830;
    --bs-warning-bg-subtle:   #332701;
    --bs-danger-bg-subtle:    #2c0b0e;
    --bs-light-bg-subtle:     #343a40;
    --bs-dark-bg-subtle:      #1a1d20;

    /* bs-****-border-subtle */
    --bs-primary-border-subtle:   #084298;
    --bs-secondary-border-subtle: #41464b;
    --bs-success-border-subtle:   #0f5132;
    --bs-info-border-subtle:      #087990;
    --bs-warning-border-subtle:   #997404;
    --bs-danger-border-subtle:    #842029;
    --bs-light-border-subtle:     #495057;
    --bs-dark-border-subtle:      #343a40;

    /* bs-body-bg */
    --bs-body-color:   #dee2e6;
    --bs-body-color-rgb: 222, 226, 230;
    --bs-body-bg:      #212529;
    --bs-body-bg-rgb:    33, 37, 41;

    /* bs-emphasis-color */
    --bs-emphasis-color:   #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    /* bs-secondary-color */
    --bs-secondary-color:   rgba(222, 226, 230, .75);
    --bs-secondary-color-rgb: 222, 226, 230;
    --bs-secondary-bg:      #343a40;
    --bs-secondary-bg-rgb:    52, 58, 64;
    /* bs-tertiary-color */
    --bs-tertiary-color:   rgba(222, 226, 230, .5);
    --bs-tertiary-color-rgb: 222, 226, 230;
    --bs-tertiary-bg:      #2b3035;
    --bs-tertiary-bg-rgb:    43, 48, 53;

    /* bs-link-color */
    --bs-link-color:         #6ea8fe;
    --bs-link-hover-color:   #8bb9fe;
    --bs-link-color-rgb:       110, 168, 254;
    --bs-link-hover-color-rgb: 139, 185, 254;

    /* bs-code-color */
    --bs-code-color: #e685b5;

    /* bs-highlight-color */
    --bs-highlight-color: #dee2e6;
    --bs-highlight-bg:    #664d03;

    /* bs-border-color */
    --bs-border-color:             #495057;
    --bs-border-color-translucent: rgba(255, 255, 255, .15);

    /* bs-button */
    --bs-button-bg-color: var(--bs-dark);

    /* bs-focus-color */
    --bs-focus-ring-color: rgba(13, 110, 253, .25);

    /* bs-form */
    --bs-form-valid-color:          #75b798;
    --bs-form-valid-border-color:   #75b798;
    --bs-form-invalid-color:        #ea868f;
    --bs-form-invalid-border-color: #ea868f;
  }

^{https://github.com/MITSUHIRO-KURIKI/DjangoTemplate/blob/main/static/templates/common/css/bs-color/bs-color.css}