Colors


Using the Colors

Background Colors

To give something a background color use the bg-{color_name} class where the "{color-name}" is one of the colors below.

<p class='bg-brown'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores, provident.</p>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores, provident.

Text Colors

To give something a text color use the text-{color_name} class where the "{color-name}" is one of the colors below.

<p class='text-brown'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores, provident.</p>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores, provident.


Colors by Name

 
brown
  • Hex: #b15e28
  • RGBA: rgba(177, 94, 40, 1)
  • Less: @color-brown
 
blue
  • Hex: #1392b0
  • RGBA: rgba(19, 146, 176, 1)
  • Less: @color-blue
 
green
  • Hex: #93964b
  • RGBA: rgba(147, 150, 75, 1)
  • Less: @color-green

Colors by Usage

 
primary
  • Hex: #b15e28
  • RGBA: rgba(177, 94, 40, 1)
  • Less: @primary__color
 
secondary
  • Hex: #1392b0
  • RGBA: rgba(19, 146, 176, 1)
  • Less: @secondary__color
 
success
  • Hex: #93964b
  • RGBA: rgba(147, 150, 75, 1)
  • Less: @success__color
 
warning
  • Hex: #ff5501
  • RGBA: rgba(255, 85, 1, 1)
  • Less: @warning__color
 
error
  • Hex: #d12c01
  • RGBA: rgba(208, 44, 1, 1)
  • Less: @error__color

Neutrals

 
black
  • Hex: #000000
  • RGBA: rgba(0, 0, 0, 1)
  • Less: @color-black
 
white
  • Hex: #ffffff
  • RGBA: rgba(255, 255, 255, 1)
  • Less: @color-white
 
dark
  • Hex: #444444
  • RGBA: rgba(51, 51, 51, 0.93)
  • Less: @color-dark
 
light
  • Hex: #ededed
  • RGBA: rgba(255, 255, 255, 0.93)
  • Less: @color-light
 
neutral1
  • Hex: #f2f2f2
  • RGBA: rgba(0, 0, 0, 0.05)
  • Less: @color-neutral1
 
neutral2
  • Hex: #e5e5e5
  • RGBA: rgba(0, 0, 0, 0.1)
  • Less: @color-neutral2
 
neutral3
  • Hex: #cccccc
  • RGBA: rgba(0, 0, 0, 0.2)
  • Less: @color-neutral3
 
neutral4
  • Hex: #b2b2b2
  • RGBA: rgba(0, 0, 0, 0.3)
  • Less: @color-neutral4
 
neutral5
  • Hex: #999999
  • RGBA: rgba(0, 0, 0, 0.4)
  • Less: @color-neutral5
 
neutral6
  • Hex: #7f7f7f
  • RGBA: rgba(0, 0, 0, 0.5)
  • Less: @color-neutral6
 
neutral7
  • Hex: #666666
  • RGBA: rgba(0, 0, 0, 0.6)
  • Less: @color-neutral7
 
neutral8
  • Hex: #4c4c4c
  • RGBA: rgba(0, 0, 0, 0.7)
  • Less: @color-neutral8
 
neutral9
  • Hex: #333333
  • RGBA: rgba(0, 0, 0, 0.8)
  • Less: @color-neutral9
 
neutral10
  • Hex: #191919
  • RGBA: rgba(0, 0, 0, 0.9)
  • Less: @color-neutral10