BrutCSS Reference Documentation

Background Colors Classes

Background colors. For red, orange, yellow, green, blue, purple, and gray, there are nine steps in the scale, from 100 being darkest to 900 being lightest. Black and white have only two steps: pure black/white and slightly off black/white. The colors and shades are shown in the table below.

100 200 300 400 500 600 700 800 900
Red
 
 
 
 
 
 
 
 
 
Orange
 
 
 
 
 
 
 
 
 
Yellow
 
 
 
 
 
 
 
 
 
Green
 
 
 
 
 
 
 
 
 
Blue
 
 
 
 
 
 
 
 
 
Purple
 
 
 
 
 
 
 
 
 
Gray
 
 
 
 
 
 
 
 
 
pure -ish
Black
 
 
White
 
 

See Also

Red

Red shades.

See Also

.bg-red-100

.bg-red-100 {
   background-color: var(--red-100);
 }

Red at weight 100 (darkest).

Example 
<div class="bg-white pa-2">
  <div class="white bg-red-100 pa-2">
    <code class="">
      .bg-red-100
    </code>
  </div>
</div>
.bg-red-100

.bg-red-200

.bg-red-200 {
   background-color: var(--red-200);
 }

Red at weight 200 (second darkest).

Example 
<div class="bg-white pa-2">
  <div class="white bg-red-200 pa-2">
    <code class="">
      .bg-red-200
    </code>
  </div>
</div>
.bg-red-200

.bg-red-300

.bg-red-300 {
   background-color: var(--red-300);
 }

Red at weight 300.

Example 
<div class="bg-white pa-2">
  <div class="white bg-red-300 pa-2">
    <code class="">
      .bg-red-300
    </code>
  </div>
</div>
.bg-red-300

.bg-red-400

.bg-red-400 {
   background-color: var(--red-400);
 }

Red at weight 400.

Example 
<div class="bg-white pa-2">
  <div class="white bg-red-400 pa-2">
    <code class="">
      .bg-red-400
    </code>
  </div>
</div>
.bg-red-400

.bg-red-500

.bg-red-500 {
   background-color: var(--red-500);
 }

Red at weight 500.

Example 
<div class="bg-black pa-2">
  <div class="black bg-red-500 pa-2">
    <code class="">
      .bg-red-500
    </code>
  </div>
</div>
.bg-red-500

.bg-red-600

.bg-red-600 {
   background-color: var(--red-600);
 }

Red at weight 600 ().

Example 
<div class="bg-black pa-2">
  <div class="black bg-red-600 pa-2">
    <code class="">
      .bg-red-600
    </code>
  </div>
</div>
.bg-red-600

.bg-red-700

.bg-red-700 {
   background-color: var(--red-700);
 }

Red at weight 700 ().

Example 
<div class="bg-black pa-2">
  <div class="black bg-red-700 pa-2">
    <code class="">
      .bg-red-700
    </code>
  </div>
</div>
.bg-red-700

.bg-red-800

.bg-red-800 {
   background-color: var(--red-800);
 }

Red at weight 800 (second lightest).

Example 
<div class="bg-black pa-2">
  <div class="black bg-red-800 pa-2">
    <code class="">
      .bg-red-800
    </code>
  </div>
</div>
.bg-red-800

.bg-red-900

.bg-red-900 {
   background-color: var(--red-900);
 }

Red at weight 900 (lightest).

Example 
<div class="bg-black pa-2">
  <div class="black bg-red-900 pa-2">
    <code class="">
      .bg-red-900
    </code>
  </div>
</div>
.bg-red-900

Orange

Orange shades.

See Also

.bg-orange-100

.bg-orange-100 {
   background-color: var(--orange-100);
 }

Orange at weight 100 (darkest).

Example 
<div class="bg-white pa-2">
  <div class="white bg-orange-100 pa-2">
    <code class="">
      .bg-orange-100
    </code>
  </div>
</div>
.bg-orange-100

.bg-orange-200

.bg-orange-200 {
   background-color: var(--orange-200);
 }

Orange at weight 200 (second darkest).

Example 
<div class="bg-white pa-2">
  <div class="white bg-orange-200 pa-2">
    <code class="">
      .bg-orange-200
    </code>
  </div>
</div>
.bg-orange-200

.bg-orange-300

.bg-orange-300 {
   background-color: var(--orange-300);
 }

Orange at weight 300.

Example 
<div class="bg-white pa-2">
  <div class="white bg-orange-300 pa-2">
    <code class="">
      .bg-orange-300
    </code>
  </div>
