functions.html

---
layout: documentation
doc-tab: overview
doc-subtab: functions
---

{% include subnav-overview.html %}

<section class="section">
  <div class="container">
    <h1 class="title">Functions</h1>
    <h2 class="subtitle">Utility functions to calculate colors and other values</h2>

    <hr>

    <div class="content">
      <p>Bulma uses 5 custom functions to help define the values and colors dynamically:</p>
      <ul>
        <li><code>powerNumber($number, $exp)</code>: calculates the value of a number exposed to another one. Returns a number.</li>
        <li><code>colorLuminance($color)</code>: defines if a color is dark or light. Return a decimal number between 0 and 1 where <= 0.5 is dark and > 0.5 is light.</li>
        <li><code>findColorInvert($color)</code>: returns either 70% transparent black or 100% opaque white depending on the luminance of the color.</li>
      </ul>
    </div>
  </div>
</section>