Functions

Bulma uses 5 custom functions to help define the values and colors dynamically:

• powerNumber($number, $exp): calculates the value of a number exposed to another one. Returns a number.
• colorLuminance($color): 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.
• findColorInvert($color): returns either 70% transparent black or 100% opaque white depending on the luminance of the color.

The findColorInvert($color) function takes a color as an input, and outputs either transparent black rgba(#000, 0.7) or white #fff:

• if colorLuminance($color) > 0.55, it outputs rgba(#000, 0.7)
• otherwise, it outputs #fff

Its purpose is to guarantee a readable shade for the text when the input color is used as the background.

For colors that have a luminance close to the 0.55 threshold, it can be useful to override the findColorInvert() function, and rather set the invert color manually.
For example, this shade of purple has a color luminance of 0.5529. It can be preferable to set a color invert of white instead of transparent black: