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

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

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

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

<table class="table is-bordered">
  <thead>
    <tr>
      <th>Class</th>
      <th>Shade</th>
      <th>Example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>has-text-black-bis</code></td>
      <td>{% include docs/color/black-bis.html %}</td>
      <td class="has-text-black-bis">Hello Bulma</td>
    </tr>
    <tr>
      <td><code>has-text-black-ter</code></td>
      <td>{% include docs/color/black-ter.html %}</td>
      <td class="has-text-black-ter">Hello Bulma</td>
    </tr>
    <tr>
      <td><code>has-text-grey-darker</code></td>
      <td>{% include docs/color/grey-darker.html %}</td>
      <td class="has-text-grey-darker">Hello Bulma</td>
    </tr>
    <tr>
      <td><code>has-text-grey-dark</code></td>
      <td>{% include docs/color/grey-dark.html %}</td>
      <td class="has-text-grey-dark">Hello Bulma</td>
    </tr>
    <tr>
      <td><code>has-text-grey</code></td>
      <td>{% include docs/color/grey.html %}</td>
      <td class="has-text-grey">Hello Bulma</td>
    </tr>
    <tr>
      <td><code>has-text-grey-light</code></td>
      <td>{% include docs/color/grey-light.html %}</td>
      <td class="has-text-grey-light">Hello Bulma</td>
    </tr>
    <tr>
      <td><code>has-text-grey-lighter</code></td>
      <td>{% include docs/color/grey-lighter.html %}</td>
      <td class="has-text-grey-lighter">Hello Bulma</td>
    </tr>
    <tr>
      <td><code>has-text-white-ter</code></td>
      <td>{% include docs/color/white-ter.html %}</td>
      <td class="has-background-black-ter has-text-white-ter">Hello Bulma</td>
    </tr>
    <tr>
      <td><code>has-text-white-bis</code></td>
      <td>{% include docs/color/white-bis.html %}</td>
      <td class="has-background-black-bis has-text-white-bis">Hello Bulma</td>
    </tr>
  </tbody>
</table>

<p class="block">
  You can use each color in their <strong>light</strong> and
  <strong>dark versions</strong>. Simply append <code>*-light</code> or
  <code>*-dark</code>.
</p>

<table class="table is-bordered">
  <thead>
    <tr>
      <th>Class</th>
      <th>Light/Dark color</th>
      <th>Example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>has-text-primary-light</code></td>
      <td>{% include docs/color/turquoise-light.html %}</td>
      <td class="has-background-dark has-text-primary-light">Hello Bulma</td>
    </tr>
    <tr>
      <td><code>has-text-link-light</code></td>
      <td>{% include docs/color/blue-light.html %}</td>
      <td class="has-background-dark has-text-link-light">Hello Bulma</td>
    </tr>
    <tr>
      <td><code>has-text-info-light</code></td>
      <td>{% include docs/color/cyan-light.html %}</td>
      <td class="has-background-dark has-text-info-light">Hello Bulma</td>
    </tr>
    <tr>
      <td><code>has-text-success-light</code></td>
      <td>{% include docs/color/green-light.html %}</td>
      <td class="has-background-dark has-text-success-light">Hello Bulma</td>
    </tr>
    <tr>
      <td><code>has-text-warning-light</code></td>
      <td>{% include docs/color/yellow-light.html %}</td>
      <td class="has-background-dark has-text-warning-light">Hello Bulma</td>
    </tr>
    <tr>
      <td><code>has-text-danger-light</code></td>
      <td>{% include docs/color/red-light.html %}</td>
      <td class="has-background-dark has-text-danger-light">Hello Bulma</td>
    </tr>
    <tr>
      <td><code>has-text-primary-dark</code></td>
      <td>{% include docs/color/turquoise-dark.html %}</td>
      <td class="has-text-primary-dark">Hello Bulma</td>
    </tr>
    <tr>
      <td><code>has-text-link-dark</code></td>
      <td>{% include docs/color/blue-dark.html %}</td>
      <td class="has-text-link-dark">Hello Bulma</td>
    </tr>
    <tr>
      <td><code>has-text-info-dark</code></td>
      <td>{% include docs/color/cyan-dark.html %}</td>
      <td class="has-text-info-dark">Hello Bulma</td>
    </tr>
    <tr>
      <td><code>has-text-success-dark</code></td>
      <td>{% include docs/color/green-dark.html %}</td>
      <td class="has-text-success-dark">Hello Bulma</td>
    </tr>
    <tr>
      <td><code>has-text-warning-dark</code></td>
      <td>{% include docs/color/yellow-dark.html %}</td>
      <td class="has-text-warning-dark">Hello Bulma</td>
    </tr>
    <tr>
      <td><code>has-text-danger-dark</code></td>
      <td>{% include docs/color/red-dark.html %}</td>
      <td class="has-text-danger-dark">Hello Bulma</td>
    </tr>
  </tbody>
</table>

{% assign vernum = site.data.meta.version | downcase | remove: '.' | plus: 0 %}
{% include docs/elements/anchor.html name="Background color" %}

