---
title: Color helpers
layout: documentation
doc-tab: modifiers
doc-subtab: color-helpers
breadcrumb:
- home
- documentation
- modifiers
- modifiers-color-helpers
---

{% include elements/anchor.html name="Text color" %}

<div class="content">
  <p>
    You can set any element to one of the <strong>9 colors</strong> or <strong>9 shades of grey</strong>:
  </p>
</div>

<table class="table is-bordered">
  <thead>
    <tr>
      <th>
        Class
      </th>
      <th>
        Color
      </th>
    </tr>
  </thead>
  <tbody>
    <tr><td><code>has-text-white</code></td><td>{% include color/white.html %}</td></tr>
    <tr><td><code>has-text-black</code></td><td>{% include color/black.html %}</td></tr>
    <tr><td><code>has-text-light</code></td><td>{% include color/white-ter.html %}</td></tr>
    <tr><td><code>has-text-dark</code></td><td>{% include color/grey-darker.html %}</td></tr>
    <tr><td><code>has-text-primary</code></td><td>{% include color/turquoise.html %}</td></tr>
    <tr><td><code>has-text-info</code></td><td>{% include color/cyan.html %}</td></tr>
    <tr><td><code>has-text-link</code></td><td>{% include color/blue.html %}</td></tr>
    <tr><td><code>has-text-success</code></td><td>{% include color/green.html %}</td></tr>
    <tr><td><code>has-text-warning</code></td><td>{% include color/yellow.html %}</td></tr>
    <tr><td><code>has-text-danger</code></td><td>{% include color/red.html %}</td></tr>
    <tr><td><code>has-text-black-bis</code></td><td>{% include color/black-bis.html %}</td></tr>
    <tr><td><code>has-text-black-ter</code></td><td>{% include color/black-ter.html %}</td></tr>
    <tr><td><code>has-text-grey-darker</code></td><td>{% include color/grey-darker.html %}</td></tr>
    <tr><td><code>has-text-grey-dark</code></td><td>{% include color/grey-dark.html %}</td></tr>
    <tr><td><code>has-text-grey</code></td><td>{% include color/grey.html %}</td></tr>
    <tr><td><code>has-text-grey-light</code></td><td>{% include color/grey-light.html %}</td></tr>
    <tr><td><code>has-text-grey-lighter</code></td><td>{% include color/grey-lighter.html %}</td></tr>
    <tr><td><code>has-text-white-ter</code></td><td>{% include color/white-ter.html %}</td></tr>
    <tr><td><code>has-text-white-bis</code></td><td>{% include color/white-bis.html %}</td></tr>
  </tbody>
</table>

{% assign vernum = site.data.meta.version | downcase | remove: "." | plus: 0 %}

{% if vernum >= 70 %}

{% include elements/anchor.html name="Background color" %}

{% include elements/new-tag.html version="0.7.0" %}

<div class="content">
  <p>
    You can set any element to one of the <strong>9 colors</strong> or <strong>9 shades of grey</strong>:
  </p>
</div>

<table class="table is-bordered">
  <thead>
    <tr>
      <th>
        Class
      </th>
      <th>
        Background color
      </th>
    </tr>
  </thead>
  <tbody>
    <tr><td><code>has-background-white</code></td><td>{% include color/white.html %}</td></tr>
    <tr><td><code>has-background-black</code></td><td>{% include color/black.html %}</td></tr>
    <tr><td><code>has-background-light</code></td><td>{% include color/white-ter.html %}</td></tr>
    <tr><td><code>has-background-dark</code></td><td>{% include color/grey-darker.html %}</td></tr>
    <tr><td><code>has-background-primary</code></td><td>{% include color/turquoise.html %}</td></tr>
    <tr><td><code>has-background-info</code></td><td>{% include color/cyan.html %}</td></tr>
    <tr><td><code>has-background-link</code></td><td>{% include color/blue.html %}</td></tr>
    <tr><td><code>has-background-success</code></td><td>{% include color/green.html %}</td></tr>
    <tr><td><code>has-background-warning</code></td><td>{% include color/yellow.html %}</td></tr>
    <tr><td><code>has-background-danger</code></td><td>{% include color/red.html %}</td></tr>
    <tr><td><code>has-background-black-bis</code></td><td>{% include color/black-bis.html %}</td></tr>
    <tr><td><code>has-background-black-ter</code></td><td>{% include color/black-ter.html %}</td></tr>
    <tr><td><code>has-background-grey-darker</code></td><td>{% include color/grey-darker.html %}</td></tr>
    <tr><td><code>has-background-grey-dark</code></td><td>{% include color/grey-dark.html %}</td></tr>
    <tr><td><code>has-background-grey</code></td><td>{% include color/grey.html %}</td></tr>
    <tr><td><code>has-background-grey-light</code></td><td>{% include color/grey-light.html %}</td></tr>
    <tr><td><code>has-background-grey-lighter</code></td><td>{% include color/grey-lighter.html %}</td></tr>
    <tr><td><code>has-background-white-ter</code></td><td>{% include color/white-ter.html %}</td></tr>
    <tr><td><code>has-background-white-bis</code></td><td>{% include color/white-bis.html %}</td></tr>
  </tbody>
</table>

{% endif %}