Utility functions to calculate colors and other values

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() function #

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() and findDarkColor() functions #

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

color findLightColor findDarkColor
hsl(171deg, 100%, 41%) hsl(171deg, 100%, 96%) hsl(171deg, 100%, 29%)
hsl(229deg 53% 53%) hsl(229deg 52% 96%) hsl(229deg 53% 47%)
hsl(153deg 53% 53%) hsl(153deg 52% 96%) hsl(153deg 53% 31%)
hsl(44deg 100% 77%) hsl(45deg 100% 96%) hsl(44deg 100% 29%)
hsl(348deg 86% 61%) hsl(347deg 90% 96%) hsl(348deg 86% 43%)

Made with Bulma This page is open source. Noticed a typo? Or something unclear?
Improve this page on GitHub

#native_company# #native_desc#