Bulma テキストと背景の色を指定するカラーヘルパー一覧 Color helpers [CSSフレームワーク]

Bulma

Bulma ロゴ トップ バナー

Bulmaには、テキストの前景色（fore color）や背景色（back ground color）を指定するためのクラスが用意されています。

今回は、Bulmaに用意されているカラーヘルパークラスについて紹介します。

テキスト色

テキストの文字色に指定できるクラスには、以下のものがあります。

テーマカラー

任意の要素を10色のテーマカラーのいずれかに設定できます。

クラス 色(HSL) 色（RGB） カラーコード サンプル
has-text-white hsl(0, 0%, 100%) rgb(255, 255, 255) #ffffff Bulma
has-text-black hsl(0, 0%, 4%) rgb(10, 10, 10) #0a0a0a Bulma
has-text-light hsl(0, 0%, 96%) rgb(245, 245, 245) #f5f5f5 Bulma
has-text-dark hsl(0, 0%, 21%) rgb(54, 54, 54) #363636 Bulma
has-text-primary hsl(171, 100%, 41%) rgb(0, 209, 178) #00d1b2 Bulma
has-text-link hsl(217, 71%, 53%) rgb(50, 115, 220) #3273dc Bulma
has-text-info hsl(204, 86%, 53%) rgb(32, 156, 238) #209cee Bulma
has-text-success hsl(141, 71%, 48%) rgb(35, 209, 96) #23d160 Bulma
has-text-warning hsl(48, 100%, 67%) rgb(255, 221, 87) #ffdd57 Bulma
has-text-danger hsl(348, 100%, 61%) rgb(255, 56, 96) #ff3860 Bulma

ライト（明るい形式）/ダーク（暗い形式）

テーマカラーには、明るい形式と暗い形式の色が用意されています。

クラス 色(HSL) 色（RGB） カラーコード サンプル
has-text-primary-light hsl(171, 100%, 96%) rgb(235, 255, 252) #ebfffc Bulma
has-text-link-light hsl(219, 70%, 96%) rgb(238, 243, 252) #eef3fc Bulma
has-text-info-light hsl(206, 70%, 96%) rgb(238, 246, 252) #eef6fc Bulma
has-text-success-light hsl(142, 52%, 96%) rgb(239, 250, 243) #effaf3 Bulma
has-text-warning-light hsl(48, 100%, 96%) rgb(255, 251, 235) #fffbeb Bulma
has-text-danger-light hsl(347, 90%, 96%) rgb(254, 236, 240) #feecf0 Bulma
has-text-primary-dark hsl(171, 100%, 29%) rgb(0, 148, 126) #00947e Bulma
has-text-link-dark hsl(217, 71%, 45%) rgb(33, 96, 196) #2160c4 Bulma
has-text-info-dark hsl(204, 71%, 39%) rgb(29, 114, 170) #1d72aa Bulma
has-text-success-dark hsl(141, 53%, 31%) rgb(37, 121, 66) #257942 Bulma
has-text-warning-dark hsl(48, 100%, 29%) rgb(148, 118, 0) #947600 Bulma
has-text-danger-dark hsl(348, 86%, 43%) rgb(204, 15, 53) #cc0f35 Bulma

グレースケール

任意の要素を9色のグレーのいずれかに設定できます。

クラス 色(HSL) 色（RGB） カラーコード サンプル
has-text-black-bis hsl(0, 0%, 7%) rgb(18, 18, 18) #121212 Bulma
has-text-black-ter hsl(0, 0%, 14%) rgb(36, 36, 36) #242424 Bulma
has-text-grey-darker hsl(0, 0%, 21%) rgb(54, 54, 54) #363636 Bulma
has-text-grey-dark hsl(0, 0%, 29%) rgb(74, 74, 74) #4a4a4a Bulma
has-text-grey hsl(0, 0%, 48%) rgb(122, 122, 122) #7a7a7a Bulma
has-text-grey-light hsl(0, 0%, 71%) rgb(181, 181, 181) #b5b5b5 Bulma
has-text-grey-lighter hsl(0, 0%, 86%) rgb(219, 219, 219) #dbdbdb Bulma
has-text-white-ter hsl(0, 0%, 96%) rgb(245, 245, 245) #f5f5f5 Bulma
has-text-white-bis hsl(0, 0%, 98%) rgb(250, 250, 250) #fafafa Bulma

