---
extends: _layouts.markdown
title: "Backgrounds"
---

# Background Color

<div class="subnav">
    <a class="subnav-link" href="#usage">Usage</a>
    <a class="subnav-link" href="#responsive">Responsive</a>
    <a class="subnav-link" href="#customizing">Customizing</a>
</div>

<h2 id="colors">Colors</h2>


<div class="flex flex-wrap -mx-4 mb-4">
  <div class="w-full md:w-1/3 px-4">
    <div class="rounded overflow-hidden">
      <div class="text-slate-dark bg-slate-lighter px-6 py-4 text-sm">
        .bg-slate-lighter
      </div>
      <div class="text-white bg-slate-light px-6 py-4 text-sm">
        .bg-slate-light
      </div>
      <div class="text-white bg-slate px-6 py-4 text-sm">
        .bg-slate
      </div>
      <div class="text-white bg-slate-dark px-6 py-4 text-sm">
        .bg-slate-dark
      </div>
      <div class="text-white bg-slate-darker px-6 py-4 text-sm">
        .bg-slate-darker
      </div>
    </div>
  </div>
  <div class="w-full md:w-1/3 px-4">
    <div class="rounded overflow-hidden">
      <div class="text-slate-dark bg-smoke-lighter px-6 py-4 text-sm">
        .bg-smoke-lighter
      </div>
      <div class="text-slate-dark bg-smoke-light px-6 py-4 text-sm">
        .bg-smoke-light
      </div>
      <div class="text-slate-dark bg-smoke px-6 py-4 text-sm">
        .bg-smoke
      </div>
      <div class="text-slate-dark bg-smoke-dark px-6 py-4 text-sm">
        .bg-smoke-dark
      </div>
      <div class="text-white bg-smoke-darker px-6 py-4 text-sm">
        .bg-smoke-darker
      </div>
    </div>
  </div>
</div>

<div class="flex flex-wrap -mx-4 mb-4">
  <div class="w-full md:w-1/3 px-4">
    <div class="rounded overflow-hidden">
      <div class="text-red bg-red-lighter px-6 py-4 text-sm">
        .bg-red-lighter
      </div>
      <div class="text-white bg-red-light px-6 py-4 text-sm">
        .bg-red-light
      </div>
      <div class="text-white bg-red px-6 py-4 text-sm">
        .bg-red
      </div>
      <div class="text-white bg-red-dark px-6 py-4 text-sm">
        .bg-red-dark
      </div>
      <div class="text-white bg-red-darker px-6 py-4 text-sm">
        .bg-red-darker
      </div>
    </div>
  </div>
  <div class="w-full md:w-1/3 px-4">
    <div class="rounded overflow-hidden">
      <div class="text-orange-darker bg-orange-lighter px-6 py-4 text-sm">
        .bg-orange-lighter
      </div>
      <div class="text-orange-darker bg-orange-light px-6 py-4 text-sm">
        .bg-orange-light
      </div>
      <div class="text-orange-darker bg-orange px-6 py-4 text-sm">
        .bg-orange
      </div>
      <div class="text-white bg-orange-dark px-6 py-4 text-sm">
        .bg-orange-dark
      </div>
      <div class="text-white bg-orange-darker px-6 py-4 text-sm">
        .bg-orange-darker
      </div>
    </div>
  </div>
  <div class="w-full md:w-1/3 px-4">
    <div class="rounded overflow-hidden">
      <div class="text-yellow-darker bg-yellow-lighter px-6 py-4 text-sm">
        .bg-yellow-lighter
      </div>
      <div class="text-yellow-darker bg-yellow-light px-6 py-4 text-sm">
        .bg-yellow-light
      </div>
      <div class="text-yellow-darker bg-yellow px-6 py-4 text-sm">
        .bg-yellow
      </div>
      <div class="text-yellow-darker bg-yellow-dark px-6 py-4 text-sm">
        .bg-yellow-dark
      </div>
      <div class="text-white bg-yellow-darker px-6 py-4 text-sm">
        .bg-yellow-darker
      </div>
    </div>
  </div>
</div>

