Background Color

Set a custom background color.

Class Properties
.bg-primarybackground-color: #0d6efd;
.bg-secondarybackground-color: #6c757d;
.bg-successbackground-color: #198754;
.bg-infobackground-color: #0dcaf0;
.bg-warningbackground-color: #ffc107;
.bg-dangerbackground-color: #dc3545;
.bg-lightbackground-color: #f8f9fa;
.bg-darkbackground-color: #212529;
.bg-blackbackground-color: #000000;
.bg-whitebackground-color: #ffffff;
.bg-transparentbackground-color: transparent;
.bg-gray-100background-color: #f8f9fa;
.bg-gray-200background-color: #e9ecef;
.bg-gray-300background-color: #dee2e6;
.bg-gray-400background-color: #ced4da;
.bg-gray-500background-color: #adb5bd;
.bg-gray-600background-color: #6c757d;
.bg-gray-700background-color: #495057;
.bg-gray-800background-color: #343a40;
.bg-gray-900background-color: #212529;
.bg-blue-100background-color: #cfe2ff;
.bg-blue-200background-color: #9ec5fe;
.bg-blue-300background-color: #6ea8fe;
.bg-blue-400background-color: #3d8bfd;
.bg-blue-500background-color: #0d6efd;
.bg-blue-600background-color: #0a58ca;
.bg-blue-700background-color: #084298;
.bg-blue-800background-color: #052c65;
.bg-blue-900background-color: #031633;
.bg-indigo-100background-color: #e0cffc;
.bg-indigo-200background-color: #c29ffa;
.bg-indigo-300background-color: #a370f7;
.bg-indigo-400background-color: #8540f5;
.bg-indigo-500background-color: #6610f2;
.bg-indigo-600background-color: #520dc2;
.bg-indigo-700background-color: #3d0a91;
.bg-indigo-800background-color: #290661;
.bg-indigo-900background-color: #140330;
.bg-purple-100background-color: #e2d9f3;
.bg-purple-200background-color: #c5b3e6;
.bg-purple-300background-color: #a98eda;
.bg-purple-400background-color: #8c68cd;
.bg-purple-500background-color: #6f42c1;
.bg-purple-600background-color: #59359a;
.bg-purple-700background-color: #432874;
.bg-purple-800background-color: #2c1a4d;
.bg-purple-900background-color: #160d27;
.bg-pink-100background-color: #f7d6e6;
.bg-pink-200background-color: #efadce;
.bg-pink-300background-color: #e685b5;
.bg-pink-400background-color: #de5c9d;
.bg-pink-500background-color: #d63384;
.bg-pink-600background-color: #ab296a;
.bg-pink-700background-color: #801f4f;
.bg-pink-800background-color: #561435;
.bg-pink-900background-color: #2b0a1a;
.bg-red-100background-color: #f8d7da;
.bg-red-200background-color: #f1aeb5;
.bg-red-300background-color: #ea868f;
.bg-red-400background-color: #e35d6a;
.bg-red-500background-color: #dc3545;
.bg-red-600background-color: #b02a37;
.bg-red-700background-color: #842029;
.bg-red-800background-color: #58151c;
.bg-red-900background-color: #2c0b0e;
.bg-orange-100background-color: #ffe5d0;
.bg-orange-200background-color: #fecba1;
.bg-orange-300background-color: #feb272;
.bg-orange-400background-color: #fd9843;
.bg-orange-500background-color: #fd7e14;
.bg-orange-600background-color: #ca6510;
.bg-orange-700background-color: #984c0c;
.bg-orange-800background-color: #653208;
.bg-orange-900background-color: #331904;
.bg-yellow-100background-color: #fff3cd;
.bg-yellow-200background-color: #ffe69c;
.bg-yellow-300background-color: #ffda6a;
.bg-yellow-400background-color: #ffcd39;
.bg-yellow-500background-color: #ffc107;
.bg-yellow-600background-color: #cc9a06;
.bg-yellow-700background-color: #997404;
.bg-yellow-800background-color: #664d03;
.bg-yellow-900background-color: #332701;
.bg-green-100background-color: #d1e7dd;
.bg-green-200background-color: #a3cfbb;
.bg-green-300background-color: #75b798;
.bg-green-400background-color: #479f76;
.bg-green-500background-color: #198754;
.bg-green-600background-color: #146c43;
.bg-green-700background-color: #0f5132;
.bg-green-800background-color: #0a3622;
.bg-green-900background-color: #051b11;
.bg-teal-100background-color: #d2f4ea;
.bg-teal-200background-color: #a6e9d5;
.bg-teal-300background-color: #79dfc1;
.bg-teal-400background-color: #4dd4ac;
.bg-teal-500background-color: #20c997;
.bg-teal-600background-color: #1aa179;
.bg-teal-700background-color: #13795b;
.bg-teal-800background-color: #0d503c;
.bg-teal-900background-color: #06281e;
.bg-cyan-100background-color: #cff4fc;
.bg-cyan-200background-color: #9eeaf9;
.bg-cyan-300background-color: #6edff6;
.bg-cyan-400background-color: #3dd5f3;
.bg-cyan-500background-color: #0dcaf0;
.bg-cyan-600background-color: #0aa2c0;
.bg-cyan-700background-color: #087990;
.bg-cyan-800background-color: #055160;
.bg-cyan-900background-color: #032830;