背景色

要素の背景色に指定できるクラスには、以下のものがあります。

テーマカラー

任意の要素を10色のテーマカラーのいずれかに設定できます。

クラス 色(HSL) 色（RGB） カラーコード サンプル
has-background-white hsl(0, 0%, 100%) rgb(255, 255, 255) #ffffff Bulma
has-background-black hsl(0, 0%, 4%) rgb(10, 10, 10) #0a0a0a Bulma
has-background-light hsl(0, 0%, 96%) rgb(245, 245, 245) #f5f5f5 Bulma
has-background-dark hsl(0, 0%, 21%) rgb(54, 54, 54) #363636 Bulma
has-background-primary hsl(171, 100%, 41%) rgb(0, 209, 178) #00d1b2 Bulma
has-background-link hsl(217, 71%, 53%) rgb(50, 115, 220) #3273dc Bulma
has-background-info hsl(204, 86%, 53%) rgb(32, 156, 238) #209cee Bulma
has-background-success hsl(141, 71%, 48%) rgb(35, 209, 96) #23d160 Bulma
has-background-warning hsl(48, 100%, 67%) rgb(255, 221, 87) #ffdd57 Bulma
has-background-danger hsl(348, 100%, 61%) rgb(255, 56, 96) #ff3860 Bulma

ライト（明るい形式）/ダーク（暗い形式）

テーマカラーには、明るい形式と暗い形式の色が用意されています。

クラス 色(HSL) 色（RGB） カラーコード サンプル
has-background-primary-light hsl(171, 100%, 96%) rgb(235, 255, 252) #ebfffc Bulma
has-background-link-light hsl(219, 70%, 96%) rgb(238, 243, 252) #eef3fc Bulma
has-background-info-light hsl(206, 70%, 96%) rgb(238, 246, 252) #eef6fc Bulma
has-background-success-light hsl(142, 52%, 96%) rgb(239, 250, 243) #effaf3 Bulma
has-background-warning-light hsl(48, 100%, 96%) rgb(255, 251, 235) #fffbeb Bulma
has-background-danger-light hsl(347, 90%, 96%) rgb(254, 236, 240) #feecf0 Bulma
has-background-primary-dark hsl(171, 100%, 29%) rgb(0, 148, 126) #00947e Bulma
has-background-link-dark hsl(217, 71%, 45%) rgb(33, 96, 196) #2160c4 Bulma
has-background-info-dark hsl(204, 71%, 39%) rgb(29, 114, 170) #1d72aa Bulma
has-background-success-dark hsl(141, 53%, 31%) rgb(37, 121, 66) #257942 Bulma
has-background-warning-dark hsl(48, 100%, 29%) rgb(148, 118, 0) #947600 Bulma
has-background-danger-dark hsl(348, 86%, 43%) rgb(204, 15, 53) #cc0f35 Bulma

グレースケール

任意の要素を9色のグレーのいずれかに設定できます。

クラス 色(HSL) 色（RGB） カラーコード サンプル
has-background-black-bis hsl(0, 0%, 7%) rgb(18, 18, 18) #121212 Bulma
has-background-black-ter hsl(0, 0%, 14%) rgb(36, 36, 36) #242424 Bulma
has-background-grey-darker hsl(0, 0%, 21%) rgb(54, 54, 54) #363636 Bulma
has-background-grey-dark hsl(0, 0%, 29%) rgb(74, 74, 74) #4a4a4a Bulma
has-background-grey hsl(0, 0%, 48%) rgb(122, 122, 122) #7a7a7a Bulma
has-background-grey-light hsl(0, 0%, 71%) rgb(181, 181, 181) #b5b5b5 Bulma
has-background-grey-lighter hsl(0, 0%, 86%) rgb(219, 219, 219) #dbdbdb Bulma
has-background-white-ter hsl(0, 0%, 96%) rgb(245, 245, 245) #f5f5f5 Bulma
has-background-white-bis hsl(0, 0%, 98%) rgb(250, 250, 250) #fafafa Bulma

Bulma 入門 Tips 一覧