Open In App

Bulma Colors

Last Updated : 17 May, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

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=
</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

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=
</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

Bulma Colors



Previous Article
Next Article

Similar Reads

React.js Blueprint Colors Core colors
Blueprint is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex and data-dense for desktop applications. In this article, we'll discuss React.js Blueprint Colors Core colors. Colors are a very important component used in styling a web application. The React.js Blueprint provides
5 min read
How to Change the Label Colors or the Legend Colors in a Chart ?
In this article, we will discuss how can we change the label colors and legends colors in our chart using Chart.js. We can simply change some properties in the options configuration so that it shows the desired output. CDN link:&lt;script src="https://cdn.jsdelivr.net/npm/chart.js"&gt;&lt;/script&gt;Syntax:options: { plugins: { // changin the lagen
2 min read
Bulma Notification Colors
Bulma is a free, open-source CSS framework based on Flexbox. It is component-rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design. The notification is a simple colored block that draws the attention of the user to something. It can be used as a pinned notification in the corner of the vie
4 min read
Bulma Notification Light colors
Bulma is a free, open-source CSS framework based on Flexbox. It is component-rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design. The notification is a simple colored block that draws the attention of the user to something. It can be used as a pinned notification in the corner of the vie
4 min read
Bulma Message Colors
Bulma is a free, open-source CSS framework based on Flexbox. It is component-rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design. The Bulma Message component is used to provide the colored message blocks to emphasize part of the page. It is a multipart component. It contains mainly three
4 min read
Bulma Hero Colors
Bulma Hero is an essential component with the help of which we can create a full-width banner on our webpage. Optionally, this banner can cover the entire height of the page as well. Bulma Hero Colors are different types of colors that are available for the Hero modifier. These various colors are known as color modifiers. These color modifiers are
3 min read
Bulma Select Colors
Bulma is a free, open-source CSS framework based on flexbox. It is component-rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design. The Bulma select color is used to set the color on the select element. The color is applied on the border and dropdown icon of the select menu. Bulma select c
2 min read
Bulma Button Colors
In Bulma, buttons are available in many colors. We can set the colors of the button as per our requirement. There are many classes for colors in Bulma all the classes are mentioned and described below. Button Colors classes: is-white: This class is used for the white color of the button.is-black: This class is used for the black color of the button
2 min read
Bulma Textarea Colors
Bulma is a free, open-source CSS framework based on Flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design. The Bulma textarea form element is the multi-line version of the input element. We will use &lt;textarea&gt; element with textarea class to create textarea el
2 min read
Bulma Icon Colors
Bulma is a free and open-source CSS framework that can be used as an alternative to Bootstrap. It comes with pre-built components like buttons and icons. In this article, we will be seeing how to change Icon colors in Bulma. Since the icons we use are simply text, we can use text color helpers to change the color of the icons. We will use the font
2 min read
Article Tags :