<div class="content">
  <p>
    You can set any element to one of the <strong>10 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 docs/color/white.html %}</td>
    </tr>
    <tr>
      <td><code>has-background-black</code></td>
      <td>{% include docs/color/black.html %}</td>
    </tr>
    <tr>
      <td><code>has-background-light</code></td>
      <td>{% include docs/color/white-ter.html %}</td>
    </tr>
    <tr>
      <td><code>has-background-dark</code></td>
      <td>{% include docs/color/grey-darker.html %}</td>
    </tr>
    <tr>
      <td><code>has-background-primary</code></td>
      <td>{% include docs/color/turquoise.html %}</td>
    </tr>
    <tr>
      <td><code>has-background-link</code></td>
      <td>{% include docs/color/blue.html %}</td>
    </tr>
    <tr>
      <td><code>has-background-info</code></td>
      <td>{% include docs/color/cyan.html %}</td>
    </tr>
    <tr>
      <td><code>has-background-success</code></td>
      <td>{% include docs/color/green.html %}</td>
    </tr>
    <tr>
      <td><code>has-background-warning</code></td>
      <td>{% include docs/color/yellow.html %}</td>
    </tr>
    <tr>
      <td><code>has-background-danger</code></td>
      <td>{% include docs/color/red.html %}</td>
    </tr>
  </tbody>
</table>

<table class="table is-bordered">
  <thead>
    <tr>
      <th>Class</th>
      <th>Background shade</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>has-background-black-bis</code></td>
      <td>{% include docs/color/black-bis.html %}</td>
    </tr>
    <tr>
      <td><code>has-background-black-ter</code></td>
      <td>{% include docs/color/black-ter.html %}</td>
    </tr>
    <tr>
      <td><code>has-background-grey-darker</code></td>
      <td>{% include docs/color/grey-darker.html %}</td>
    </tr>
    <tr>
      <td><code>has-background-grey-dark</code></td>
      <td>{% include docs/color/grey-dark.html %}</td>
    </tr>
    <tr>
      <td><code>has-background-grey</code></td>
      <td>{% include docs/color/grey.html %}</td>
    </tr>
    <tr>
      <td><code>has-background-grey-light</code></td>
      <td>{% include docs/color/grey-light.html %}</td>
    </tr>
    <tr>
      <td><code>has-background-grey-lighter</code></td>
      <td>{% include docs/color/grey-lighter.html %}</td>
    </tr>
    <tr>
      <td><code>has-background-white-ter</code></td>
      <td>{% include docs/color/white-ter.html %}</td>
    </tr>
    <tr>
      <td><code>has-background-white-bis</code></td>
      <td>{% include docs/color/white-bis.html %}</td>
    </tr>
  </tbody>
</table>

<p class="block">
  You can use each color in their <strong>light</strong> and
  <strong>dark versions</strong>. Simply append <code>*-light</code> or
  <code>*-dark</code>.
</p>

<table class="table is-bordered">
  <thead>
    <tr>
      <th>Class</th>
      <th>Light/Dark background</th>
      <th>Example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>has-background-primary-light</code></td>
      <td>{% include docs/color/turquoise-light.html %}</td>
      <td class="has-text-primary has-background-primary-light">Hello Bulma</td>
    </tr>
    <tr>
      <td><code>has-background-link-light</code></td>
      <td>{% include docs/color/blue-light.html %}</td>
      <td class="has-text-link has-background-link-light">Hello Bulma</td>
    </tr>
    <tr>
      <td><code>has-background-info-light</code></td>
      <td>{% include docs/color/cyan-light.html %}</td>
      <td class="has-text-info has-background-info-light">Hello Bulma</td>
    </tr>
    <tr>
      <td><code>has-background-success-light</code></td>
      <td>{% include docs/color/green-light.html %}</td>
      <td class="has-text-success has-background-success-light">Hello Bulma</td>
    </tr>
    <tr>
      <td><code>has-background-warning-light</code></td>
      <td>{% include docs/color/yellow-light.html %}</td>
      <td class="has-text-warning has-background-warning-light">Hello Bulma</td>
    </tr>
    <tr>
      <td><code>has-background-danger-light</code></td>
      <td>{% include docs/color/red-light.html %}</td>
      <td class="has-text-danger has-background-danger-light">Hello Bulma</td>
    </tr>
    <tr>
      <td><code>has-background-primary-dark</code></td>
      <td>{% include docs/color/turquoise-dark.html %}</td>
      <td class="has-text-white has-background-primary-dark">Hello Bulma</td>
    </tr>
    <tr>
      <td><code>has-background-link-dark</code></td>
      <td>{% include docs/color/blue-dark.html %}</td>
      <td class="has-text-white has-background-link-dark">Hello Bulma</td>
    </tr>
    <tr>
      <td><code>has-background-info-dark</code></td>
      <td>{% include docs/color/cyan-dark.html %}</td>
      <td class="has-text-white has-background-info-dark">Hello Bulma</td>
    </tr>
    <tr>
      <td><code>has-background-success-dark</code></td>
      <td>{% include docs/color/green-dark.html %}</td>
      <td class="has-text-white has-background-success-dark">Hello Bulma</td>
    </tr>
    <tr>
      <td><code>has-background-warning-dark</code></td>
      <td>{% include docs/color/yellow-dark.html %}</td>
      <td class="has-text-white has-background-warning-dark">Hello Bulma</td>
    </tr>
    <tr>
      <td><code>has-background-danger-dark</code></td>
      <td>{% include docs/color/red-dark.html %}</td>
      <td class="has-text-white has-background-danger-dark">Hello Bulma</td>
    </tr>
  </tbody>
</table>