You are viewing the deprecated 0.9.3 version of the website. Click here to view the latest version


The colors that style most Bulma elements and components

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

Bulma also provides a $shades Sass map, that only contains shades of grey between black and white.

Color Variable Value
Black bis $black-bis hsl(0, 0%, 7%)
Black ter $black-ter hsl(0, 0%, 14%)
Grey darker $grey-darker hsl(0, 0%, 21%)
Grey dark $grey-dark hsl(0, 0%, 29%)
Grey light $grey-light hsl(0, 0%, 71%)
Grey lighter $grey-lighter hsl(0, 0%, 86%)
White ter $white-ter hsl(0, 0%, 96%)
White bis $white-bis hsl(0, 0%, 98%)

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

#native_company# #native_desc#

Newsletter Features, releases, showcase… stay in the loop!