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.
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:
with findColorInvert()
|
$purple-invert: findColorInvert($purple)
|
rgba(0,0,0,0.7)
|
Button
|
with manual setting
|
$purple-invert: #fff
|
#fff
|
Button
|
The findLightColor($color)
and findDarkColor($color)
functions take a color as an input, and output that color's light and dark versions respectively: