Colors

To avoid specifying color values by hand, we’ve included a robust set of color variables. For maintainability, please use these instead of hardcoding color values.

Primary colors

Orange

@orange-400

Black

@black-900

Blue

@blue-600

Accent colors

Powder

@powder-100

Green

@green-400

Yellow

@yellow-100

Red

@red-500

Color stops

Orange

CSS	Less	Text class	Background class	Border class
var(--orange-900)	@orange-900	.fc-orange-900	.bg-orange-900	.bc-orange-900
var(--orange-800)	@orange-800	.fc-orange-800	.bg-orange-800	.bc-orange-800
var(--orange-700)	@orange-700	.fc-orange-700	.bg-orange-700	.bc-orange-700
var(--orange-600)	@orange-600	.fc-orange-600	.bg-orange-600	.bc-orange-600
var(--orange-500)	@orange-500	.fc-orange-500	.bg-orange-500	.bc-orange-500
var(--orange-400)	@orange-400	.fc-orange-400	.bg-orange-400	.bc-orange-400
var(--orange-300)	@orange-300	.fc-orange-300	.bg-orange-300	.bc-orange-300
var(--orange-200)	@orange-200	.fc-orange-200	.bg-orange-200	.bc-orange-200
var(--orange-100)	@orange-100	.fc-orange-100	.bg-orange-100	.bc-orange-100
var(--orange-050)	@orange-050	.fc-orange-050	.bg-orange-050	.bc-orange-050
var(--white)	@white	.fc-white	.bg-white	.bc-white
N/A	N/A	N/A	.bg-transparent	.bc-transparent

Black

CSS	Less	Text class	Background class	Border class
var(--black-900)	@black-900	.fc-black-900	.bg-black-900	.bc-black-900
var(--black-800)	@black-800	.fc-black-800	.bg-black-800	.bc-black-800
var(--black-750)	@black-750	.fc-black-750	.bg-black-750	.bc-black-750
var(--black-700)	@black-700	.fc-black-700	.bg-black-700	.bc-black-700
var(--black-600)	@black-600	.fc-black-600	.bg-black-600	.bc-black-600
var(--black-500)	@black-500	.fc-black-500	.bg-black-500	.bc-black-500
var(--black-400)	@black-400	.fc-black-400	.bg-black-400	.bc-black-400
var(--black-350)	@black-350	.fc-black-350	.bg-black-350	.bc-black-350
var(--black-300)	@black-300	.fc-black-300	.bg-black-300	.bc-black-300
var(--black-200)	@black-200	.fc-black-200	.bg-black-200	.bc-black-200
var(--black-150)	@black-150	.fc-black-150	.bg-black-150	.bc-black-150
var(--black-100)	@black-100	.fc-black-100	.bg-black-100	.bc-black-100
var(--black-075)	@black-075	.fc-black-075	.bg-black-075	.bc-black-075
var(--black-050)	@black-050	.fc-black-050	.bg-black-050	.bc-black-050
var(--black-025)	@black-025	.fc-black-025	.bg-black-025	.bc-black-025
var(--white)	@white	.fc-white	.bg-white	.bc-white
N/A	N/A	N/A	.bg-transparent	.bc-transparent

Blue

CSS	Less	Text class	Background class	Border class
var(--blue-900)	@blue-900	.fc-blue-900	.bg-blue-900	.bc-blue-900
var(--blue-800)	@blue-800	.fc-blue-800	.bg-blue-800	.bc-blue-800
var(--blue-700)	@blue-700	.fc-blue-700	.bg-blue-700	.bc-blue-700
var(--blue-600)	@blue-600	.fc-blue-600	.bg-blue-600	.bc-blue-600
var(--blue-500)	@blue-500	.fc-blue-500	.bg-blue-500	.bc-blue-500
var(--blue-400)	@blue-400	.fc-blue-400	.bg-blue-400	.bc-blue-400
var(--blue-300)	@blue-300	.fc-blue-300	.bg-blue-300	.bc-blue-300
var(--blue-200)	@blue-200	.fc-blue-200	.bg-blue-200	.bc-blue-200
var(--blue-100)	@blue-100	.fc-blue-100	.bg-blue-100	.bc-blue-100
var(--blue-050)	@blue-050	.fc-blue-050	.bg-blue-050	.bc-blue-050
var(--white)	@white	.fc-white	.bg-white	.bc-white
N/A	N/A	N/A	.bg-transparent	.bc-transparent

Powder

CSS	Less	Text class	Background class	Border class
var(--powder-900)	@powder-900	.fc-powder-900	.bg-powder-900	.bc-powder-900
var(--powder-800)	@powder-800	.fc-powder-800	.bg-powder-800	.bc-powder-800
var(--powder-700)	@powder-700	.fc-powder-700	.bg-powder-700	.bc-powder-700
var(--powder-600)	@powder-600	.fc-powder-600	.bg-powder-600	.bc-powder-600
var(--powder-500)	@powder-500	.fc-powder-500	.bg-powder-500	.bc-powder-500
var(--powder-400)	@powder-400	.fc-powder-400	.bg-powder-400	.bc-powder-400
var(--powder-300)	@powder-300	.fc-powder-300	.bg-powder-300	.bc-powder-300
var(--powder-200)	@powder-200	.fc-powder-200	.bg-powder-200	.bc-powder-200
var(--powder-100)	@powder-100	.fc-powder-100	.bg-powder-100	.bc-powder-100
var(--powder-050)	@powder-050	.fc-powder-050	.bg-powder-050	.bc-powder-050
var(--white)	@white	.fc-white	.bg-white	.bc-white
N/A	N/A	N/A	.bg-transparent	.bc-transparent

