Most elements and components have color variations thanks to modifiers with syntax
.is-$color, like
is-primary or
is-dark.
This is thanks to the
$colors Sass map, through which Bulma cycles to grab all the colors and their inverts.
| Color |
Variable |
Value |
Computed value |
Invert value |
Computed invert value |
| White |
$white |
$white |
hsl(0, 0%, 100%) |
$black |
hsl(0, 0%, 4%) |
| Black |
$black |
$black |
hsl(0, 0%, 4%) |
$white |
hsl(0, 0%, 100%) |
| Light |
$light |
$white-ter |
hsl(0, 0%, 96%) |
$grey-darker |
hsl(0, 0%, 21%) |
| Dark |
$dark |
$grey-darker |
hsl(0, 0%, 21%) |
$white-ter |
hsl(0, 0%, 96%) |
| Primary |
$primary |
$turquoise |
hsl(171, 100%, 41%) |
#fff |
#fff |
| Link |
$link |
$blue |
hsl(217, 71%, 53%) |
#fff |
#fff |
| Info |
$info |
$cyan |
hsl(204, 86%, 53%) |
#fff |
#fff |
| Success |
$success |
$green |
hsl(141, 53%, 53%) |
#fff |
#fff |
| Warning |
$warning |
$yellow |
hsl(48, 100%, 67%) |
rgba(0, 0, 0, 0.7) |
rgba(0, 0, 0, 0.7) |
| Danger |
$danger |
$red |
hsl(348, 100%, 61%) |
#fff |
#fff |
