Bootstrap Background color palette

Predefined color palette, with shading, alpha opacity and hover state styling

Torus Kit palette

Torus Kit includes 15 predefined colors with 5 lighter and 5 darker variants. Along with alpha opacity bg-a-* utility class you can create numerous variations that suits your design. Torus Kit uses hsla() color function with CSS custom properties which makes background color shading easy, flexible and save a lot of code. Additional colors can be added into $color-palette in _variables.scss.

Here’s the Torus Kit color palette:

.bg-red
.bg-orange
.bg-yellow
.bg-lime
.bg-green
.bg-olive
.bg-teal
.bg-aqua
.bg-blue
.bg-navy
.bg-indigo
.bg-purple
.bg-magenta
.bg-maroon
.bg-brown
  <div class="bg-red"><code>.bg-red</code></div>
  <div class="bg-orange"><code>.bg-orange</code></div>
  <div class="bg-yellow"><code>.bg-yellow</code></div>
  <div class="bg-lime"><code>.bg-lime</code></div>
  <div class="bg-green"><code>.bg-green</code></div>
  <div class="bg-olive"><code>.bg-olive</code></div>
  <div class="bg-teal"><code>.bg-teal</code></div>
  <div class="bg-aqua"><code>.bg-aqua</code></div>
  <div class="bg-blue"><code>.bg-blue</code></div>
  <div class="bg-navy"><code>.bg-navy</code></div>
  <div class="bg-indigo"><code>.bg-indigo</code></div>
  <div class="bg-purple"><code>.bg-purple</code></div>
  <div class="bg-magenta"><code>.bg-magenta</code></div>
  <div class="bg-maroon"><code>.bg-maroon</code></div>
  <div class="bg-brown"><code>.bg-brown</code></div>

Shade variants

Because we’re using hsla(), it’s easy to make a color lighter or darker. Just use .bg-{variant}-{value} class with .bg-{color} you want to shade.

Where variant is:

  • lighten for classes that lighten the background color
  • darken for classes that darken the background color

And value is a number from 1 to 5.

Lighten

Add .bg-lighten-{value} class to .bg-{color} to make a background color lighten.

.bg-maroon .bg-lighten-5
.bg-maroon .bg-lighten-4
.bg-maroon .bg-lighten-3
.bg-maroon .bg-lighten-2
.bg-maroon .bg-lighten-1
.bg-maroon
<div class="p-2 text-white bg-maroon bg-lighten-5">.bg-maroon .bg-lighten-5</div>
<div class="p-2 text-white bg-maroon bg-lighten-4">.bg-maroon .bg-lighten-4</div>
<div class="p-2 text-white bg-maroon bg-lighten-3">.bg-maroon .bg-lighten-3</div>
<div class="p-2 text-white bg-maroon bg-lighten-2">.bg-maroon .bg-lighten-2</div>
<div class="p-2 text-white bg-maroon bg-lighten-1">.bg-maroon .bg-lighten-1</div>
<div class="p-2 text-white bg-maroon">.bg-maroon</div>

Darken

Add .bg-darken-{value} class to .bg-{color} to make a background color darken.

.bg-maroon
.bg-maroon .bg-darken-1
.bg-maroon .bg-darken-2
.bg-maroon .bg-darken-3
.bg-maroon .bg-darken-4
.bg-maroon .bg-darken-5
<div class="p-2 text-white bg-maroon">.bg-maroon</div>
<div class="p-2 text-white bg-maroon bg-darken-1">.bg-maroon .bg-darken-1</div>
<div class="p-2 text-white bg-maroon bg-darken-2">.bg-maroon .bg-darken-2</div>
<div class="p-2 text-white bg-maroon bg-darken-3">.bg-maroon .bg-darken-3</div>
<div class="p-2 text-white bg-maroon bg-darken-4">.bg-maroon .bg-darken-4</div>
<div class="p-2 text-white bg-maroon bg-darken-5">.bg-maroon .bg-darken-5</div>

Alpha opacity

By adding .bg-a-{value} to .bg-{color} you can easily control the alpha channel (opacity) of the background color. Value parameter is number from 0 to 100 multiplied by 5.

