---
title: Colors
layout: documentation
doc-tab: overview
doc-subtab: colors
colors:
- id: "white"
- id: "black"
- id: "light"
- id: "dark"
- id: "primary"
- id: "link"
- id: "info"
- id: "success"
- id: "warning"
- id: "danger"
---

{% include subnav-overview.html %}

<section class="section">
  <div class="container">
    <h1 class="title">Colors</h1>
    <h2 class="subtitle">The <strong>colors</strong> that <strong>style</strong> most Bulma elements and components</h2>

    <hr>

    <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.variables.derived.colors | where: "id", color.id | first %}
          {% assign initialColor = site.data.variables.initial.colors | 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.variables.initial.colors | 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>
</section>