Bootstrap 4 Color Utility Generator

What is this?

Bootstrap 4 provides us with a handful of color utility classes: primary, secondary, success, danger, warning, info, light and dark .

Those classes are used in various contexts. For instance with the primary color, we have the following variations:

alert-primary
badge-primary
bg-primary
border-primary
btn-primary
btn-outline-primary
list-group-item-primary
table-primary
text-primary

So yes, those classes are quite handy.
But what if you want more classes, what if for instance you want to create a purple color class, so that you could use all the variations as well (alert-purple, badge-purple, ...)?

If you want to create such a custom color, you'll have to create a few css rules (28 to be precise), and you'll have to choose 10 color tints, which can be cumbersome.
That's why I created this generator, so that it can generate those rules (and tints) for us.

How to use? Well, do as you like; but personally I like to create a color.css file, and put all my generated colors in there, and only those generated colors (basically pasting the content generated by this generator in that color.css file). Then, I create a link tag inside the html head, pointing to this color.css file.
Then I'm all set.

Ps: The "change colors live ui" has been tested in Firefox and Chrome only.
However the generate button will always generate the right content, independently of the browser used.

Please choose a color name.

Ex: primary, ternary, pink, whatever...

Please choose a color name.

Use hex format (Ex: #005579).

SCSS

Preview

This is an alert. Check it out!

More info here

Badge link Text link

Background color

Background link

List group item

List group item action

List group item action active

1	Table hover row