Usage

Since emails render mostly consistently with tables, many of the components are built into tables. These color classes apply to the current element as well as the child <td> so you can use it on a component it will still work if the component is compiled into a table. It also uses the bgcolor property for support for old email clients. If a background color utility class is used on a <div> it will automatically be converted to a table with 100% width since divs don’t have good background color support in many email clients.

<div class="bg-primary text-white">.bg-primary</div>
<div class="bg-secondary text-white">.bg-secondary</div>
<div class="bg-success text-white">.bg-success</div>
<div class="bg-red-500 text-white">.bg-red-500</div>
<div class="bg-yellow-500 text-white">.bg-yellow-500</div>
.bg-primary
.bg-secondary
.bg-success
.bg-red-500
.bg-yellow-500

Customize

See the Customize docs to learn more about customizing the color palette.

Compiled Example

Input

<div class="bg-blue-100">Blue 100</div>
<div class="bg-blue-200">Blue 200</div>
<div class="bg-blue-300">Blue 300</div>
<div class="bg-blue-400">Blue 400</div>
<div class="bg-blue-500">Blue 500</div>
<div class="bg-blue-600">Blue 600</div>
<div class="bg-blue-700">Blue 700</div>
<div class="bg-blue-800">Blue 800</div>
<div class="bg-blue-900">Blue 900</div>

Output

<table class="bg-blue-100 w-full" role="presentation" style="width: 100%;" bgcolor="#cfe2ff" width="100%">
  <tbody>
    <tr>
      <td style="line-height: 24px; font-size: 16px; width: 100%; margin: 0;" align="left" bgcolor="#cfe2ff" width="100%">
        Blue 100
      </td>
    </tr>
  </tbody>
</table>
<table class="bg-blue-200 w-full" role="presentation" style="width: 100%;" bgcolor="#9ec5fe" width="100%">
  <tbody>
    <tr>
      <td style="line-height: 24px; font-size: 16px; width: 100%; margin: 0;" align="left" bgcolor="#9ec5fe" width="100%">
        Blue 200
      </td>
    </tr>
  </tbody>
</table>
<table class="bg-blue-300 w-full" role="presentation" style="width: 100%;" bgcolor="#6ea8fe" width="100%">
  <tbody>
    <tr>
      <td style="line-height: 24px; font-size: 16px; width: 100%; margin: 0;" align="left" bgcolor="#6ea8fe" width="100%">
        Blue 300
      </td>
    </tr>
  </tbody>
</table>
<table class="bg-blue-400 w-full" role="presentation" style="width: 100%;" bgcolor="#3d8bfd" width="100%">
  <tbody>
    <tr>
      <td style="line-height: 24px; font-size: 16px; width: 100%; margin: 0;" align="left" bgcolor="#3d8bfd" width="100%">
        Blue 400
      </td>
    </tr>
  </tbody>
</table>
<table class="bg-blue-500 w-full" role="presentation" style="width: 100%;" bgcolor="#0d6efd" width="100%">
  <tbody>
    <tr>
      <td style="line-height: 24px; font-size: 16px; width: 100%; margin: 0;" align="left" bgcolor="#0d6efd" width="100%">
        Blue 500
      </td>
    </tr>
  </tbody>
</table>
<table class="bg-blue-600 w-full" role="presentation" style="width: 100%;" bgcolor="#0a58ca" width="100%">
  <tbody>
    <tr>
      <td style="line-height: 24px; font-size: 16px; width: 100%; margin: 0;" align="left" bgcolor="#0a58ca" width="100%">
        Blue 600
      </td>
    </tr>
  </tbody>
</table>
<table class="bg-blue-700 w-full" role="presentation" style="width: 100%;" bgcolor="#084298" width="100%">
  <tbody>
    <tr>
      <td style="line-height: 24px; font-size: 16px; width: 100%; margin: 0;" align="left" bgcolor="#084298" width="100%">
        Blue 700
      </td>
    </tr>
  </tbody>
</table>
<table class="bg-blue-800 w-full" role="presentation" style="width: 100%;" bgcolor="#052c65" width="100%">
  <tbody>
    <tr>
      <td style="line-height: 24px; font-size: 16px; width: 100%; margin: 0;" align="left" bgcolor="#052c65" width="100%">
        Blue 800
      </td>
    </tr>
  </tbody>
</table>
<table class="bg-blue-900 w-full" role="presentation" style="width: 100%;" bgcolor="#031633" width="100%">
  <tbody>
    <tr>
      <td style="line-height: 24px; font-size: 16px; width: 100%; margin: 0;" align="left" bgcolor="#031633" width="100%">
        Blue 900
      </td>
    </tr>
  </tbody>
</table>
On this page