</div>
.bg-orange-300

.bg-orange-400

.bg-orange-400 {
   background-color: var(--orange-400);
 }

Orange at weight 400.

Example 
<div class="bg-white pa-2">
  <div class="white bg-orange-400 pa-2">
    <code class="">
      .bg-orange-400
    </code>
  </div>
</div>
.bg-orange-400

.bg-orange-500

.bg-orange-500 {
   background-color: var(--orange-500);
 }

Orange at weight 500.

Example 
<div class="bg-black pa-2">
  <div class="black bg-orange-500 pa-2">
    <code class="">
      .bg-orange-500
    </code>
  </div>
</div>
.bg-orange-500

.bg-orange-600

.bg-orange-600 {
   background-color: var(--orange-600);
 }

Orange at weight 600 ().

Example 
<div class="bg-black pa-2">
  <div class="black bg-orange-600 pa-2">
    <code class="">
      .bg-orange-600
    </code>
  </div>
</div>
.bg-orange-600

.bg-orange-700

.bg-orange-700 {
   background-color: var(--orange-700);
 }

Orange at weight 700 ().

Example 
<div class="bg-black pa-2">
  <div class="black bg-orange-700 pa-2">
    <code class="">
      .bg-orange-700
    </code>
  </div>
</div>
.bg-orange-700

.bg-orange-800

.bg-orange-800 {
   background-color: var(--orange-800);
 }

Orange at weight 800 (second lightest).

Example 
<div class="bg-black pa-2">
  <div class="black bg-orange-800 pa-2">
    <code class="">
      .bg-orange-800
    </code>
  </div>
</div>
.bg-orange-800

.bg-orange-900

.bg-orange-900 {
   background-color: var(--orange-900);
 }

Orange at weight 900 (lightest).

Example 
<div class="bg-black pa-2">
  <div class="black bg-orange-900 pa-2">
    <code class="">
      .bg-orange-900
    </code>
  </div>
</div>
.bg-orange-900

Yellow

Yellow shades.

See Also

.bg-yellow-100

.bg-yellow-100 {
   background-color: var(--yellow-100);
 }

Yellow at weight 100 (darkest).

Example 
<div class="bg-white pa-2">
  <div class="white bg-yellow-100 pa-2">
    <code class="">
      .bg-yellow-100
    </code>
  </div>
</div>
.bg-yellow-100

.bg-yellow-200

.bg-yellow-200 {
   background-color: var(--yellow-200);
 }

Yellow at weight 200 (second darkest).

Example 
<div class="bg-white pa-2">
  <div class="white bg-yellow-200 pa-2">
    <code class="">
      .bg-yellow-200
    </code>
  </div>
</div>
.bg-yellow-200

.bg-yellow-300

.bg-yellow-300 {
   background-color: var(--yellow-300);
 }

Yellow at weight 300.

Example 
<div class="bg-white pa-2">
  <div class="white bg-yellow-300 pa-2">
    <code class="">
      .bg-yellow-300
    </code>
  </div>
</div>
.bg-yellow-300

.bg-yellow-400

.bg-yellow-400 {
   background-color: var(--yellow-400);
 }

Yellow at weight 400.

Example 
<div class="bg-white pa-2">
  <div class="white bg-yellow-400 pa-2">
    <code class="">
      .bg-yellow-400
    </code>
  </div>
</div>
.bg-yellow-400

.bg-yellow-500

.bg-yellow-500 {
   background-color: var(--yellow-500);
 }

Yellow at weight 500.

Example 
<div class="bg-black pa-2">
  <div class="black bg-yellow-500 pa-2">
    <code class="">
      .bg-yellow-500
    </code>
  </div>
</div>
.bg-yellow-500

.bg-yellow-600

.bg-yellow-600 {
   background-color: var(--yellow-600);
 }

Yellow at weight 600 ().

Example 
<div class="bg-black pa-2">
  <div class="black bg-yellow-600 pa-2">
    <code class="">
      .bg-yellow-600
    </code>
  </div>
</div>
.bg-yellow-600

.bg-yellow-700

.bg-yellow-700 {
   background-color: var(--yellow-700);
 }

Yellow at weight 700 ().

Example 
<div class="bg-black pa-2">
  <div class="black bg-yellow-700 pa-2">
    <code class="">
      .bg-yellow-700
    </code>
  </div>
</div>
.bg-yellow-700

.bg-yellow-800

