Background Color

Utility	Properties
Failed to load data. Please try again later.

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 modifier

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>