Download

Sponsor

Route Planner and Route Optimizer

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
<p class="has-text-primary">Hello Bulma</p>
Hello Bulma Hello Bulma
has-text-primary-00
<p class="has-text-primary-00">Hello Bulma</p>
Hello Bulma Hello Bulma
has-text-primary-05
<p class="has-text-primary-05">Hello Bulma</p>
Hello Bulma Hello Bulma
has-text-primary-10
<p class="has-text-primary-10">Hello Bulma</p>
Hello Bulma Hello Bulma
has-text-primary-15
<p class="has-text-primary-15">Hello Bulma</p>
Hello Bulma Hello Bulma
has-text-primary-20
<p class="has-text-primary-20">Hello Bulma</p>
Hello Bulma Hello Bulma
has-text-primary-25
<p class="has-text-primary-25">Hello Bulma</p>
Hello Bulma Hello Bulma
has-text-primary-30
<p class="has-text-primary-30">Hello Bulma</p>
Hello Bulma Hello Bulma
has-text-primary-35
<p class="has-text-primary-35">Hello Bulma</p>
Hello Bulma Hello Bulma
has-text-primary-40
<p class="has-text-primary-40">Hello Bulma</p>
Hello Bulma Hello Bulma
has-text-primary-45
<p class="has-text-primary-45">Hello Bulma</p>
Hello Bulma Hello Bulma
has-text-primary-50
<p class="has-text-primary-50">Hello Bulma</p>
Hello Bulma Hello Bulma
has-text-primary-55
<p class="has-text-primary-55">Hello Bulma</p>
Hello Bulma Hello Bulma
has-text-primary-60
<p class="has-text-primary-60">Hello Bulma</p>
Hello Bulma Hello Bulma
has-text-primary-65
<p class="has-text-primary-65">Hello Bulma</p>
Hello Bulma Hello Bulma
has-text-primary-70
<p class="has-text-primary-70">Hello Bulma</p>
Hello Bulma Hello Bulma
has-text-primary-75
<p class="has-text-primary-75">Hello Bulma</p>
Hello Bulma Hello Bulma
has-text-primary-80
<p class="has-text-primary-80">Hello Bulma</p>
Hello Bulma Hello Bulma
has-text-primary-85
<p class="has-text-primary-85">Hello Bulma</p>
Hello Bulma Hello Bulma
has-text-primary-90
<p class="has-text-primary-90">Hello Bulma</p>
Hello Bulma Hello Bulma
has-text-primary-95
<p class="has-text-primary-95">Hello Bulma</p>
Hello Bulma Hello Bulma
has-text-primary-100
<p class="has-text-primary-100">Hello Bulma</p>
Hello Bulma Hello Bulma
has-text-primary-light
<p class="has-text-primary-light">Hello Bulma</p>
Hello Bulma Hello Bulma
has-text-primary-dark
<p class="has-text-primary-dark">Hello Bulma</p>
Hello Bulma Hello Bulma
has-text-primary-soft
<p class="has-text-primary-soft">Hello Bulma</p>
Hello Bulma Hello Bulma
has-text-primary-bold
<p class="has-text-primary-bold">Hello Bulma</p>
Hello Bulma Hello Bulma
has-text-primary-on-scheme
<p class="has-text-primary-on-scheme">Hello Bulma</p>
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
<p class="has-background-primary has-text-primary-invert">
Hello Bulma
</p>
Hello Bulma
has-background-primary-00
<p class="has-background-primary-00 has-text-primary-00-invert">
Hello Bulma
</p>
Hello Bulma
has-background-primary-05
<p class="has-background-primary-05 has-text-primary-05-invert">
Hello Bulma
</p>
Hello Bulma
has-background-primary-10
<p class="has-background-primary-10 has-text-primary-10-invert">
Hello Bulma
</p>
Hello Bulma
has-background-primary-15
<p class="has-background-primary-15 has-text-primary-15-invert">
Hello Bulma
</p>
Hello Bulma
has-background-primary-20
<p class="has-background-primary-20 has-text-primary-20-invert">
Hello Bulma
</p>
Hello Bulma
has-background-primary-25
<p class="has-background-primary-25 has-text-primary-25-invert">
Hello Bulma
</p>
Hello Bulma
has-background-primary-30
<p class="has-background-primary-30 has-text-primary-30-invert">
Hello Bulma
</p>
Hello Bulma
has-background-primary-35
<p class="has-background-primary-35 has-text-primary-35-invert">
Hello Bulma
</p>
Hello Bulma
has-background-primary-40
<p class="has-background-primary-40 has-text-primary-40-invert">
Hello Bulma
</p>
Hello Bulma
has-background-primary-45
<p class="has-background-primary-45 has-text-primary-45-invert">
Hello Bulma
</p>
Hello Bulma
has-background-primary-50
<p class="has-background-primary-50 has-text-primary-50-invert">
Hello Bulma
</p>
Hello Bulma
has-background-primary-55
<p class="has-background-primary-55 has-text-primary-55-invert">
Hello Bulma
</p>
Hello Bulma
has-background-primary-60
<p class="has-background-primary-60 has-text-primary-60-invert">
Hello Bulma
</p>
Hello Bulma
has-background-primary-65
<p class="has-background-primary-65 has-text-primary-65-invert">
Hello Bulma
</p>
Hello Bulma
has-background-primary-70
<p class="has-background-primary-70 has-text-primary-70-invert">
Hello Bulma
</p>
Hello Bulma
has-background-primary-75
<p class="has-background-primary-75 has-text-primary-75-invert">
Hello Bulma
</p>
Hello Bulma
has-background-primary-80
<p class="has-background-primary-80 has-text-primary-80-invert">
Hello Bulma
</p>
Hello Bulma
has-background-primary-85
<p class="has-background-primary-85 has-text-primary-85-invert">
Hello Bulma
</p>
Hello Bulma
has-background-primary-90
<p class="has-background-primary-90 has-text-primary-90-invert">
Hello Bulma
</p>
Hello Bulma
has-background-primary-95
<p class="has-background-primary-95 has-text-primary-95-invert">
Hello Bulma
</p>
Hello Bulma
has-background-primary-100
<p class="has-background-primary-100 has-text-primary-100-invert">
Hello Bulma
</p>
Hello Bulma
has-background-primary-light
<p class="has-background-primary-light has-text-primary-light-invert">
Hello Bulma
</p>
Hello Bulma
has-background-primary-dark
<p class="has-background-primary-dark has-text-primary-dark-invert">
Hello Bulma
</p>
Hello Bulma
has-background-primary-soft
<p class="has-background-primary-soft has-text-primary-soft-invert">
Hello Bulma
</p>
Hello Bulma
has-background-primary-bold
<p class="has-background-primary-bold has-text-primary-bold-invert">
Hello Bulma
</p>
Hello Bulma
has-background-primary-on-scheme
<p class="has-background-primary-on-scheme has-text-primary-on-scheme-invert">
Hello Bulma
</p>
Hello Bulma

How to support Bulma

#native_company# #native_desc#
#native_cta#