Background Color

Utility	Properties
bg-red-1	background-color: #f9e0e0;
bg-red-2	background-color: #f3c5c5;
bg-red-3	background-color: #edaaaa;
bg-red-4	background-color: #e88e8e;
bg-red-5	background-color: #e27373;
bg-red-6	background-color: #dd5858;
bg-red	background-color: #d73d3d;
bg-red-7	background-color: #b93434;
bg-red-8	background-color: #9b2c2c;
bg-red-9	background-color: #7d2323;
bg-red-10	background-color: #5f1b1b;
bg-red-11	background-color: #411212;
bg-red-12	background-color: #220a0a;
bg-orange-1	background-color: #fae7d9;
bg-orange-2	background-color: #f6d2b9;
bg-orange-3	background-color: #f1bd98;
bg-orange-4	background-color: #eda777;
bg-orange-5	background-color: #e99256;
bg-orange-6	background-color: #e47d35;
bg-orange	background-color: #e06814;
bg-orange-7	background-color: #c15911;
bg-orange-8	background-color: #a14b0e;
bg-orange-9	background-color: #823c0c;
bg-orange-10	background-color: #632e09;
bg-orange-11	background-color: #431f06;
bg-orange-12	background-color: #241103;
bg-yellow-1	background-color: #f8f0d7;
bg-yellow-2	background-color: #f2e3b5;
bg-yellow-3	background-color: #ecd692;
bg-yellow-4	background-color: #e5c86f;
bg-yellow-5	background-color: #dfbb4c;
bg-yellow-6	background-color: #d9ae2a;
bg-yellow	background-color: #d3a107;
bg-yellow-7	background-color: #b58a06;
bg-yellow-8	background-color: #987405;
bg-yellow-9	background-color: #7a5d04;
bg-yellow-10	background-color: #5d4703;
bg-yellow-11	background-color: #3f3002;
bg-yellow-12	background-color: #221a01;
bg-green-1	background-color: #dbf3e4;
bg-green-2	background-color: #bce8cc;
bg-green-3	background-color: #9cddb4;
bg-green-4	background-color: #7dd29c;
bg-green-5	background-color: #5ec785;
bg-green-6	background-color: #3ebc6d;
bg-green	background-color: #1fb155;
bg-green-7	background-color: #1b9849;
bg-green-8	background-color: #167f3d;
bg-green-9	background-color: #126731;
bg-green-10	background-color: #0e4e25;
bg-green-11	background-color: #09351a;
bg-green-12	background-color: #051c0e;
bg-teal-1	background-color: #d9f1ee;
bg-teal-2	background-color: #b8e4df;
bg-teal-3	background-color: #97d8d0;
bg-teal-4	background-color: #76cbc2;
bg-teal-5	background-color: #54bfb3;
bg-teal-6	background-color: #33b2a4;
bg-teal	background-color: #12a695;
bg-teal-7	background-color: #0f8f80;
bg-teal-8	background-color: #0d786b;
bg-teal-9	background-color: #0a6056;
bg-teal-10	background-color: #084942;
bg-teal-11	background-color: #05322d;
bg-teal-12	background-color: #031b18;
bg-cyan-1	background-color: #d7f0f5;
bg-cyan-2	background-color: #b4e4ec;
bg-cyan-3	background-color: #91d7e3;
bg-cyan-4	background-color: #6ecada;
bg-cyan-5	background-color: #4bbdd1;
bg-cyan-6	background-color: #28b1c8;
bg-cyan	background-color: #05a4bf;
bg-cyan-7	background-color: #048da4;
bg-cyan-8	background-color: #04768a;
bg-cyan-9	background-color: #035f6f;
bg-cyan-10	background-color: #024854;
bg-cyan-11	background-color: #023139;
bg-cyan-12	background-color: #011a1f;
bg-blue-1	background-color: #dfe9fa;
bg-blue-2	background-color: #c2d6f5;
bg-blue-3	background-color: #a6c2f0;
bg-blue-4	background-color: #8aafeb;
bg-blue-5	background-color: #6e9ce7;
bg-blue-6	background-color: #5188e2;
bg-blue	background-color: #3575dd;
bg-blue-7	background-color: #2e65be;
bg-blue-8	background-color: #26549f;
bg-blue-9	background-color: #1f4480;
bg-blue-10	background-color: #173361;
bg-blue-11	background-color: #102342;
bg-blue-12	background-color: #081323;
bg-indigo-1	background-color: #e4e5f9;
bg-indigo-2	background-color: #cdcef4;
bg-indigo-3	background-color: #b6b7ee;
bg-indigo-4	background-color: #9fa0e9;
bg-indigo-5	background-color: #878ae4;
bg-indigo-6	background-color: #7073de;
bg-indigo	background-color: #595cd9;
bg-indigo-7	background-color: #4d4fbb;
bg-indigo-8	background-color: #40429c;
bg-indigo-9	background-color: #34357e;
bg-indigo-10	background-color: #27285f;
bg-indigo-11	background-color: #1b1c41;
bg-indigo-12	background-color: #0e0f23;
bg-violet-1	background-color: #eae3fa;
bg-violet-2	background-color: #d8cbf5;
bg-violet-3	background-color: #c6b3f0;
bg-violet-4	background-color: #b49beb;
bg-violet-5	background-color: #a183e7;
bg-violet-6	background-color: #8f6be2;
bg-violet	background-color: #7d53dd;
bg-violet-7	background-color: #6c47be;
bg-violet-8	background-color: #5a3c9f;
bg-violet-9	background-color: #493080;
bg-violet-10	background-color: #372561;
bg-violet-11	background-color: #261942;
bg-violet-12	background-color: #140d23;
bg-pink-1	background-color: #f8e1ec;
bg-pink-2	background-color: #f2c6dc;
bg-pink-3	background-color: #ecabcc;
bg-pink-4	background-color: #e691bb;
bg-pink-5	background-color: #e076ab;
bg-pink-6	background-color: #da5c9a;
bg-pink	background-color: #d4418a;
bg-pink-7	background-color: #b63877;
bg-pink-8	background-color: #992f63;
bg-pink-9	background-color: #7b2650;
bg-pink-10	background-color: #5d1d3d;
bg-pink-11	background-color: #401429;
bg-pink-12	background-color: #220a16;
bg-lead-1	background-color: #e0e0e3;
bg-lead-2	background-color: #c5c5ca;
bg-lead-3	background-color: #ababb1;
bg-lead-4	background-color: #909098;
bg-lead-5	background-color: #757580;
bg-lead-6	background-color: #5a5a67;
bg-lead	background-color: #3f3f4e;
bg-lead-7	background-color: #363643;
bg-lead-8	background-color: #2d2d38;
bg-lead-9	background-color: #25252d;
bg-lead-10	background-color: #1c1c22;
bg-lead-11	background-color: #131317;
bg-lead-12	background-color: #0a0a0c;
bg-gray-1	background-color: #e6e7e9;
bg-gray-2	background-color: #cfd1d5;
bg-gray-3	background-color: #b9bcc1;
bg-gray-4	background-color: #a3a7ae;
bg-gray-5	background-color: #8d929a;
bg-gray-6	background-color: #767c87;
bg-gray	background-color: #606773;
bg-gray-7	background-color: #535963;
bg-gray-8	background-color: #454a53;
bg-gray-9	background-color: #383c43;
bg-gray-10	background-color: #2a2d33;
bg-gray-11	background-color: #1d1f23;
bg-gray-12	background-color: #0f1012;
bg-silver-1	background-color: #f5f5f6;
bg-silver-2	background-color: #ecedee;
bg-silver-3	background-color: #e3e4e6;
bg-silver-4	background-color: #dadcdf;
bg-silver-5	background-color: #d1d3d7;
bg-silver-6	background-color: #c8cbcf;
bg-silver	background-color: #bfc2c7;
bg-silver-7	background-color: #a4a7ab;
bg-silver-8	background-color: #8a8c8f;
bg-silver-9	background-color: #6f7173;
bg-silver-10	background-color: #545558;
bg-silver-11	background-color: #393a3c;
bg-silver-12	background-color: #1f1f20;
bg-black	background-color: black;
bg-white	background-color: white;
bg-transparent	background-color: transparent;

This example showcases various background color utilities using the indigo colors from the default color palette.

• The bg-indigo-3 utility applies a lighter indigo shade.
• The bg-indigo utility applies the base indigo shade.
• The bg-indigo-8 utility applies a darker indigo shade.

<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="bg-indigo-3 d-16 rad-1"></div>
  <div class="bg-indigo d-16 rad-1"></div>
  <div class="bg-indigo-8 d-16 rad-1"></div>
</div>

Conditional styles

Learn how to override existing utilities based on the user’s screen size or other factors, such as hover states.

Hover variant

Alternatively, you can apply :hover by using h:bg-* utility to override elements and change their values when hovering over them.

<div class="bg-lead h:bg-indigo ..."></div>