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

Color helpers

Change the color of the text and/or background


Text color #

You can set any element to one of the 9 colors or 9 shades of grey:

Class Color
has-text-white hsl(0, 0%, 100%)
has-text-black hsl(0, 0%, 4%)
has-text-light hsl(0, 0%, 96%)
has-text-dark hsl(0, 0%, 21%)
has-text-primary hsl(171, 100%, 41%)
has-text-info hsl(204, 86%, 53%)
has-text-link hsl(217, 71%, 53%)
has-text-success hsl(141, 71%, 48%)
has-text-warning hsl(48, 100%, 67%)
has-text-danger hsl(348, 100%, 61%)
has-text-black-bis hsl(0, 0%, 7%)
has-text-black-ter hsl(0, 0%, 14%)
has-text-grey-darker hsl(0, 0%, 21%)
has-text-grey-dark hsl(0, 0%, 29%)
has-text-grey hsl(0, 0%, 48%)
has-text-grey-light hsl(0, 0%, 71%)
has-text-grey-lighter hsl(0, 0%, 86%)
has-text-white-ter hsl(0, 0%, 96%)
has-text-white-bis hsl(0, 0%, 98%)

Background color #

Since 0.7.0

You can set any element to one of the 9 colors or 9 shades of grey:

Class Background color
has-background-white hsl(0, 0%, 100%)
has-background-black hsl(0, 0%, 4%)
has-background-light hsl(0, 0%, 96%)
has-background-dark hsl(0, 0%, 21%)
has-background-primary hsl(171, 100%, 41%)
has-background-info hsl(204, 86%, 53%)
has-background-link hsl(217, 71%, 53%)
has-background-success hsl(141, 71%, 48%)
has-background-warning hsl(48, 100%, 67%)
has-background-danger hsl(348, 100%, 61%)
has-background-black-bis hsl(0, 0%, 7%)
has-background-black-ter hsl(0, 0%, 14%)
has-background-grey-darker hsl(0, 0%, 21%)
has-background-grey-dark hsl(0, 0%, 29%)
has-background-grey hsl(0, 0%, 48%)
has-background-grey-light hsl(0, 0%, 71%)
has-background-grey-lighter hsl(0, 0%, 86%)
has-background-white-ter hsl(0, 0%, 96%)
has-background-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#
#native_cta#
New!

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
or
Kindle

Newsletter

Features, releases, showcase… stay in the loop!