Show Sections Hide Sections
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>
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>
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