您可以将任何元素设置为 10 种颜色 或 9 种灰色阴影
赞助
颜色辅助工具
更改文本和/或背景的颜色
文本颜色 #
| 类 | 颜色 | 示例 |
|---|---|---|
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 |
| 类 | 阴影 | 示例 |
|---|---|---|
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 |
您可以将每种颜色用于其浅色和深色版本。只需附加 *-light 或 *-dark。
| 类 | 浅色/深色 | 示例 |
|---|---|---|
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 |
您还可以继承颜色，或者使用当前颜色
| 类 | 值 | 示例 |
|---|---|---|
has-text-current |
currentColor |
Hello Bulma |
has-text-inherit |
inherit |
Hello Bulma |
背景颜色 #
您可以将任何元素设置为 10 种颜色 或 9 种灰色阴影
| 类 | 背景颜色 | |
|---|---|---|
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%) |
|
| 类 | 背景阴影 | |
|---|---|---|
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%) |
|
您可以将每种颜色用于其浅色和深色版本。只需附加 *-light 或 *-dark。
| 类 | 浅色/深色背景 | 示例 |
|---|---|---|
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 |
您还可以继承背景颜色，或者使用当前颜色作为背景颜色
| 类 | 值 | 示例 |
|---|---|---|
has-background-current |
currentColor |
Hello Bulma |
has-background-inherit |
inherit |
Hello Bulma |
