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`

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

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