bulma/docs/documentation/overview/colors.html

---
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>

<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 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>

<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>