<div class="flex flex-wrap -mx-4 mb-4">
  <div class="w-full md:w-1/3 px-4">
    <div class="rounded overflow-hidden">
      <div class="text-green-darker bg-green-lighter px-6 py-4 text-sm">
        .bg-green-lighter
      </div>
      <div class="text-green-darker bg-green-light px-6 py-4 text-sm">
        .bg-green-light
      </div>
      <div class="text-white bg-green px-6 py-4 text-sm">
        .bg-green
      </div>
      <div class="text-white bg-green-dark px-6 py-4 text-sm">
        .bg-green-dark
      </div>
      <div class="text-white bg-green-darker px-6 py-4 text-sm">
        .bg-green-darker
      </div>
    </div>
  </div>
  <div class="w-full md:w-1/3 px-4">
    <div class="rounded overflow-hidden">
      <div class="text-teal-darker bg-teal-lighter px-6 py-4 text-sm">
        .bg-teal-lighter
      </div>
      <div class="text-teal-darker bg-teal-light px-6 py-4 text-sm">
        .bg-teal-light
      </div>
      <div class="text-white bg-teal px-6 py-4 text-sm">
        .bg-teal
      </div>
      <div class="text-white bg-teal-dark px-6 py-4 text-sm">
        .bg-teal-dark
      </div>
      <div class="text-white bg-teal-darker px-6 py-4 text-sm">
        .bg-teal-darker
      </div>
    </div>
  </div>
  <div class="w-full md:w-1/3 px-4">
    <div class="rounded overflow-hidden">
      <div class="text-blue-darker bg-blue-lighter px-6 py-4 text-sm">
        .bg-blue-lighter
      </div>
      <div class="text-blue-darker bg-blue-light px-6 py-4 text-sm">
        .bg-blue-light
      </div>
      <div class="text-white bg-blue px-6 py-4 text-sm">
        .bg-blue
      </div>
      <div class="text-white bg-blue-dark px-6 py-4 text-sm">
        .bg-blue-dark
      </div>
      <div class="text-white bg-blue-darker px-6 py-4 text-sm">
        .bg-blue-darker
      </div>
    </div>
  </div>
</div>

<div class="flex flex-wrap -mx-4 mb-4">
  <div class="w-full md:w-1/3 px-4">
    <div class="rounded overflow-hidden">
      <div class="text-indigo-darker bg-indigo-lighter px-6 py-4 text-sm">
        .bg-indigo-lighter
      </div>
      <div class="text-indigo-darker bg-indigo-light px-6 py-4 text-sm">
        .bg-indigo-light
      </div>
      <div class="text-white bg-indigo px-6 py-4 text-sm">
        .bg-indigo
      </div>
      <div class="text-white bg-indigo-dark px-6 py-4 text-sm">
        .bg-indigo-dark
      </div>
      <div class="text-white bg-indigo-darker px-6 py-4 text-sm">
        .bg-indigo-darker
      </div>
    </div>
  </div>
  <div class="w-full md:w-1/3 px-4">
    <div class="rounded overflow-hidden">
      <div class="text-purple-darker bg-purple-lighter px-6 py-4 text-sm">
        .bg-purple-lighter
      </div>
      <div class="text-purple-darker bg-purple-light px-6 py-4 text-sm">
        .bg-purple-light
      </div>
      <div class="text-white bg-purple px-6 py-4 text-sm">
        .bg-purple
      </div>
      <div class="text-white bg-purple-dark px-6 py-4 text-sm">
        .bg-purple-dark
      </div>
      <div class="text-white bg-purple-darker px-6 py-4 text-sm">
        .bg-purple-darker
      </div>
    </div>
  </div>
  <div class="w-full md:w-1/3 px-4">
    <div class="rounded overflow-hidden">
      <div class="text-pink-darker bg-pink-lighter px-6 py-4 text-sm">
        .bg-pink-lighter
      </div>
      <div class="text-pink-darker bg-pink-light px-6 py-4 text-sm">
        .bg-pink-light
      </div>
      <div class="text-white bg-pink px-6 py-4 text-sm">
        .bg-pink
      </div>
      <div class="text-white bg-pink-dark px-6 py-4 text-sm">
        .bg-pink-dark
      </div>
      <div class="text-white bg-pink-darker px-6 py-4 text-sm">
        .bg-pink-darker
      </div>
    </div>
  </div>
</div>

Using the utilities in HTML:

```html
<div class="bg-white"></div>
<div class="bg-smoke-lighter"></div>
<div class="bg-smoke-light"></div>
<div class="bg-smoke"></div>

<div class="bg-slate-darker"></div>
<div class="bg-slate-dark"></div>
<div class="bg-slate"></div>
<div class="bg-slate-light"></div>
```

Using the utilities in Less:

```less
div {
  .bg-white;
  .bg-smoke-lighter;
  .bg-smoke-light;
  .bg-smoke;

  .bg-slate-darker;
  .bg-slate-dark;
  .bg-slate;
  .bg-slate-light;
}
```