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

Colors

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

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

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!