Yellow

CSS	Less	Text class	Background class	Border class
var(--yellow-900)	@yellow-900	.fc-yellow-900	.bg-yellow-900	.bc-yellow-900
var(--yellow-800)	@yellow-800	.fc-yellow-800	.bg-yellow-800	.bc-yellow-800
var(--yellow-700)	@yellow-700	.fc-yellow-700	.bg-yellow-700	.bc-yellow-700
var(--yellow-600)	@yellow-600	.fc-yellow-600	.bg-yellow-600	.bc-yellow-600
var(--yellow-500)	@yellow-500	.fc-yellow-500	.bg-yellow-500	.bc-yellow-500
var(--yellow-400)	@yellow-400	.fc-yellow-400	.bg-yellow-400	.bc-yellow-400
var(--yellow-300)	@yellow-300	.fc-yellow-300	.bg-yellow-300	.bc-yellow-300
var(--yellow-200)	@yellow-200	.fc-yellow-200	.bg-yellow-200	.bc-yellow-200
var(--yellow-100)	@yellow-100	.fc-yellow-100	.bg-yellow-100	.bc-yellow-100
var(--yellow-050)	@yellow-050	.fc-yellow-050	.bg-yellow-050	.bc-yellow-050
var(--white)	@white	.fc-white	.bg-white	.bc-white
N/A	N/A	N/A	.bg-transparent	.bc-transparent

Green

CSS	Less	Text class	Background class	Border class
var(--green-900)	@green-900	.fc-green-900	.bg-green-900	.bc-green-900
var(--green-800)	@green-800	.fc-green-800	.bg-green-800	.bc-green-800
var(--green-700)	@green-700	.fc-green-700	.bg-green-700	.bc-green-700
var(--green-600)	@green-600	.fc-green-600	.bg-green-600	.bc-green-600
var(--green-500)	@green-500	.fc-green-500	.bg-green-500	.bc-green-500
var(--green-400)	@green-400	.fc-green-400	.bg-green-400	.bc-green-400
var(--green-300)	@green-300	.fc-green-300	.bg-green-300	.bc-green-300
var(--green-200)	@green-200	.fc-green-200	.bg-green-200	.bc-green-200
var(--green-100)	@green-100	.fc-green-100	.bg-green-100	.bc-green-100
var(--green-050)	@green-050	.fc-green-050	.bg-green-050	.bc-green-050
var(--green-025)	@green-025	.fc-green-025	.bg-green-025	.bc-green-025
var(--white)	@white	.fc-white	.bg-white	.bc-white
N/A	N/A	N/A	.bg-transparent	.bc-transparent

Red

CSS	Less	Text class	Background class	Border class
var(--red-900)	@red-900	.fc-red-900	.bg-red-900	.bc-red-900
var(--red-800)	@red-800	.fc-red-800	.bg-red-800	.bc-red-800
var(--red-700)	@red-700	.fc-red-700	.bg-red-700	.bc-red-700
var(--red-600)	@red-600	.fc-red-600	.bg-red-600	.bc-red-600
var(--red-500)	@red-500	.fc-red-500	.bg-red-500	.bc-red-500
var(--red-400)	@red-400	.fc-red-400	.bg-red-400	.bc-red-400
var(--red-300)	@red-300	.fc-red-300	.bg-red-300	.bc-red-300
var(--red-200)	@red-200	.fc-red-200	.bg-red-200	.bc-red-200
var(--red-100)	@red-100	.fc-red-100	.bg-red-100	.bc-red-100
var(--red-050)	@red-050	.fc-red-050	.bg-red-050	.bc-red-050
var(--white)	@white	.fc-white	.bg-white	.bc-white
N/A	N/A	N/A	.bg-transparent	.bc-transparent

Gold

Variable	HEX	Text class	Background class
var(--gold)	#ffcc01	.fc-gold	.bg-gold
var(--gold-darker)	#f1b600	.fc-gold-darker	.bg-gold-darker
var(--gold-lighter)	#fff4d1	.fc-gold-lighter	.bg-gold-lighter

Silver

Variable	HEX	Text class	Background class
var(--silver)	#b4b8bc	.fc-silver	.bg-silver
var(--silver-darker)	#9a9c9f	.fc-silver-darker	.bg-silver-darker
var(--silver-lighter)	#e8e8e8	.fc-silver-lighter	.bg-silver-lighter

Bronze

Variable	HEX	Text class	Background class
var(--bronze)	#caa789	.fc-bronze	.bg-bronze
var(--bronze-darker)	#ab825f	.fc-bronze-darker	.bg-bronze-darker
var(--bronze-lighter)	#f2e9e1	.fc-bronze-lighter	.bg-bronze-lighter

Aliases

Body text

<p class="fc-light">…</p>
<p class="fc-medium">…</p>
<p>…</p>
<p class="fc-dark">…</p>

Color: Light @black-500

Color: Medium @black-700

Color: Default @black-800

Color: Dark @black-900

Danger and error

Text classes	Background classes	Border Classes
.fc-danger .fc-error	.bg-danger .bg-error	.bc-danger .bc-error

Success

Text class	Background class	Border class
.fc-success	.bg-success	.bc-success

Warning

Text class	Background class	Border class
.fc-warning	.bg-warning	.bc-warning