---
title: Colors
layout: documentation
doc-tab: overview
doc-subtab: colors
breadcrumb:
- home
- documentation
- overview
- overview-colors
colors:
- white
- black
- light
- dark
- primary
- link
- info
- success
- warning
- danger
shades:
- black-bis
- black-ter
- grey-darker
- grey-dark
- grey-light
- grey-lighter
- white-ter
- white-bis
---

<div class="content">
  <p>
    Most elements and components have color variations thanks to <strong>modifiers</strong> with syntax <code>.is-$color</code>, like <code>is-primary</code> or <code>is-dark</code>.
  </p>
  <p>
    This is thanks to the <code>$colors</code> <strong>Sass map</strong>, through which Bulma cycles to grab all the colors and their inverts.
  </p>
</div>

<div class="table-container">
  <table class="table">
    <thead>
      <tr>
        <th>Color</th>
        <th>Variable</th>
        <th>Value</th>
        <th>Computed value</th>
        <th>Invert value</th>
        <th>Computed invert value</th>
      </tr>
    </thead>
    <tbody>
      {% for color in page.colors %}
        {% assign derivedColor = site.data.colors.derived | where: "id", color | first %}
        {% assign initialColor = site.data.colors.initial | where: "id", derivedColor.valueId | first %}
        <tr>
          <td>
            <strong>{{ derivedColor.id | capitalize }}</strong>
          </td>
          <td>
            <code>${{ derivedColor.id }}</code>
          </td>
          <td>
            <code>${{ initialColor.id }}</code>
          </td>
          <td>
            {% include elements/color-square.html value=initialColor.value %}
          </td>
          {% if derivedColor.invertValue %}
            <td>
              <code>{{ derivedColor.invertValue }}</code>
            </td>
            <td>
              {% include elements/color-square.html value=derivedColor.invertValue %}
            </td>
          {% elsif derivedColor.invertId %}
            {% assign invertColor = site.data.colors.initial | where: "id", derivedColor.invertId | first %}
            <td>
              <code>${{ derivedColor.invertId }}</code>
            </td>
            <td>
              {% include elements/color-square.html value=invertColor.value %}
            </td>
          {% endif %}
        </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<div class="content">
  <p>
    Bulma also provides a <code>$shades</code> <strong>Sass map</strong>, that only contains shades of grey between black and white.
  </p>
</div>

<div class="table-container">
  <table class="table">
    <thead>
      <tr>
        <th>Color</th>
        <th>Variable</th>
        <th>Value</th>
      </tr>
    </thead>
    <tbody>
      {% for shade in page.shades %}
        {% assign initial_shade = site.data.colors.initial | where: "id", shade | first %}
        <tr>
          <td>
            <strong>{{ initial_shade.name | capitalize }}</strong>
          </td>
          <td>
            <code>${{ initial_shade.id }}</code>
          </td>
          <td>
            {% include elements/color-square.html value=initial_shade.value %}
          </td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
</div>