2017-07-29 16:58:13 +00:00
---
title: Colors
layout: documentation
doc-tab: overview
doc-subtab: colors
initial_colors:
- name: "$black"
value: hsl(0, 0%, 4%)
- name: "$black-bis"
value: hsl(0, 0%, 7%)
- name: "$black-ter"
value: hsl(0, 0%, 14%)
- name: "$grey-darker"
value: hsl(0, 0%, 21%)
- name: "$grey-dark"
value: hsl(0, 0%, 29%)
- name: "$grey"
value: hsl(0, 0%, 48%)
- name: "$grey-light"
value: hsl(0, 0%, 71%)
- name: "$grey-lighter"
value: hsl(0, 0%, 86%)
- name: "$white-ter"
value: hsl(0, 0%, 96%)
- name: "$white-bis"
value: hsl(0, 0%, 98%)
- name: "$white"
value: hsl(0, 0%, 100%)
- name: "$orange"
value: hsl(14, 100%, 53%)
- name: "$yellow"
value: hsl(48, 100%, 67%)
- name: "$green"
value: hsl(141, 71%, 48%)
- name: "$turquoise"
value: hsl(171, 100%, 41%)
- name: "$blue"
value: hsl(217, 71%, 53%)
- name: "$purple"
value: hsl(271, 100%, 71%)
- name: "$red"
value: hsl(348, 100%, 61%)
colors:
- id: "white"
variable: "$white"
value: "$white"
value_hex: white
invert: "$black"
invert_hex: black
- id: "black"
variable: "$black"
value: "$black"
value_hex: black
invert: "$white"
invert_hex: white
- id: "light"
variable: "$light"
value: "$white-ter"
value_hex: white-ter
invert: "$light-invert"
invert_hex: black
- id: "dark"
variable: "$dark"
value: "$grey-darker"
value_hex: grey-darker
invert: "$dark-invert"
invert_hex: white
- id: "primary"
variable: "$primary"
value: "$turquoise"
value_hex: turquoise
invert: "$primary-invert"
invert_hex: white
- id: "info"
variable: "$info"
value: "$blue"
value_hex: blue
invert: "$info-invert"
invert_hex: white
- id: "success"
variable: "$success"
value: "$green"
value_hex: green
invert: "$success-invert"
invert_hex: white
- id: "warning"
variable: "$warning"
value: "$yellow"
value_hex: yellow
invert: "$warning-invert"
invert_hex: black
- id: "danger"
variable: "$danger"
value: "$red"
value_hex: red
invert: "$danger-invert"
invert_hex: white
shades:
- id: "black-bis"
value: "$black-bis"
- id: "black-ter"
value: "$black-ter"
- id: "grey-darker"
value: "$grey-darker"
- id: "grey-dark"
value: "$grey-dark"
- id: "grey"
value: "$grey"
- id: "grey-light"
value: "$grey-light"
- id: "grey-lighter"
value: "$grey-lighter"
- id: "white-ter"
value: "$white-ter"
- id: "white-bis"
value: "$white-bis"
---
{% include subnav-overview.html %}
< section class = "section" >
< div class = "container" >
< h1 class = "title" > Colors< / h1 >
2017-08-10 11:24:51 +00:00
< h2 class = "subtitle" > The < strong > colors< / strong > that < strong > style< / strong > most Bulma elements and components< / h2 >
2017-07-29 16:58:13 +00:00
< hr >
< div class = "content" >
< p >
Most elements and components have color variations thanks to < strong > modifiers< / strong > with syntax < code > .is-$color< / code > , like < code > is-primary< / code > or < code > is-dark< / code > .
< / p >
< p >
This is thanks to the < code > $colors< / code > < strong > Sass map< / strong > , through which Bulma cycles to grab all the colors and their inverts.
< / p >
< / div >
< table class = "table" >
< thead >
< tr >
< th > Color< / th >
< th > Variable< / th >
< th > Value< / th >
< th > Actual value< / th >
< th > Invert variable< / th >
< th > Actual invert value< / th >
< / tr >
< / thead >
< tbody >
{% for color in page.colors %}
{% assign includePath = color.value_hex | prepend: "color/" | append: ".html" %}
< tr >
< td >
< strong > {{ color.id | capitalize }}< / strong >
< / td >
< td >
< code > {{ color.variable }}< / code >
< / td >
< td >
< code > {{ color.value }}< / code >
< / td >
< td >
{% include {{ includePath }} %}
< / td >
< td >
< code > {{ color.invert }}< / code >
< / td >
< td >
{% if color.invert_hex == "black" %}
2017-08-14 11:44:24 +00:00
< span class = "bd-color" style = "background: rgba(0, 0, 0, 0.7);" > < / span >
2017-07-29 16:58:13 +00:00
< code > rgba(0, 0, 0, 0.7)< / code >
{% else %}
2017-08-14 11:44:24 +00:00
< span class = "bd-color" style = "background: #fff;" > < / span >
2017-07-29 16:58:13 +00:00
< code > #fff< / code >
{% endif %}
< / td >
< / tr >
{% endfor %}
< / tbody >
< / table >
< / div >
2017-08-14 11:44:24 +00:00
< / section >