Learn CSS with 🎓 online interactive courses,📺 educational videos, and 🧑🏻‍💻project-building tutorials.

Color helpers

Change the color of the text and/or background

Text color #

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

Class	Color	Example
`has-text-white`	`hsl(0, 0%, 100%)`	Hello Bulma
`has-text-black`	`hsl(0, 0%, 4%)`	Hello Bulma
`has-text-light`	`hsl(0, 0%, 96%)`	Hello Bulma
`has-text-dark`	`hsl(0, 0%, 21%)`	Hello Bulma
`has-text-primary`	`hsl(171, 100%, 41%)`	Hello Bulma
`has-text-link`	`hsl(217, 71%, 53%)`	Hello Bulma
`has-text-info`	`hsl(204, 86%, 53%)`	Hello Bulma
`has-text-success`	`hsl(141, 71%, 48%)`	Hello Bulma
`has-text-warning`	`hsl(48, 100%, 67%)`	Hello Bulma
`has-text-danger`	`hsl(348, 100%, 61%)`	Hello Bulma

Class	Shade	Example
`has-text-black-bis`	`hsl(0, 0%, 7%)`	Hello Bulma
`has-text-black-ter`	`hsl(0, 0%, 14%)`	Hello Bulma
`has-text-grey-darker`	`hsl(0, 0%, 21%)`	Hello Bulma
`has-text-grey-dark`	`hsl(0, 0%, 29%)`	Hello Bulma
`has-text-grey`	`hsl(0, 0%, 48%)`	Hello Bulma
`has-text-grey-light`	`hsl(0, 0%, 71%)`	Hello Bulma
`has-text-grey-lighter`	`hsl(0, 0%, 86%)`	Hello Bulma
`has-text-white-ter`	`hsl(0, 0%, 96%)`	Hello Bulma
`has-text-white-bis`	`hsl(0, 0%, 98%)`	Hello Bulma

You can use each color in their light and dark versions. Simply append *-light or *-dark.

Class	Light/Dark color	Example
`has-text-primary-light`	`hsl(171, 100%, 96%)`	Hello Bulma
`has-text-link-light`	`hsl(219, 70%, 96%)`	Hello Bulma
`has-text-info-light`	`hsl(206, 70%, 96%)`	Hello Bulma
`has-text-success-light`	`hsl(142, 52%, 96%)`	Hello Bulma
`has-text-warning-light`	`hsl(48, 100%, 96%)`	Hello Bulma
`has-text-danger-light`	`hsl(347, 90%, 96%)`	Hello Bulma
`has-text-primary-dark`	`hsl(171, 100%, 29%)`	Hello Bulma
`has-text-link-dark`	`hsl(217, 71%, 45%)`	Hello Bulma
`has-text-info-dark`	`hsl(204, 71%, 39%)`	Hello Bulma
`has-text-success-dark`	`hsl(141, 53%, 31%)`	Hello Bulma
`has-text-warning-dark`	`hsl(48, 100%, 29%)`	Hello Bulma
`has-text-danger-dark`	`hsl(348, 86%, 43%)`	Hello Bulma

You can also inherit the color, or use the current one:

Class	Value	Example
`has-text-current`	`currentColor`	Hello Bulma
`has-text-inherit`	`inherit`	Hello Bulma

Background color #

You can set any element to one of the 10 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-link`	`hsl(217, 71%, 53%)`
`has-background-info`	`hsl(204, 86%, 53%)`
`has-background-success`	`hsl(141, 71%, 48%)`
`has-background-warning`	`hsl(48, 100%, 67%)`
`has-background-danger`	`hsl(348, 100%, 61%)`

Class	Background shade
`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%)`

You can use each color in their light and dark versions. Simply append *-light or *-dark.

Class	Light/Dark background	Example
`has-background-primary-light`	`hsl(171, 100%, 96%)`	Hello Bulma
`has-background-link-light`	`hsl(219, 70%, 96%)`	Hello Bulma
`has-background-info-light`	`hsl(206, 70%, 96%)`	Hello Bulma
`has-background-success-light`	`hsl(142, 52%, 96%)`	Hello Bulma
`has-background-warning-light`	`hsl(48, 100%, 96%)`	Hello Bulma
`has-background-danger-light`	`hsl(347, 90%, 96%)`	Hello Bulma
`has-background-primary-dark`	`hsl(171, 100%, 29%)`	Hello Bulma
`has-background-link-dark`	`hsl(217, 71%, 45%)`	Hello Bulma
`has-background-info-dark`	`hsl(204, 71%, 39%)`	Hello Bulma
`has-background-success-dark`	`hsl(141, 53%, 31%)`	Hello Bulma
`has-background-warning-dark`	`hsl(48, 100%, 29%)`	Hello Bulma
`has-background-danger-dark`	`hsl(348, 86%, 43%)`	Hello Bulma

You can also inherit the background color, or use the current color as background one:

Class	Value	Example
`has-background-current`	`currentColor`	Hello Bulma
`has-background-inherit`	`inherit`	Hello Bulma

How to support Bulma

#native_company# #native_desc#

Get started for Free

Get started for Free