.bg-yellow-800 {
   background-color: var(--yellow-800);
 }

Yellow at weight 800 (second lightest).

Example 
<div class="bg-black pa-2">
  <div class="black bg-yellow-800 pa-2">
    <code class="">
      .bg-yellow-800
    </code>
  </div>
</div>
.bg-yellow-800

.bg-yellow-900

.bg-yellow-900 {
   background-color: var(--yellow-900);
 }

Yellow at weight 900 (lightest).

Example 
<div class="bg-black pa-2">
  <div class="black bg-yellow-900 pa-2">
    <code class="">
      .bg-yellow-900
    </code>
  </div>
</div>
.bg-yellow-900

Green

Green shades.

See Also

.bg-green-100

.bg-green-100 {
   background-color: var(--green-100);
 }

Green at weight 100 (darkest).

Example 
<div class="bg-white pa-2">
  <div class="white bg-green-100 pa-2">
    <code class="">
      .bg-green-100
    </code>
  </div>
</div>
.bg-green-100

.bg-green-200

.bg-green-200 {
   background-color: var(--green-200);
 }

Green at weight 200 (second darkest).

Example 
<div class="bg-white pa-2">
  <div class="white bg-green-200 pa-2">
    <code class="">
      .bg-green-200
    </code>
  </div>
</div>
.bg-green-200

.bg-green-300

.bg-green-300 {
   background-color: var(--green-300);
 }

Green at weight 300.

Example 
<div class="bg-white pa-2">
  <div class="white bg-green-300 pa-2">
    <code class="">
      .bg-green-300
    </code>
  </div>
</div>
.bg-green-300

.bg-green-400

.bg-green-400 {
   background-color: var(--green-400);
 }

Green at weight 400.

Example 
<div class="bg-white pa-2">
  <div class="white bg-green-400 pa-2">
    <code class="">
      .bg-green-400
    </code>
  </div>
</div>
.bg-green-400

.bg-green-500

.bg-green-500 {
   background-color: var(--green-500);
 }

Green at weight 500.

Example 
<div class="bg-black pa-2">
  <div class="black bg-green-500 pa-2">
    <code class="">
      .bg-green-500
    </code>
  </div>
</div>
.bg-green-500

.bg-green-600

.bg-green-600 {
   background-color: var(--green-600);
 }

Green at weight 600 ().

Example 
<div class="bg-black pa-2">
  <div class="black bg-green-600 pa-2">
    <code class="">
      .bg-green-600
    </code>
  </div>
</div>
.bg-green-600

.bg-green-700

.bg-green-700 {
   background-color: var(--green-700);
 }

Green at weight 700 ().

Example 
<div class="bg-black pa-2">
  <div class="black bg-green-700 pa-2">
    <code class="">
      .bg-green-700
    </code>
  </div>
</div>
.bg-green-700

.bg-green-800

.bg-green-800 {
   background-color: var(--green-800);
 }

Green at weight 800 (second lightest).

Example 
<div class="bg-black pa-2">
  <div class="black bg-green-800 pa-2">
    <code class="">
      .bg-green-800
    </code>
  </div>
</div>
.bg-green-800

.bg-green-900

.bg-green-900 {
   background-color: var(--green-900);
 }

Green at weight 900 (lightest).

Example 
<div class="bg-black pa-2">
  <div class="black bg-green-900 pa-2">
    <code class="">
      .bg-green-900
    </code>
  </div>
</div>
.bg-green-900

Blue

Blue shades.

See Also

.bg-blue-100

.bg-blue-100 {
   background-color: var(--blue-100);
 }

Blue at weight 100 (darkest).

Example 
<div class="bg-white pa-2">
  <div class="white bg-blue-100 pa-2">
    <code class="">
      .bg-blue-100
    </code>
  </div>
</div>
.bg-blue-100

.bg-blue-200

.bg-blue-200 {
   background-color: var(--blue-200);
 }

Blue at weight 200 (second darkest).

Example 
<div class="bg-white pa-2">
  <div class="white bg-blue-200 pa-2">
    <code class="">
      .bg-blue-200
    </code>
  </div>
</div>
.bg-blue-200

.bg-blue-300

.bg-blue-300 {
   background-color: var(--blue-300);
 }

Blue at weight 300.

Example 
<div class="bg-white pa-2">
  <div class="white bg-blue-300 pa-2">
    <code class="">
      .bg-blue-300
    </code>
  </div>
</div>
.bg-blue-300

.bg-blue-400

