Background Color

Controls the background color of an element.

Class	Style
`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-slate-1`	`background-color: #e0e0e3`
`bg-slate-2`	`background-color: #c5c5ca`
`bg-slate-3`	`background-color: #ababb1`
`bg-slate-4`	`background-color: #909098`
`bg-slate-5`	`background-color: #757580`
`bg-slate-6`	`background-color: #5a5a67`
`bg-slate`	`background-color: #3f3f4e`
`bg-slate-7`	`background-color: #363643`
`bg-slate-8`	`background-color: #2d2d38`
`bg-slate-9`	`background-color: #25252d`
`bg-slate-10`	`background-color: #1c1c22`
`bg-slate-11`	`background-color: #131317`
`bg-slate-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: #000000`
`bg-current`	`background-color: currentColor`
`bg-transparent`	`background-color: transparent`
`bg-white`	`background-color: #ffffff`

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>

Using utility variants

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

Using media queries

You can combine responsive breakpoints like sm:bg-*, md:bg-*, lg:bg-*, and xxl:bg-* to allow targeting specific utilities in different viewports.

Using hover states

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