- @colors = ['blue', 'indigo', 'purple', 'pink', 'red', 'orange', 'yellow', 'green', 'teal', 'cyan', 'gray', 'gray-dark'];
- @variants = ['100', '200', '300', '400', '500', '600', '700', '800', '900'];

.container.text-center
 %h1{:class=>"py-4"}
  Bootstrap 5 Color Palette Generator
  %br
  %small{:class=>"text-muted"} Including Color Variants
 %hr
 - @colors.each do |color|
  .row
   %div{:class=>"bg-#{color} col py-2 text-uppercase"} #{color}
  .row.mb-3
   - @variants.each do |variant|
    %div{:class=>"bg-#{color}-#{variant} col py-3"}
     %small= "#{color}-#{variant}"
 - @colors.each do |color|
  .row
   %div{:class=>"text-#{color} col py-2 text-uppercase"} #{color}
  .row.mb-3.no-gutters
   - @variants.each do |variant|
    %div{:class=>" col "}
     %div{:class=>"text-#{color}-#{variant} border border-#{color}-#{variant} mx-1 py-3"}
      %small= "#{color}-#{variant}"
 
View Compiled
$white:    #fff !default;
$black:    #000 !default;

$blue:      #007bff !default;
$indigo:    #6610f2 !default;
$purple:    #6f42c1 !default;
$pink:      #e83e8c !default;
$red:       #dc3545 !default;
$orange:    #fd7e14 !default;
$yellow:    #ffc107 !default;
$green:     #28a745 !default;
$teal:      #20c997 !default;
$cyan:      #17a2b8 !default;
$gray:      #BAB1AD !default;
$gray-dark: #403734 !default;

$color-variants: (
    100:  -10%,
    200:  -25%,
    300:  -50%,
    400:  -75%,
    500:  100%,
    600:   75%,
    700:   50%,
    800:   25%,
    900:   15%
);

$colors: () !default;
$colors: map-merge((
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "white":      $white,
  "gray":       $gray,
  "gray-dark":  $gray-dark
), $colors);

//  Add color variants to $colors
@each $color-name, $color in $colors {       
    @each $variant-name, $percent in $color-variants {
        $mix-color: if($percent < 0%, white, black);
        $colors: map-merge($colors, ($color-name+'-'+$variant-name: mix($color, $mix-color, abs($percent))));
    }
}

/* remap grays */

$gray-100: map-get($colors, gray-100);
$gray-200: map-get($colors, gray-200);
$gray-300: map-get($colors, gray-300);
$gray-400: map-get($colors, gray-400);
$gray-500: map-get($colors, gray-500);
$gray-600: map-get($colors, gray-600);
$gray-700: map-get($colors, gray-700);
$gray-800: map-get($colors, gray-800);
$gray-900: map-get($colors, gray-900);

$enable-hover-media-query: true;

/* Bootstrap 4 mixins - no change */

@mixin hover {
  // TODO: re-enable along with mq4-hover-shim
//  @if $enable-hover-media-query {
//    // See Media Queries Level 4: https://drafts.csswg.org/mediaqueries/#hover
//    // Currently shimmed by https://github.com/twbs/mq4-hover-shim
//    @media (hover: hover) {
//      &:hover { @content }
//    }
//  }
//  @else {
    &:hover { @content; }
//  }
}

@mixin hover-focus {
  @if $enable-hover-media-query {
    &:focus {
      @content;
    }
    @include hover { @content; }
  } @else {
    &:focus,
    &:hover {
      @content;
    }
  }
}

@mixin text-emphasis-variant($parent, $color) {
  #{$parent} {
    color: $color !important;
  }
  a#{$parent} {
    @include hover-focus {
      color: darken($color, 10%) !important;
    }
  }
}

@mixin bg-variant($parent, $color) {
  #{$parent} {
    background-color: $color !important;
  }
  a#{$parent} {
    @include hover-focus {
      background-color: darken($color, 10%) !important;
    }
  }
}

// Color contrast - from Bootstrap 4 utilities - no change 
@function color-yiq($color) {
  $r: red($color);
  $g: green($color);
  $b: blue($color);

  $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;

  @if ($yiq >= 150) {
    @return #111;
  } @else {
    @return #fff;
  }
}

/* from Bootstrap 4 utilities - replaced $theme-colors with $colors */

// text colors
@each $color, $value in $colors {
  @include text-emphasis-variant(".text-#{$color}", $value);
}

// background colors
@each $color, $value in $colors {
  @include bg-variant(".bg-#{$color}", $value);
}

// background text contrast
@each $color, $value in $colors {
  .bg-#{$color} {
    color: color-yiq($value);
  }
}

// border colors
@each $color, $value in $colors {
  .border-#{$color} {
    border-color: $value !important;
  }
}
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js