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