Bulma Colors

Bulma comes with a comprehensive color system that includes predefined colors for text, backgrounds, and components. The color system is built with Sass variables and can be easily customized to match your brand.

Predefined Colors

Bulma provides a set of predefined colors that you can use throughout your application.

Main Colors

Using Color Classes

<!-- Text colors -->
<p class="has-text-primary">Primary text</p>
<p class="has-text-link">Link text</p>
<p class="has-text-info">Info text</p>
<p class="has-text-success">Success text</p>
<p class="has-text-warning">Warning text</p>
<p class="has-text-danger">Danger text</p>

<!-- Background colors -->
<div class="has-background-primary">Primary background</div>
<div class="has-background-link">Link background</div>
<div class="has-background-info">Info background</div>
<div class="has-background-success">Success background</div>
<div class="has-background-warning">Warning background</div>
<div class="has-background-danger">Danger background</div>

<!-- Component colors -->
<button class="button is-primary">Primary button</button>
<button class="button is-success">Success button</button>
<button class="button is-danger">Danger button</button>

<progress class="progress is-primary" value="30" max="100">30%</progress>
<progress class="progress is-success" value="60" max="100">60%</progress>

<div class="notification is-info">Info notification</div>
<div class="notification is-warning">Warning notification</div>

Color Shades and Tints

Bulma provides a complete palette of shades and tints for each main color.

Gray Shades

Using Shades and Tints

<!-- Text shades -->
<p class="has-text-grey-darker">Grey darker text</p>
<p class="has-text-grey-dark">Grey dark text</p>
<p class="has-text-grey">Grey text</p>
<p class="has-text-grey-light">Grey light text</p>
<p class="has-text-grey-lighter">Grey lighter text</p>

<!-- Background shades -->
<div class="has-background-grey-darker">Grey darker background</div>
<div class="has-background-grey-dark">Grey dark background</div>
<div class="has-background-grey">Grey background</div>
<div class="has-background-grey-light">Grey light background</div>
<div class="has-background-grey-lighter">Grey lighter background</div>

<!-- White shades -->
<div class="has-background-white-ter">White ter background</div>
<div class="has-background-white-bis">White bis background</div>
<div class="has-background-white">White background</div>

Customizing Colors

You can easily customize Bulma's color scheme by overriding Sass variables.

Basic Color Customization

// Import Bulma utilities first
@import "bulma/sass/utilities/initial-variables";
@import "bulma/sass/utilities/functions";

// Customize main colors
$primary: #ff3860;
$primary-invert: findColorInvert($primary);

$link: #3273dc;
$link-invert: findColorInvert($link);

$info: #209cee;
$info-invert: findColorInvert($info);

$success: #23d160;
$success-invert: findColorInvert($success);

$warning: #ffdd57;
$warning-invert: findColorInvert($warning);

$danger: #ff3860;
$danger-invert: findColorInvert($danger);

$dark: #363636;
$dark-invert: findColorInvert($dark);

$light: #f5f5f5;
$light-invert: findColorInvert($light);

// Import the rest of Bulma
@import "bulma";

Adding Custom Colors

// Import Bulma utilities
@import "bulma/sass/utilities/initial-variables";
@import "bulma/sass/utilities/functions";

// Define custom colors
$twitter: #1da1f2;
$twitter-invert: findColorInvert($twitter);

$github: #333;
$github-invert: findColorInvert($github);

$linkedin: #0077b5;
$linkedin-invert: findColorInvert($linkedin);

// Add to colors map
$custom-colors: (
  "twitter": ($twitter, $twitter-invert),
  "github": ($github, $github-invert),
  "linkedin": ($linkedin, $linkedin-invert)
);

// Import derived variables and merge
@import "bulma/sass/utilities/derived-variables";
$colors: mergeColorMaps($colors, $custom-colors);

// Import the rest of Bulma
@import "bulma";

Using Custom Colors

<!-- Custom color classes -->
<button class="button is-twitter">Twitter</button>
<button class="button is-github">GitHub</button>
<button class="button is-linkedin">LinkedIn</button>

<div class="has-text-twitter">Twitter text</div>
<div class="has-background-github">GitHub background</div>

<progress class="progress is-linkedin" value="50" max="100">50%</progress>
<div class="notification is-twitter">Twitter notification</div>

Color Functions

Bulma provides Sass functions for working with colors.

Available Functions

// Color manipulation functions
$primary: #ff3860;

