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 Buval |
has-text-black | hsl(0, 0%, 4%) | Hello Buval |
has-text-light | hsl(0, 0%, 96%) | Hello Buval |
has-text-dark | hsl(0, 0%, 21%) | Hello Buval |
has-text-primary | hsl(210, 100%, 20%) | Hello Buval |
has-text-mix | hsl(28, 100%, 50%) | Hello Buval |
has-text-info | hsl(204, 86%, 53%) | Hello Buval |
has-text-success | hsl(141, 97%, 27%) | Hello Buval |
has-text-warning | hsl(48, 87%, 56%) | Hello Buval |
has-text-danger | hsl(0, 100%, 56%) | Hello Buval |
| Class | Shade | Example |
|---|---|---|
has-text-black-bis | hsl(0, 0%, 7%) | Hello Buval |
has-text-black-ter | hsl(0, 0%, 14%) | Hello Buval |
has-text-grey-darker | hsl(0, 0%, 21%) | Hello Buval |
has-text-grey-dark | hsl(0, 0%, 29%) | Hello Buval |
has-text-grey | hsl(0, 0%, 48%) | Hello Buval |
has-text-grey-light | hsl(0, 0%, 71%) | Hello Buval |
has-text-grey-lighter | hsl(0, 0%, 86%) | Hello Buval |
has-text-grey-lighting | hsl(0, 0%, 90%) | Hello Buval |
has-text-grey-lightest | hsl(0, 0%, 93%) | Hello Buval |
has-text-white-ter | hsl(0, 0%, 96%) | Hello Buval |
has-text-white-bis | hsl(0, 0%, 98%) | Hello Buval |
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(201, 70%, 96%) | Hello Buval |
has-text-mix-light | hsl(12, 100%, 96%) | Hello Buval |
has-text-info-light | hsl(206, 70%, 96%) | Hello Buval |
has-text-success-light | hsl(142, 52%, 96%) | Hello Buval |
has-text-warning-light | hsl(48, 100%, 96%) | Hello Buval |
has-text-danger-light | hsl(347, 90%, 96%) | Hello Buval |
has-text-primary-dark | hsl(200, 67%, 39%) | Hello Buval |
has-text-mix-dark | hsl(14,100%,42%) | Hello Buval |
has-text-info-dark | hsl(204, 71%, 39%) | Hello Buval |
has-text-success-dark | hsl(141, 53%, 31%) | Hello Buval |
has-text-warning-dark | hsl(48, 100%, 29%) | Hello Buval |
has-text-danger-dark | hsl(348, 86%, 43%) | Hello Buval |
Background color
You can set any element to one of the 10 colors or 9 shades of grey:
| Class | 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(210, 100%, 20%) |
has-background-mix | hsl(28, 100%, 50%) |
has-background-info | hsl(204, 86%, 53%) |
has-background-success | hsl(141, 97%, 27%) |
has-background-warning | hsl(48, 87%, 56%) |
has-background-danger | hsl(0, 100%, 56%) |
| Class | 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-grey-lighting | hsl(0, 0%, 90%) |
has-background-grey-lightest | hsl(0, 0%, 93%) |
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 color | Example |
|---|---|---|
has-background-primary-light | hsl(201, 70%, 96%) | Hello Buval |
has-background-mix-light | hsl(12, 100%, 96%) | Hello Buval |
has-background-info-light | hsl(206, 70%, 96%) | Hello Buval |
has-background-success-light | hsl(142, 52%, 96%) | Hello Buval |
has-background-warning-light | hsl(48, 100%, 96%) | Hello Buval |
has-background-danger-light | hsl(347, 90%, 96%) | Hello Buval |
has-background-primary-dark | hsl(200, 67%, 39%) | Hello Buval |
has-background-mix-dark | hsl(14,100%,42%) | Hello Buval |
has-background-info-dark | hsl(204, 71%, 39%) | Hello Buval |
has-background-success-dark | hsl(141, 53%, 31%) | Hello Buval |
has-background-warning-dark | hsl(48, 100%, 29%) | Hello Buval |
has-background-danger-dark | hsl(348, 86%, 43%) | Hello Buval |