Bulma provides a comprehensive color system with semantic colors, base shades, and a flexible color palette that can be customized to match your brand.
Semantic Colors
These colors convey meaning and are used throughout Bulma’s components:
| Color | Variable | HSL Value | Hex Equivalent | Usage |
|---|
| Primary | $primary | hsl(171, 100%, 41%) | #00d1b2 | Main brand color |
| Link | $link | hsl(233, 100%, 63%) | #4e5cff | Links and interactive elements |
| Info | $info | hsl(198, 100%, 70%) | #66d9ff | Informational messages |
| Success | $success | hsl(153, 53%, 53%) | #48c78e | Success states |
| Warning | $warning | hsl(42, 100%, 53%) | #ffe03d | Warning messages |
| Danger | $danger | hsl(348, 100%, 70%) | #ff5566 | Errors and destructive actions |
Usage Example
<button class="button is-primary">Primary Button</button>
<button class="button is-link">Link Button</button>
<button class="button is-info">Info Button</button>
<button class="button is-success">Success Button</button>
<button class="button is-warning">Warning Button</button>
<button class="button is-danger">Danger Button</button>
Base Colors
Bulma includes a set of base colors for general use:
| Color | Variable | HSL Value | Usage |
|---|
| Orange | $orange | hsl(14, 100%, 53%) | Accent color |
| Yellow | $yellow | hsl(42, 100%, 53%) | Highlight color |
| Green | $green | hsl(153, 53%, 53%) | Positive feedback |
| Turquoise | $turquoise | hsl(171, 100%, 41%) | Primary color |
| Cyan | $cyan | hsl(198, 100%, 70%) | Info color |
| Blue | $blue | hsl(233, 100%, 63%) | Link color |
| Purple | $purple | hsl(271, 100%, 71%) | Decorative color |
| Red | $red | hsl(348, 100%, 70%) | Error color |
Grayscale Colors
Bulma’s grayscale palette is built on a consistent HSL foundation:
Dark Shades
| Color | Variable | HSL Value | Lightness |
|---|
| Black | $black | hsl(221, 14%, 4%) | 4% |
| Black Bis | $black-bis | hsl(221, 14%, 9%) | 9% |
| Black Ter | $black-ter | hsl(221, 14%, 14%) | 14% |
Grey Shades
| Color | Variable | HSL Value | Lightness |
|---|
| Grey Darker | $grey-darker | hsl(221, 14%, 21%) | 21% |
| Grey Dark | $grey-dark | hsl(221, 14%, 29%) | 29% |
| Grey | $grey | hsl(221, 14%, 48%) | 48% |
| Grey Light | $grey-light | hsl(221, 14%, 71%) | 71% |
| Grey Lighter | $grey-lighter | hsl(221, 14%, 86%) | 86% |
| Grey Lightest | $grey-lightest | hsl(221, 14%, 93%) | 93% |
Light Shades
| Color | Variable | HSL Value | Lightness |
|---|
| White Ter | $white-ter | hsl(221, 14%, 96%) | 96% |
| White Bis | $white-bis | hsl(221, 14%, 98%) | 98% |
| White | $white | hsl(221, 14%, 100%) | 100% |
All grayscale colors share the same hue (221°) and saturation (14%), varying only in lightness. This creates a harmonious, cohesive color scheme.
Color Scheme Foundation
Bulma’s color system is built on HSL (Hue, Saturation, Lightness) values:
$scheme-h: 221; // Hue
$scheme-s: 14%; // Saturation
$dark-l: 20%; // Dark lightness threshold
$light-l: 90%; // Light lightness threshold
- Consistent color relationships
- Easy theme customization
- Automatic color derivations
- Support for light/dark modes
Using Colors
Background Colors
<div class="has-background-primary">
Primary background
</div>
<div class="has-background-info">
Info background
</div>
<div class="has-background-success">
Success background
</div>
Text Colors
<p class="has-text-primary">Primary text</p>
<p class="has-text-danger">Danger text</p>
<p class="has-text-grey">Grey text</p>
<p class="has-text-grey-light">Light grey text</p>
Component Colors
Most Bulma components accept color modifiers:
<div class="notification is-warning">
Warning notification
</div>
<article class="message is-info">
<div class="message-header">
<p>Info Message</p>
</div>
<div class="message-body">
Message content here.
</div>
</article>
<progress class="progress is-success" value="60" max="100">60%</progress>
Customizing Colors
You can customize Bulma’s colors using Sass:
@use "bulma/bulma" with (
$primary: hsl(171, 100%, 41%),
$link: hsl(229, 53%, 53%),
$info: hsl(207, 61%, 53%),
$success: hsl(153, 53%, 53%),
$warning: hsl(44, 100%, 77%),
$danger: hsl(348, 86%, 61%)
);
Adding Custom Colors
You can extend the color palette with custom colors:
@use "bulma/bulma" with (
$custom-colors: (
"twitter": (hsl(204, 88%, 53%), hsl(0, 0%, 100%)),
"facebook": (hsl(221, 44%, 41%), hsl(0, 0%, 100%)),
"github": (hsl(0, 0%, 13%), hsl(0, 0%, 100%))
)
);
<button class="button is-twitter">Twitter Button</button>
<button class="button is-facebook">Facebook Button</button>
Light and Dark Variants
Bulma automatically generates light and dark variants for semantic colors:
<div class="has-background-primary-light">
Light primary background
</div>
<div class="has-background-primary-dark">
Dark primary background
</div>
<p class="has-text-danger-light">Light danger text</p>
<p class="has-text-danger-dark">Dark danger text</p>
Use light variants for subtle backgrounds and dark variants for emphasis or dark mode themes.