.bg-blue-400 {
   background-color: var(--blue-400);
 }

Blue at weight 400.

Example 
<div class="bg-white pa-2">
  <div class="white bg-blue-400 pa-2">
    <code class="">
      .bg-blue-400
    </code>
  </div>
</div>
.bg-blue-400

.bg-blue-500

.bg-blue-500 {
   background-color: var(--blue-500);
 }

Blue at weight 500.

Example 
<div class="bg-black pa-2">
  <div class="black bg-blue-500 pa-2">
    <code class="">
      .bg-blue-500
    </code>
  </div>
</div>
.bg-blue-500

.bg-blue-600

.bg-blue-600 {
   background-color: var(--blue-600);
 }

Blue at weight 600 ().

Example 
<div class="bg-black pa-2">
  <div class="black bg-blue-600 pa-2">
    <code class="">
      .bg-blue-600
    </code>
  </div>
</div>
.bg-blue-600

.bg-blue-700

.bg-blue-700 {
   background-color: var(--blue-700);
 }

Blue at weight 700 ().

Example 
<div class="bg-black pa-2">
  <div class="black bg-blue-700 pa-2">
    <code class="">
      .bg-blue-700
    </code>
  </div>
</div>
.bg-blue-700

.bg-blue-800

.bg-blue-800 {
   background-color: var(--blue-800);
 }

Blue at weight 800 (second lightest).

Example 
<div class="bg-black pa-2">
  <div class="black bg-blue-800 pa-2">
    <code class="">
      .bg-blue-800
    </code>
  </div>
</div>
.bg-blue-800

.bg-blue-900

.bg-blue-900 {
   background-color: var(--blue-900);
 }

Blue at weight 900 (lightest).

Example 
<div class="bg-black pa-2">
  <div class="black bg-blue-900 pa-2">
    <code class="">
      .bg-blue-900
    </code>
  </div>
</div>
.bg-blue-900

Purple

Purple shades.

See Also

.bg-purple-100

.bg-purple-100 {
   background-color: var(--purple-100);
 }

Purple at weight 100 (darkest).

Example 
<div class="bg-white pa-2">
  <div class="white bg-purple-100 pa-2">
    <code class="">
      .bg-purple-100
    </code>
  </div>
</div>
.bg-purple-100

.bg-purple-200

.bg-purple-200 {
   background-color: var(--purple-200);
 }

Purple at weight 200 (second darkest).

Example 
<div class="bg-white pa-2">
  <div class="white bg-purple-200 pa-2">
    <code class="">
      .bg-purple-200
    </code>
  </div>
</div>
.bg-purple-200

.bg-purple-300

.bg-purple-300 {
   background-color: var(--purple-300);
 }

Purple at weight 300.

Example 
<div class="bg-white pa-2">
  <div class="white bg-purple-300 pa-2">
    <code class="">
      .bg-purple-300
    </code>
  </div>
</div>
.bg-purple-300

.bg-purple-400

.bg-purple-400 {
   background-color: var(--purple-400);
 }

Purple at weight 400.

Example 
<div class="bg-white pa-2">
  <div class="white bg-purple-400 pa-2">
    <code class="">
      .bg-purple-400
    </code>
  </div>
</div>
.bg-purple-400

.bg-purple-500

.bg-purple-500 {
   background-color: var(--purple-500);
 }

Purple at weight 500.

Example 
<div class="bg-black pa-2">
  <div class="black bg-purple-500 pa-2">
    <code class="">
      .bg-purple-500
    </code>
  </div>
</div>
.bg-purple-500

.bg-purple-600

.bg-purple-600 {
   background-color: var(--purple-600);
 }

Purple at weight 600 ().

Example 
<div class="bg-black pa-2">
  <div class="black bg-purple-600 pa-2">
    <code class="">
      .bg-purple-600
    </code>
  </div>
</div>
.bg-purple-600

.bg-purple-700

.bg-purple-700 {
   background-color: var(--purple-700);
 }

Purple at weight 700 ().

Example 
<div class="bg-black pa-2">
  <div class="black bg-purple-700 pa-2">
    <code class="">
      .bg-purple-700
    </code>
  </div>
</div>
.bg-purple-700

.bg-purple-800

.bg-purple-800 {
   background-color: var(--purple-800);
 }

Purple at weight 800 (second lightest).

Example 
<div class="bg-black pa-2">
  <div class="black bg-purple-800 pa-2">
    <code class="">
      .bg-purple-800
    </code>
  </div>
</div>
.bg-purple-800

