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, 71%, 48%) #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#

The official Bulma book! 😲

by Jeremy Thomas, creator of Bulma, Oleksii Potiekhin,
Mikko Lauhakari, Aslam Shah and David Berning

A step-by-step guide that teaches you how to build a web interface from scratch using Bulma.

Formats available:
PDF Epub Mobi


Features, releases, showcase… stay in the loop!