// Lighten and darken
$primary-light: lighten($primary, 10%);
$primary-dark: darken($primary, 10%);

// Transparency
$primary-transparent: transparentize($primary, 0.5);
$primary-rgba: rgba($primary, 0.8);

// Color inversion (for text on colored backgrounds)
$primary-invert: findColorInvert($primary);

// Color blending
$mixed-color: mix($primary, $success, 50%);

// Color brightness
$primary-brightness: lightness($primary);

Color in Components

Buttons

<button class="button is-primary">Primary</button>
<button class="button is-link">Link</button>
<button class="button is-info">Info</button>
<button class="button is-success">Success</button>
<button class="button is-warning">Warning</button>
<button class="button is-danger">Danger</button>
<button class="button is-light">Light</button>
<button class="button is-dark">Dark</button>

<!-- Outlined buttons -->
<button class="button is-outlined">Outlined</button>
<button class="button is-primary is-outlined">Primary Outlined</button>
<button class="button is-success is-outlined">Success Outlined</button>

<!-- Inverted buttons -->
<button class="button is-primary is-inverted">Inverted Primary</button>
<button class="button is-success is-inverted">Inverted Success</button>

Notifications

<div class="notification is-primary">Primary notification</div>
<div class="notification is-link">Link notification</div>
<div class="notification is-info">Info notification</div>
<div class="notification is-success">Success notification</div>
<div class="notification is-warning">Warning notification</div>
<div class="notification is-danger">Danger notification</div>

Tags

<span class="tag is-primary">Primary</span>
<span class="tag is-link">Link</span>
<span class="tag is-info">Info</span>
<span class="tag is-success">Success</span>
<span class="tag is-warning">Warning</span>
<span class="tag is-danger">Danger</span>
<span class="tag is-light">Light</span>
<span class="tag is-dark">Dark</span>

Messages

<article class="message is-primary">
  <div class="message-header">Primary Message</div>
  <div class="message-body">Content</div>
</article>

<article class="message is-success">
  <div class="message-header">Success Message</div>
  <div class="message-body">Content</div>
</article>

<article class="message is-danger">
  <div class="message-header">Danger Message</div>
  <div class="message-body">Content</div>
</article>

Color Accessibility

Bulma automatically handles color accessibility by providing inverted colors for text on colored backgrounds.

Automatic Color Inversion

// Bulma automatically calculates inverted colors
$primary: #ff3860;
$primary-invert: findColorInvert($primary); // Returns white

$dark: #363636;
$dark-invert: findColorInvert($dark); // Returns white

$light: #f5f5f5;
$light-invert: findColorInvert($light); // Returns black

Manual Color Contrast

<!-- Good contrast (automatic) -->
<div class="has-background-primary has-text-white">Good contrast</div>

<!-- Manual contrast adjustment -->
<div class="has-background-warning">
  <p class="has-text-dark">Dark text on warning background</p>
</div>

<div class="has-background-light">
  <p class="has-text-dark">Dark text on light background</p>
</div>

Best Practices

1. Consistent Color Usage

Use colors consistently throughout your application:

• Primary: Main brand color, primary actions
• Success: Positive actions, success states
• Warning: Caution, warnings
• Danger: Errors, destructive actions
• Info: Informational messages

2. Accessibility Considerations

• Ensure sufficient color contrast (4.5:1 for normal text)
• Don't rely solely on color to convey information
• Test your color scheme with color blindness simulators
• Provide alternative indicators for color-coded information

3. Performance

• Use CSS custom properties for dynamic theming
• Limit the number of custom colors to maintain consistency
• Use semantic color names rather than specific hues

Advanced Color Techniques

CSS Custom Properties (Variables)

/* Define CSS custom properties */
:root {
  --primary: #ff3860;
  --primary-dark: #e62e52;
  --primary-light: #ff6b8a;
}

/* Use in your CSS */
.button.is-custom-primary {
  background-color: var(--primary);
  border-color: var(--primary);
}

.button.is-custom-primary:hover {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
}

/* Dynamic theming with JavaScript */
document.documentElement.style.setProperty('--primary', '#3273dc');

Gradient Backgrounds

<div class="has-background-primary 
            has-background-gradient 
            has-background-gradient-primary-to-success">
  Gradient background
</div>

<!-- Custom CSS for gradients -->
.gradient-bg {
  background: linear-gradient(135deg, var(--primary) 0%, var(--success) 100%);
}

Up next: Bulma Typography System