You can set any element to one of the 9 colors or 9 shades of grey:
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(210, 100%, 55%)
|
has-text-success |
hsl(164, 58%, 44%)
|
has-text-warning |
hsl(46, 99%, 61%)
|
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%)
|
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(210, 100%, 55%)
|
has-background-success |
hsl(164, 58%, 44%)
|
has-background-warning |
hsl(46, 99%, 61%)
|
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%)
|
This page is open source. View on GitHub