Bulma Colors

Last Updated : 24 Jan, 2023

The Bulma colors classes are used to set the color of the text and background. If you want to design your text or any specific content then this class is so useful. All the color classes are mentioned and described below.

Bulma Colors Class: All the below mentioned classes can be used to color text and background as well

white: This color is used to set the color of pure white and the computed value is hsl(0, 0%, 100%).
black: This color is used to set the color of pure black and the computed value is hsl(0, 0%, 4%).
light: This color is used to set the color of light gray and the computed value is hsl(0, 0%, 96%).
dark: This color is used to set the color of darker gray and the computed value is hsl(0, 0%, 21%).
primary: This color is used to set the color of turquoise and the computed value is hsl(171, 100%, 41%).
link: This color is used to set the color of blue and the computed value is hsl(217, 71%, 53%)
info: This color is used to set the color of cyan and the computed value is hsl(204, 86%, 53%).
success: This color is used to set the color of green and the computed value is hsl(141, 53%, 53%).
warning: This color is used to set the color of yellow and the computed value is hsl(48, 100%, 67%).
danger: This color is used to set the color of red and the computed value is hsl(348, 100%, 61%).

Bulma also provides a shades, but with some limitation that only contains shades of grey between black and white.

Bulma Shades Colors Class:

black-bis: This class used to set the color pure black and the value is hsl(0, 0%, 7%).
black-ter: This class used to set the color semi black and the value is hsl(0, 0%, 14%).
grey-darker: This class used to set the color darker gray and the value is hsl(0, 0%, 21%).
grey-dark: This class used to set the color dark gray and the value is hsl(0, 0%, 29%).
grey-light: This class used to set the color light gray and the value is hsl(0, 0%, 71%).
grey-lighter: This class used to set the color lighter gray and the value is hsl(0, 0%, 86%).
white-ter: This class used to set the color cream white and the value is hsl(0, 0%, 96%).
white-bis: This class used to set the color pure white and the value is hsl(0, 0%, 98%).

Syntax:

To set the text color:

<element class="has-text-black">
...
</element>

To set the background color:

<element class="has-background-warning">
...
</element>

Below examples illustrates the Bulma Colors:

Example 1: In this example we will use the colors class for text as well as for background.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <link rel='stylesheet'
        href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
</head>
 
<body class="has-text-centered">
    <h1 class="is-size-2 has-text-success" >
        GeeksforGeeks
    </h1>
    <b>Bulma Colors</b>
    <div class="has-text-left ml-4 mr-4">
         
        .has-text-white | .has-background-danger
       <p class="has-text-white box
                 has-background-danger">
         A Computer Science Portal for Geeks
       </p>
 
 
        .has-text-black | .has-background-warning
       <p class="has-text-black box
                 has-background-warning">
           A Computer Science Portal for Geeks
       </p>
 
 
       .has-text-light | .has-background-success
       <p class="has-text-light box
                 has-background-success">
           A Computer Science Portal for Geeks
       </p>
 
 
       .has-text-dark | .has-background-info
       <p class="has-text-dark box
                 has-background-info">
           A Computer Science Portal for Geeks
       </p>
 
 
       .has-text-primary | .has-background-link
       <p class="has-text-primary box
                 has-background-link">
           A Computer Science Portal for Geeks
       </p>
 
 
       .has-text-link | .has-background-primary
       <p class="has-text-link box
                 has-background-primary">
           A Computer Science Portal for Geeks
       </p>
 
 
       .has-text-info | .has-background-dark
       <p class="has-text-info box
                 has-background-dark">
           A Computer Science Portal for Geeks
       </p>
 
 
       .has-text-success | .has-background-light
       <p class="has-text-success box
                 has-background-light">
           A Computer Science Portal for Geeks
       </p>
 
 
       .has-text-warning | .has-background-black
       <p class="has-text-warning box
                 has-background-black">
          A Computer Science Portal for Geeks
       </p>
 
 
       .has-text-danger | .has-background-white
       <p class="has-text-danger box
                 has-background-white">
          A Computer Science Portal for Geeks
       </p>
 
 
    </div>
</body>
 
</html>

Output:

Bulma Colors

Example 2: In this example we will use different shades of black and white.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <link rel='stylesheet'
        href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
</head>
 
<body class="has-text-centered">
    <h1 class="is-size-2 has-text-success" >
        GeeksforGeeks
    </h1>
    <b>Bulma Colors</b>
    <div class="has-text-left ml-4 mr-4">
         
       .has-text-white-bis | .has-background-black-bis
       <p class="has-text-white-bis box
                 has-background-black-bis">
         A Computer Science Portal for Geeks
       </p>
 
 
       .has-text-white-ter | .has-background-black-ter
       <p class="has-text-white-ter box
                 has-background-black-ter">
           A Computer Science Portal for Geeks
       </p>
 
 
       .has-text-grey-lighter | .has-background-grey-darker
       <p class="has-text-grey-lighter box
                 has-background-grey-darker">
           A Computer Science Portal for Geeks
       </p>
 
 
       .has-text-dark | .has-background-info
       <p class="has-text-grey-light box
                 has-background-grey-dark">
           A Computer Science Portal for Geeks
       </p>
 
 
       .has-text-grey-dark | .has-background-grey-light
       <p class="has-text-grey-dark box
                 has-background-grey-light">
           A Computer Science Portal for Geeks
       </p>
 
 
       .has-text-grey-darker | .has-background-grey-lighter
       <p class="has-text-grey-darker box
                 has-background-grey-lighter">
           A Computer Science Portal for Geeks
       </p>
 
 
       .has-text-black-ter | .has-background-white-ter
       <p class="has-text-black-ter box
                 has-background-white-ter">
           A Computer Science Portal for Geeks
       </p>
 
 
       .has-text-black-bis | .has-background-white-bis
       <p class="has-text-black-bis box
                 has-background-white-bis">
           A Computer Science Portal for Geeks
       </p>
 
 
    </div>
</body>
 
</html>

Output:

Bulma Colors

Reference: https://bulma.io/documentation/overview/colors/

Suggest improvement

Bulma Responsiveness Vertical by default

Bulma Overview Complete Reference

Share your thoughts in the comments

Bulma Components

Bulma Columns

Bulma Elements

Bulma Layout

Bulma Form

Bulma Helpers

Bulma Components

Bulma Columns

Bulma Elements

Bulma Layout

Bulma Form

Bulma Helpers

Bulma Colors

HTML

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?