Bulma uses 3 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.findColorInvert() function" %}
The findColorInvert($color) function takes a color as an input, and outputs either transparent black rgba(#000, 0.7) or white #fff:
colorLuminance($color) > 0.55, it outputs rgba(#000, 0.7)#fffIts purpose is to guarantee a readable shade for the text when the input color is used as the background.
| color | color luminance | findColorInvert() | result |
|---|---|---|---|
#00d1b2
|
0.52831
|
#fff
|
Button |
#3273dc
|
0.23119
|
#fff
|
Button |
#23d160
|
0.51067
|
#fff
|
Button |
#ffdd57
|
0.76863
|
rgba(0, 0, 0, 0.7)
|
Button |
#ff3860
|
0.27313
|
#fff
|
Button |
#ffb3b3
|
0.61796
|
rgba(0,0,0,0.7)
|
Button |
#ffbc6b
|
0.63053
|
rgba(0,0,0,0.7)
|
Button |
hsl(294, 71%, 79%)
|
0.5529
|
rgba(0,0,0,0.7)
|
Button |
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: