Colours and colour helpers

Bulma has a small palette of named colours. Each name stands for a role, not a hue: danger means danger or an error, success means success. These names are used in every element's modifiers (is-danger) and in colour helpers, classes that colour the text or background of any tag.

The palette

There are also neutral ones: white, black, light, dark and the grey shades grey-darker, grey-dark, grey, grey-light, grey-lighter.

Text and background colour

The has-text-NAME helper colours the text, has-background-NAME the background:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<p class="has-text-success">Table booked</p>
<p class="has-text-danger">No seats available</p>
<p class="has-background-warning p-2">The kitchen closes in 30 minutes</p>
<p class="has-text-grey">Prices include VAT</p>

A green line, a red line, a yellow strip and a grey caption. The p-2 class adds padding to the strip — such classes are the topic of the next lesson.

Light and dark shades

You can add -light or -dark to a colour name. A light background with dark text of the same colour is a calm highlight that is easy to read:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<p class="has-background-danger-light has-text-danger-dark p-3">
  Order #1042 was cancelled by the guest.
</p>
<p class="has-background-success-light has-text-success-dark p-3">
  Order #1043 has been paid.
</p>

Two strips: pink with dark red text and light green with dark green text. This is how an admin page marks order statuses.

Numbered shades

In Bulma 1.0 every colour has 21 lightness shades: from 00 (almost black) to 100 (white) in steps of 5:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<div class="has-background-primary-95 p-2">primary-95</div>
<div class="has-background-primary-80 p-2">primary-80</div>
<div class="has-background-primary-60 p-2">primary-60</div>
<div class="has-background-primary-30 has-text-white p-2">primary-30</div>

Four strips from a very light turquoise to a dark one. Numbered shades help when -light and -dark are not enough.

Shades that follow the theme

The -soft and -bold suffixes adapt to the theme: has-background-primary-soft is light in the light theme and dark in the dark one, has-text-primary-bold the other way round. On sites with a dark theme they work better than -light and -dark, which never change.

Common mistake

Colouring a background without thinking about the text: has-background-dark without has-text-white gives dark text on a dark background. Helpers change one property and will not pick a contrasting colour for you. Elements with a colour modifier — buttons, heroes, notifications — choose their text colour themselves, so for coloured blocks they are the easier choice.