Bootstrap Background color mixer

With more that 190,000+ color combination you can create almost unlimited color variations

Overview

With Torus Kit you can create more than 190,000 color combinations just with using a 24 base colors picked from a color wheel. This is done by using hsla() color function which allows to control saturation, lightness and alpha together with CSS custom properties. This way, it’s possible to control every parameter of hsla() function independently for every predefined color, even for .bg-primary, .bg-secondary, .bg-grey, .bg-black and .bg-white class.

Instead of create a new CSS class for every color with its shade (and create a huge CSS file), we allows you to combine a basic color with a saturation and lightness. Optionally with an alpha opacity.

How to use

Pick any of the 24 predefined with colors in Color picker below with .bg-{parameter}-{value} of the CSS hsla() color function.

Where parameter is one of:

  • h for classes that sets hue
  • s for classes that sets saturation
  • l for classes that sets lightness
  • a for classes that sets alpha opacity

And value is a number from 0 to 100 multiplied by 5.

Note that default value of every color from 24 predefined one is hsla({hue}, 100%, 50%, 1) means that saturation=100%, lightness=50% and alpha=1, so you don’t need to set these values: .bg-s-100, .bg-l-50 and .bg-a-100.

Examples

This example shows .bg-h-240, which is a blue color, compared to .bg-h-240 with .bg-l-30 class that sets 30% of lightness from the default 50% and make it darker.

.bg-h-240
.bg-h-240 .bg-l-30
<div class="p-3 mb-2 text-white bg-h-240">.bg-h-240</div>
<div class="p-3 mb-2 text-white bg-h-240 bg-l-30">.bg-h-240 .bg-l-30</div>

This example shows how to create a teal color with combination of basic .bg-h-180 (cyan) color and 25% saturation.

Teal
<div class="p-3 text-white bg-h-180 bg-s-25">Teal</div>

Color picker

This utility helps to pick the color from Torus Kit color picker and create a desired shade. You can add your own color into converter that will find similar color form a palette.

Color picker
Color preview
Convert custom color

Enter your color in HEX format to convert it to nearest one from Torus Kit palette

Final color class

This is a final class code for of a chosen color