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
findColorInvert()
函数
#
The findColorInvert($color)
函数将一个颜色 作为输入, 并输出透明的 黑色 rgba(#000, 0.7)
或者 纯白 #fff
:
- 如果
colorLuminance($color) > 0.55
, 则输出rgba(#000, 0.7)
- 此外, 则输出
#fff
其目的是为了保证输入颜色作为 背景文字时 的 可读性
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
|
对于亮度接近 0.55
阈值的颜色,可以 覆盖 findColorInvert()
函数,手动设置 反色。
例如, 紫色这种具有0.5529
的颜色亮度。最好设置白色字体而不是透明的黑色
使用 findColorInvert()
|
$purple-invert: findColorInvert($purple)
|
rgba(0,0,0,0.7)
|
Button
|
手动设置
|
$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: