Sponsor
Color Palette helpers
Use a color’s palette as text color and/or background
Bulma comes with 7 primary colors:
text | |
link | |
primary | |
info | |
success | |
warning | |
danger |
Bulma will automatically generate a collection of shades for each of those colors. These act as a color palette you can use to play with different variants of a same color.
Text color #
Bulma comes with CSS classes for 27 shades of each color. Each shade also comes with an invert equivalent, that is useful to combine in a foreground/background combination.
| Class | Code | Example | Swatch | Invert | Swatch |
|---|---|---|---|---|---|
has-text-primary |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-00 |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-05 |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-10 |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-15 |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-20 |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-25 |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-30 |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-35 |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-40 |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-45 |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-50 |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-55 |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-60 |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-65 |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-70 |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-75 |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-80 |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-85 |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-90 |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-95 |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-100 |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-light |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-dark |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-soft |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-bold |
|
Hello Bulma | Hello Bulma | ||
has-text-primary-on-scheme |
|
Hello Bulma | Hello Bulma |
Background color #
All 27 shades are also available as background helpers. Combined with the invert color as foreground, it's easy to make readable elements with just 2 classes.
| Class | Code | Example | Swatch |
|---|---|---|---|
has-background-primary |
Hello Bulma | ||
has-background-primary-00 |
Hello Bulma | ||
has-background-primary-05 |
Hello Bulma | ||
has-background-primary-10 |
Hello Bulma | ||
has-background-primary-15 |
Hello Bulma | ||
has-background-primary-20 |
Hello Bulma | ||
has-background-primary-25 |
Hello Bulma | ||
has-background-primary-30 |
Hello Bulma | ||
has-background-primary-35 |
Hello Bulma | ||
has-background-primary-40 |
Hello Bulma | ||
has-background-primary-45 |
Hello Bulma | ||
has-background-primary-50 |
Hello Bulma | ||
has-background-primary-55 |
Hello Bulma | ||
has-background-primary-60 |
Hello Bulma | ||
has-background-primary-65 |
Hello Bulma | ||
has-background-primary-70 |
Hello Bulma | ||
has-background-primary-75 |
Hello Bulma | ||
has-background-primary-80 |
Hello Bulma | ||
has-background-primary-85 |
Hello Bulma | ||
has-background-primary-90 |
Hello Bulma | ||
has-background-primary-95 |
Hello Bulma | ||
has-background-primary-100 |
Hello Bulma | ||
has-background-primary-light |
Hello Bulma | ||
has-background-primary-dark |
Hello Bulma | ||
has-background-primary-soft |
Hello Bulma | ||
has-background-primary-bold |
Hello Bulma | ||
has-background-primary-on-scheme |
Hello Bulma |