Bootstrap 4 provides us with a handful of color utility classes:
Those classes are used in various contexts. For instance with the primary color, we have
So yes, those classes are quite handy.
But what if you want more classes, what if for instance you want to create a
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
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
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,
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.