.bg-maroon
.bg-maroon .bg-a-90
.bg-maroon .bg-a-80
.bg-maroon .bg-a-70
.bg-maroon .bg-a-60
.bg-maroon .bg-a-50
.bg-maroon .bg-a-40
.bg-maroon .bg-a-30
.bg-maroon .bg-a-20
.bg-maroon .bg-a-10
.bg-maroon .bg-a-5
.bg-maroon .bg-a-0
<div class="bg-maroon">.bg-maroon</div>
<div class="bg-maroon bg-a-90">.bg-maroon .bg-a-90</div>
<div class="bg-maroon bg-a-80">.bg-maroon .bg-a-80</div>
<div class="bg-maroon bg-a-70">.bg-maroon .bg-a-70</div>
<div class="bg-maroon bg-a-60">.bg-maroon .bg-a-60</div>
<div class="bg-maroon bg-a-50">.bg-maroon .bg-a-50</div>
<div class="bg-maroon bg-a-40">.bg-maroon .bg-a-40</div>
<div class="bg-maroon bg-a-30">.bg-maroon .bg-a-30</div>
<div class="bg-maroon bg-a-20">.bg-maroon .bg-a-20</div>
<div class="bg-maroon bg-a-10">.bg-maroon .bg-a-10</div>
<div class="bg-maroon bg-a-5"><code>.bg-maroon .bg-a-5</code></div>
<div class="bg-maroon bg-a-0"><code>.bg-maroon .bg-a-0</code></div>
Pro

Hover

Changing background color, shade or alpha opacity is super easy with Torus Kit. Just add .h:{method} class to .bg-{color}.

Where method is:

  • .h:bg-{color} to change the background color
  • .h:bg-lighten-{value} to lighten a background color
  • .h:bg-darken-{value} to darken a background color
  • .h:bg-a-{value} to change the alpha opacity of a background color
.bg-maroon data-fx="h:bg-aqua"
.bg-blue data-fx="h:bg-darken-2"
.bg-teal data-fx="h:bg-lighten-2"
.bg-navy data-fx="h:bg-a-30"
.bg-brown data-fx="h:bg-darken-3"
<div class="p-2 mb-2 text-white bg-maroon" data-fx="h:bg-aqua">.bg-maroon data-fx="h:bg-aqua"</div>
<div class="p-2 mb-2 text-white bg-blue" data-fx="h:bg-darken-2">.bg-blue data-fx="h:bg-darken-2"</div>
<div class="p-2 mb-2 text-white bg-teal" data-fx="h:bg-lighten-2">.bg-teal data-fx="h:bg-lighten-2"</div>
<div class="p-2 mb-2 text-white bg-navy" data-fx="h:bg-a-30">.bg-navy data-fx="h:bg-a-30"</div>
<div class="p-2 mb-2 text-white bg-brown" data-fx="h:bg-darken-3">.bg-brown data-fx="h:bg-darken-3"</div>

Complete color palette

All predefined colors in all lighter and darker variations.

.bg-red

.bg-red .bg-lighten-5
.bg-red .bg-lighten-4
.bg-red .bg-lighten-3
.bg-red .bg-lighten-2
.bg-red .bg-lighten-1
.bg-red
.bg-red .bg-darken-1
.bg-red .bg-darken-2
.bg-red .bg-darken-3
.bg-red .bg-darken-4
.bg-red .bg-darken-5

.bg-orange

.bg-orange .bg-lighten-5
.bg-orange .bg-lighten-4
.bg-orange .bg-lighten-3
.bg-orange .bg-lighten-2
.bg-orange .bg-lighten-1
.bg-orange
.bg-orange .bg-darken-1
.bg-orange .bg-darken-2
.bg-orange .bg-darken-3
.bg-orange .bg-darken-4
.bg-orange .bg-darken-5

.bg-yellow

.bg-yellow .bg-lighten-5
.bg-yellow .bg-lighten-4
.bg-yellow .bg-lighten-3
.bg-yellow .bg-lighten-2
.bg-yellow .bg-lighten-1
.bg-yellow
.bg-yellow .bg-darken-1
.bg-yellow .bg-darken-2
.bg-yellow .bg-darken-3
.bg-yellow .bg-darken-4
.bg-yellow .bg-darken-5

.bg-lime

.bg-lime .bg-lighten-5
.bg-lime .bg-lighten-4
.bg-lime .bg-lighten-3
.bg-lime .bg-lighten-2
.bg-lime .bg-lighten-1
.bg-lime
.bg-lime .bg-darken-1
.bg-lime .bg-darken-2
.bg-lime .bg-darken-3
.bg-lime .bg-darken-4
.bg-lime .bg-darken-5

.bg-green

.bg-green .bg-lighten-5
.bg-green .bg-lighten-4
.bg-green .bg-lighten-3
.bg-green .bg-lighten-2
.bg-green .bg-lighten-1
.bg-green
.bg-green .bg-darken-1
.bg-green .bg-darken-2
.bg-green .bg-darken-3
.bg-green .bg-darken-4
.bg-green .bg-darken-5

