> ## Documentation Index
> Fetch the complete documentation index at: https://skelementorcss.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Background Colors

> Background utilities for white, black, and gray surfaces, plus six semantic tokens with optional l-5…d-5 ramps matching the Colors palette.

export const BackgroundColorsDemo = () => {
  const swatches = [{
    cls: "background-white",
    hex: "#ffffff",
    dark: true
  }, {
    cls: "background-black",
    hex: "#000000"
  }, {
    cls: "background-gray-light",
    hex: "#f3f4f6",
    dark: true
  }, {
    cls: "background-gray",
    hex: "#e5e7eb",
    dark: true
  }, {
    cls: "background-primary",
    hex: "#0740f9"
  }, {
    cls: "background-secondary",
    hex: "#aaebfd",
    dark: true
  }, {
    cls: "background-neutral",
    hex: "#6b7280"
  }, {
    cls: "background-success",
    hex: "#3DC13C",
    dark: true
  }, {
    cls: "background-warning",
    hex: "#F4BB1B",
    dark: true
  }, {
    cls: "background-error",
    hex: "#F13737"
  }];
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <div className="grid grid-cols-3 gap-3">
          {swatches.map(s => <div key={s.cls} style={{
    backgroundColor: s.hex,
    color: s.dark ? "#0f172a" : "#ffffff",
    padding: "1.5rem 0.75rem",
    borderRadius: "0.5rem",
    textAlign: "center",
    fontSize: "0.7rem",
    fontFamily: "ui-monospace, monospace",
    fontWeight: 600,
    border: s.hex === "#000000" ? "1px solid var(--demo-panel-border)" : s.dark ? "1px solid var(--demo-panel-border)" : "none"
  }}>.{s.cls}</div>)}
        </div>
      </div>
    </div>;
};

## Overview

Use background color utilities for surfaces, panels, and status-driven fills.

| Class                    | Hex       |
| ------------------------ | --------- |
| `.background-white`      | `#ffffff` |
| `.background-black`      | `#000000` |
| `.background-gray-dark`  | `#374151` |
| `.background-gray`       | `#6b7280` |
| `.background-gray-light` | `#f3f4f6` |
| `.background-primary`    | `#0740f9` |
| `.background-secondary`  | `#aaebfd` |
| `.background-neutral`    | `#6b7280` |
| `.background-success`    | `#3DC13C` |
| `.background-warning`    | `#F4BB1B` |
| `.background-error`      | `#F13737` |

Semantic tokens also support `.background-{token}-l-5` through `.background-{token}-d-5`; hex steps match the [Color Palette](/concepts/colors#color-palette).

## Examples

<BackgroundColorsDemo />

```html theme={null}
<div class="elementor-element background-white padding-6 rounded-lg">White</div>
<div class="elementor-element background-gray-light padding-6 rounded-lg">Gray light</div>
<div class="elementor-element background-primary text-white padding-6 rounded-lg">Primary</div>
<div class="elementor-element background-success text-white padding-6 rounded-lg">Success</div>
<div class="elementor-element background-error text-white padding-6 rounded-lg">Error</div>
```

## Usage Notes

Classes set `background-color`. Structural fills support layouts, while semantic tokens match [Colors](/concepts/colors). Shade steps use `background-{token}-l-5` ... `background-{token}-d-5` on semantic tokens only.

## Best practices

* Default to **white** / **gray-light** for content; use saturated semantic fills when the meaning fits.
* Pair strong backgrounds with **white** or **black** text (or a verified contrast-safe class).

## Related utilities

<CardGroup cols={2}>
  <Card title="Text Colors" icon="highlighter" href="/colors/text-colors">
    Text colors
  </Card>

  <Card title="Border Colors" icon="square" href="/colors/border-colors">
    Border colors
  </Card>
</CardGroup>