Colors - Documentation - tabler.github.io - a responsive, flat and full featured admin template

Jane Pearson Administrator

# Documentation

Browse source code
Introduction
Alerts Avatars Buttons Colors Cards Charts Form components Tags Typography
Edit this page

## Colors

Convey meaning through color with a handful of color utility classes.

### Contextual colors

A background fill can be applied to a container using one of the `.bg-[color]` classes.

Primary
`.bg-primary`
Secondary
`.bg-secondary`
Success
`.bg-success`
Info
`.bg-info`
Warning
`.bg-warning`
Danger
`.bg-danger`

    <div class="d-flex align-items-center mb-4">
      <div class="w-7 h-7 bg-primary rounded mr-4"></div>
      <div>
        <strong>Primary</strong><br />
        <code>.bg-primary</code>
      </div>
    </div>
    <div class="d-flex align-items-center mb-4">
      <div class="w-7 h-7 bg-secondary rounded mr-4"></div>
      <div>
        <strong>Secondary</strong><br />
        <code>.bg-secondary</code>
      </div>
    </div>
    <div class="d-flex align-items-center mb-4">
      <div class="w-7 h-7 bg-success rounded mr-4"></div>
      <div>
        <strong>Success</strong><br />
        <code>.bg-success</code>
      </div>
    </div>
    <div class="d-flex align-items-center mb-4">
      <div class="w-7 h-7 bg-info rounded mr-4"></div>
      <div>
        <strong>Info</strong><br />
        <code>.bg-info</code>
      </div>
    </div>
    <div class="d-flex align-items-center mb-4">
      <div class="w-7 h-7 bg-warning rounded mr-4"></div>
      <div>
        <strong>Warning</strong><br />
        <code>.bg-warning</code>
      </div>
    </div>
    <div class="d-flex align-items-center mb-4">
      <div class="w-7 h-7 bg-danger rounded mr-4"></div>
      <div>
        <strong>Danger</strong><br />
        <code>.bg-danger</code>
      </div>
    </div>

### Other colors

Instead of using contextual classes you can use ordinary color names.

Blue
`.bg-blue`
Azure
`.bg-azure`
Indigo
`.bg-indigo`
Purple
`.bg-purple`
Pink
`.bg-pink`
Red
`.bg-red`
Orange
`.bg-orange`
Yellow
`.bg-yellow`
Lime
`.bg-lime`
Green
`.bg-green`
Teal
`.bg-teal`
Cyan
`.bg-cyan`
Gray
`.bg-gray`
Dark gray
`.bg-gray-dark`

    <div class="row">
    <div class="col-4">
    <div class="d-flex align-items-center mb-4">
      <div class="w-7 h-7 bg-blue rounded mr-4"></div>
      <div>
        <strong>Blue</strong><br />
        <code>.bg-blue</code>
      </div>
    </div>
    <div class="d-flex align-items-center mb-4">
      <div class="w-7 h-7 bg-azure rounded mr-4"></div>
      <div>
        <strong>Azure</strong><br />
        <code>.bg-azure</code>
      </div>
    </div>
    <div class="d-flex align-items-center mb-4">
      <div class="w-7 h-7 bg-indigo rounded mr-4"></div>
      <div>
        <strong>Indigo</strong><br />
        <code>.bg-indigo</code>
      </div>
    </div>
    <div class="d-flex align-items-center mb-4">
      <div class="w-7 h-7 bg-purple rounded mr-4"></div>
      <div>
        <strong>Purple</strong><br />
        <code>.bg-purple</code>
      </div>
    </div>
    <div class="d-flex align-items-center mb-4">
      <div class="w-7 h-7 bg-pink rounded mr-4"></div>
      <div>
        <strong>Pink</strong><br />
        <code>.bg-pink</code>
      </div>
    </div>
    </div>
    <div class="col-4">
    <div class="d-flex align-items-center mb-4">
      <div class="w-7 h-7 bg-red rounded mr-4"></div>
      <div>
        <strong>Red</strong><br />
        <code>.bg-red</code>
      </div>
    </div>
    <div class="d-flex align-items-center mb-4">
      <div class="w-7 h-7 bg-orange rounded mr-4"></div>
      <div>
        <strong>Orange</strong><br />
        <code>.bg-orange</code>
      </div>
    </div>
    <div class="d-flex align-items-center mb-4">
      <div class="w-7 h-7 bg-yellow rounded mr-4"></div>
      <div>
        <strong>Yellow</strong><br />
        <code>.bg-yellow</code>
      </div>
    </div>
    <div class="d-flex align-items-center mb-4">
      <div class="w-7 h-7 bg-lime rounded mr-4"></div>
      <div>
        <strong>Lime</strong><br />
        <code>.bg-lime</code>
      </div>
    </div>
    <div class="d-flex align-items-center mb-4">
      <div class="w-7 h-7 bg-green rounded mr-4"></div>
      <div>
        <strong>Green</strong><br />
        <code>.bg-green</code>
      </div>
    </div>
    </div>
    <div class="col-4">
    <div class="d-flex align-items-center mb-4">
      <div class="w-7 h-7 bg-teal rounded mr-4"></div>
      <div>
        <strong>Teal</strong><br />
        <code>.bg-teal</code>
      </div>
    </div>
    <div class="d-flex align-items-center mb-4">
      <div class="w-7 h-7 bg-cyan rounded mr-4"></div>
      <div>
        <strong>Cyan</strong><br />
        <code>.bg-cyan</code>
      </div>
    </div>
    <div class="d-flex align-items-center mb-4">
      <div class="w-7 h-7 bg-gray rounded mr-4"></div>
      <div>
        <strong>Gray</strong><br />
        <code>.bg-gray</code>
      </div>
    </div>
    <div class="d-flex align-items-center mb-4">
      <div class="w-7 h-7 bg-gray-dark rounded mr-4"></div>
      <div>
        <strong>Dark gray</strong><br />
        <code>.bg-gray-dark</code>
      </div>
    </div>
    </div>
    </div>

