Functions

Bulma has custom Sass functions to help find related colors dynamically:

• findColorInvert($color): returns either 70% transparent black or 100% opaque white depending on the luminance of the color
• findLightColor($color): returns the current color but with a lightness of at least 96%
• findDarkColor($color): returns the current color but with a lightness of at most 29%

Bulma also has a few utility functions to calculate useful values:

• 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

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:

The findLightColor($color) and findDarkColor($color) functions take a color as an input, and output that color's light and dark versions respectively: