颜色（Color）

更改文本和背景的颜色

1

文本颜色 #

您可以将任何元素设置为10种颜色或9种灰色中的一种：

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

Since 0.9.0

你可以在明暗两种颜色中使用每种颜色。简单地附加*-light or *-dark，*代表每种颜色，例如has-text-primary-light。

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

背景颜色 #

您可以将任何元素设置为10种颜色或9种灰色中的一种：
同文本颜色比就是把text换成了background。例如，白色文本和白色背景分贝为has-text-white和has-background-white

发发发

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

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

Since 0.9.0

你可以在明暗两种颜色中使用每种颜色。简单地附加*-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

23222