### Tinting backgrounds

Translucent background fills to shade an element against a background. You can use one of few suffixes:
`-darkest`, `-darker`, `-dark`, `-lightest`, `-lighter` or `-light`.

Darkest blue
`.bg-blue-darkest`
Darker blue
`.bg-blue-darker`
Dark blue
`.bg-blue-dark`
Default blue
`.bg-blue`
Light blue
`.bg-blue-light`
Lighter blue
`.bg-blue-lighter`
Lightest blue
`.bg-blue-lightest`

    <div class="d-flex align-items-center mb-4">
      <div class="w-7 h-7 bg-blue-darkest rounded mr-4"></div>
      <div>
        <strong>Darkest blue</strong><br />
        <code>.bg-blue-darkest</code>
      </div>
    </div>
    <div class="d-flex align-items-center mb-4">
      <div class="w-7 h-7 bg-blue-darker rounded mr-4"></div>
      <div>
        <strong>Darker blue</strong><br />
        <code>.bg-blue-darker</code>
      </div>
    </div>
    <div class="d-flex align-items-center mb-4">
      <div class="w-7 h-7 bg-blue-dark rounded mr-4"></div>
      <div>
        <strong>Dark blue</strong><br />
        <code>.bg-blue-dark</code>
      </div>
    </div>
    <div class="d-flex align-items-center mb-4">
      <div class="w-7 h-7 bg-blue rounded mr-4"></div>
      <div>
        <strong>Default blue</strong><br />
        <code>.bg-blue</code>
      </div>
    </div>
    <div class="d-flex align-items-center mb-4">
      <div class="w-7 h-7 bg-blue-light rounded mr-4"></div>
      <div>
        <strong>Light blue</strong><br />
        <code>.bg-blue-light</code>
      </div>
    </div>
    <div class="d-flex align-items-center mb-4">
      <div class="w-7 h-7 bg-blue-lighter rounded mr-4"></div>
      <div>
        <strong>Lighter blue</strong><br />
        <code>.bg-blue-lighter</code>
      </div>
    </div>
    <div class="d-flex align-items-center mb-4">
      <div class="w-7 h-7 bg-blue-lightest rounded mr-4"></div>
      <div>
        <strong>Lightest blue</strong><br />
        <code>.bg-blue-lightest</code>
      </div>
    </div>