.bg-olive

.bg-olive .bg-lighten-5
.bg-olive .bg-lighten-4
.bg-olive .bg-lighten-3
.bg-olive .bg-lighten-2
.bg-olive .bg-lighten-1
.bg-olive
.bg-olive .bg-darken-1
.bg-olive .bg-darken-2
.bg-olive .bg-darken-3
.bg-olive .bg-darken-4
.bg-olive .bg-darken-5

.bg-teal

.bg-teal .bg-lighten-5
.bg-teal .bg-lighten-4
.bg-teal .bg-lighten-3
.bg-teal .bg-lighten-2
.bg-teal .bg-lighten-1
.bg-teal
.bg-teal .bg-darken-1
.bg-teal .bg-darken-2
.bg-teal .bg-darken-3
.bg-teal .bg-darken-4
.bg-teal .bg-darken-5

.bg-aqua

.bg-aqua .bg-lighten-5
.bg-aqua .bg-lighten-4
.bg-aqua .bg-lighten-3
.bg-aqua .bg-lighten-2
.bg-aqua .bg-lighten-1
.bg-aqua
.bg-aqua .bg-darken-1
.bg-aqua .bg-darken-2
.bg-aqua .bg-darken-3
.bg-aqua .bg-darken-4
.bg-aqua .bg-darken-5

.bg-blue

.bg-blue .bg-lighten-5
.bg-blue .bg-lighten-4
.bg-blue .bg-lighten-3
.bg-blue .bg-lighten-2
.bg-blue .bg-lighten-1
.bg-blue
.bg-blue .bg-darken-1
.bg-blue .bg-darken-2
.bg-blue .bg-darken-3
.bg-blue .bg-darken-4
.bg-blue .bg-darken-5

.bg-navy

.bg-navy .bg-lighten-5
.bg-navy .bg-lighten-4
.bg-navy .bg-lighten-3
.bg-navy .bg-lighten-2
.bg-navy .bg-lighten-1
.bg-navy
.bg-navy .bg-darken-1
.bg-navy .bg-darken-2
.bg-navy .bg-darken-3
.bg-navy .bg-darken-4
.bg-navy .bg-darken-5

.bg-indigo

.bg-indigo .bg-lighten-5
.bg-indigo .bg-lighten-4
.bg-indigo .bg-lighten-3
.bg-indigo .bg-lighten-2
.bg-indigo .bg-lighten-1
.bg-indigo
.bg-indigo .bg-darken-1
.bg-indigo .bg-darken-2
.bg-indigo .bg-darken-3
.bg-indigo .bg-darken-4
.bg-indigo .bg-darken-5

.bg-purple

.bg-purple .bg-lighten-5
.bg-purple .bg-lighten-4
.bg-purple .bg-lighten-3
.bg-purple .bg-lighten-2
.bg-purple .bg-lighten-1
.bg-purple
.bg-purple .bg-darken-1
.bg-purple .bg-darken-2
.bg-purple .bg-darken-3
.bg-purple .bg-darken-4
.bg-purple .bg-darken-5

.bg-magenta

.bg-magenta .bg-lighten-5
.bg-magenta .bg-lighten-4
.bg-magenta .bg-lighten-3
.bg-magenta .bg-lighten-2
.bg-magenta .bg-lighten-1
.bg-magenta
.bg-magenta .bg-darken-1
.bg-magenta .bg-darken-2
.bg-magenta .bg-darken-3
.bg-magenta .bg-darken-4
.bg-magenta .bg-darken-5

.bg-maroon

.bg-maroon .bg-lighten-5
.bg-maroon .bg-lighten-4
.bg-maroon .bg-lighten-3
.bg-maroon .bg-lighten-2
.bg-maroon .bg-lighten-1
.bg-maroon
.bg-maroon .bg-darken-1
.bg-maroon .bg-darken-2
.bg-maroon .bg-darken-3
.bg-maroon .bg-darken-4
.bg-maroon .bg-darken-5

.bg-brown

.bg-brown .bg-lighten-5
.bg-brown .bg-lighten-4
.bg-brown .bg-lighten-3
.bg-brown .bg-lighten-2
.bg-brown .bg-lighten-1
.bg-brown
.bg-brown .bg-darken-1
.bg-brown .bg-darken-2
.bg-brown .bg-darken-3
.bg-brown .bg-darken-4
.bg-brown .bg-darken-5