.bg-purple-900

.bg-purple-900 {
   background-color: var(--purple-900);
 }

Purple at weight 900 (lightest).

Example 
<div class="bg-black pa-2">
  <div class="black bg-purple-900 pa-2">
    <code class="">
      .bg-purple-900
    </code>
  </div>
</div>
.bg-purple-900

Gray

Gray shades.

See Also

.bg-gray-100

.bg-gray-100 {
   background-color: var(--gray-100);
 }

Gray at weight 100 (darkest).

Example 
<div class="bg-white pa-2">
  <div class="white bg-gray-100 pa-2">
    <code class="">
      .bg-gray-100
    </code>
  </div>
</div>
.bg-gray-100

.bg-gray-200

.bg-gray-200 {
   background-color: var(--gray-200);
 }

Gray at weight 200 (second darkest).

Example 
<div class="bg-white pa-2">
  <div class="white bg-gray-200 pa-2">
    <code class="">
      .bg-gray-200
    </code>
  </div>
</div>
.bg-gray-200

.bg-gray-300

.bg-gray-300 {
   background-color: var(--gray-300);
 }

Gray at weight 300.

Example 
<div class="bg-white pa-2">
  <div class="white bg-gray-300 pa-2">
    <code class="">
      .bg-gray-300
    </code>
  </div>
</div>
.bg-gray-300

.bg-gray-400

.bg-gray-400 {
   background-color: var(--gray-400);
 }

Gray at weight 400.

Example 
<div class="bg-white pa-2">
  <div class="white bg-gray-400 pa-2">
    <code class="">
      .bg-gray-400
    </code>
  </div>
</div>
.bg-gray-400

.bg-gray-500

.bg-gray-500 {
   background-color: var(--gray-500);
 }

Gray at weight 500.

Example 
<div class="bg-black pa-2">
  <div class="black bg-gray-500 pa-2">
    <code class="">
      .bg-gray-500
    </code>
  </div>
</div>
.bg-gray-500

.bg-gray-600

.bg-gray-600 {
   background-color: var(--gray-600);
 }

Gray at weight 600 ().

Example 
<div class="bg-black pa-2">
  <div class="black bg-gray-600 pa-2">
    <code class="">
      .bg-gray-600
    </code>
  </div>
</div>
.bg-gray-600

.bg-gray-700

.bg-gray-700 {
   background-color: var(--gray-700);
 }

Gray at weight 700 ().

Example 
<div class="bg-black pa-2">
  <div class="black bg-gray-700 pa-2">
    <code class="">
      .bg-gray-700
    </code>
  </div>
</div>
.bg-gray-700

.bg-gray-800

.bg-gray-800 {
   background-color: var(--gray-800);
 }

Gray at weight 800 (second lightest).

Example 
<div class="bg-black pa-2">
  <div class="black bg-gray-800 pa-2">
    <code class="">
      .bg-gray-800
    </code>
  </div>
</div>
.bg-gray-800

.bg-gray-900

.bg-gray-900 {
   background-color: var(--gray-900);
 }

Gray at weight 900 (lightest).

Example 
<div class="bg-black pa-2">
  <div class="black bg-gray-900 pa-2">
    <code class="">
      .bg-gray-900
    </code>
  </div>
</div>
.bg-gray-900

Black

Blacks.

See Also

.bg-black

.bg-black {
   background-color: var(--black);
 }

Black (pure).

Example 
<div class="bg-white pa-2">
  <div class="white bg-black pa-2">
    <code class="">
      .bg-black
    </code>
  </div>
</div>
.bg-black

.bg-black-ish

.bg-black-ish {
   background-color: var(--black-ish);
 }

Black (slightly off).

Example 
<div class="bg-white pa-2">
  <div class="white bg-black-ish pa-2">
    <code class="">
      .bg-black-ish
    </code>
  </div>
</div>
.bg-black-ish

White

Whites.

See Also

.bg-white

.bg-white {
   background-color: var(--white);
 }

White (pure).

Example 
<div class="bg-black pa-2">
  <div class="black bg-white pa-2">
    <code class="">
      .bg-white
    </code>
  </div>
</div>
.bg-white

.bg-white-ish

.bg-white-ish {
   background-color: var(--white-ish);
 }

White (slightly off).

Example 
<div class="bg-black pa-2">
  <div class="black bg-white-ish pa-2">
    <code class="">
      .bg-white-ish
    </code>
  </div>
</div>
.bg-white-ish

On this Page