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

	Less	Variable	Text class	Background class	Hover?	Focus?	Dark?
	var(--orange-900)	#874600	.fc-orange-900	.bg-orange-900
	var(--orange-800)	#a35200	.fc-orange-800	.bg-orange-800
	var(--orange-700)	#bd5c00	.fc-orange-700	.bg-orange-700
	var(--orange-600)	#da670b	.fc-orange-600	.bg-orange-600
	var(--orange-500)	#f2720c	.fc-orange-500	.bg-orange-500
	var(--orange-400)	#f48024	.fc-orange-400	.bg-orange-400
	var(--orange-300)	#f7aa6d	.fc-orange-300	.bg-orange-300
	var(--orange-200)	#fcd0ad	.fc-orange-200	.bg-orange-200
	var(--orange-100)	#fee3cf	.fc-orange-100	.bg-orange-100
	var(--orange-050)	#fff7f2	.fc-orange-050	.bg-orange-050
	@white	#ffffff	.fc-white	.bg-white
	N/A	N/A	N/A	.bg-transparent

Black

	Less	Variable	Text class	Background class	Hover?	Focus?	Dark?
	var(--black-900)	#0c0d0e	.fc-black-900 .fc-dark	.bg-black-900
	var(--black-800)	#242729	.fc-black-800 Default	.bg-black-800
	var(--black-750)	#2f3337	.fc-black-750	.bg-black-750
	var(--black-700)	#3b4045	.fc-black-700 .fc-medium	.bg-black-700
	var(--black-600)	#535a60	.fc-black-600	.bg-black-600
	var(--black-500)	#6a737c	.fc-black-500 .fc-light	.bg-black-500
	var(--black-400)	#848d95	.fc-black-400	.bg-black-400
	var(--black-350)	#9199a1	.fc-black-350	.bg-black-350
	var(--black-300)	#9fa6ad	.fc-black-300	.bg-black-300
	var(--black-200)	#bbc0c4	.fc-black-200	.bg-black-200
	var(--black-150)	#c8ccd0	.fc-black-150	.bg-black-150
	var(--black-100)	#d6d9dc	.fc-black-100	.bg-black-100
	var(--black-075)	#e4e6e8	.fc-black-075	.bg-black-075
	var(--black-050)	#eff0f1	.fc-black-050	.bg-black-050
	var(--black-025)	#fafafb	.fc-black-025	.bg-black-025
	@white	#ffffff	.fc-white	.bg-white
	N/A	N/A	N/A	.bg-transparent

Blue

	Less	Variable	Text class	Background class	Hover?	Focus?	Dark?
	var(--blue-900)	#004487	.fc-blue-900	.bg-blue-900
	var(--blue-800)	#0054a3	.fc-blue-800	.bg-blue-800
	var(--blue-700)	#0064bd	.fc-blue-700	.bg-blue-700
	var(--blue-600)	#0077cc	.fc-blue-600	.bg-blue-600
	var(--blue-500)	#0095ff	.fc-blue-500	.bg-blue-500
	var(--blue-400)	#379fef	.fc-blue-400	.bg-blue-400
	var(--blue-300)	#6cbbf7	.fc-blue-300	.bg-blue-300
	var(--blue-200)	#addafc	.fc-blue-200	.bg-blue-200
	var(--blue-100)	#cfeafe	.fc-blue-100	.bg-blue-100
	var(--blue-050)	#f2f9ff	.fc-blue-050	.bg-blue-050
	@white	#ffffff	.fc-white	.bg-white
	N/A	N/A	N/A	.bg-transparent

Powder

	Less	Variable	Text class	Background class	Hover?	Focus?	Dark?
	var(--powder-900)	#1e3c52	.fc-powder-900	.bg-powder-900
	var(--powder-800)	#2c5777	.fc-powder-800	.bg-powder-800
	var(--powder-700)	#39739d	.fc-powder-700	.bg-powder-700
	var(--powder-600)	#5b8db1	.fc-powder-600	.bg-powder-600
	var(--powder-500)	#7aa7c7	.fc-powder-500	.bg-powder-500
	var(--powder-400)	#a0c7e4	.fc-powder-400	.bg-powder-400
	var(--powder-300)	#b3d3ea	.fc-powder-300	.bg-powder-300
	var(--powder-200)	#d1e5f1	.fc-powder-200	.bg-powder-200
	var(--powder-100)	#e1ecf4	.fc-powder-100	.bg-powder-100
	var(--powder-050)	#f4f8fb	.fc-powder-050	.bg-powder-050
	@white	#ffffff	.fc-white	.bg-white
	N/A	N/A	N/A	.bg-transparent

Yellow

	Less	Variable	Text class	Background class	Hover?	Focus?	Dark?
	var(--yellow-900)	#826a0b	.fc-yellow-900	.bg-yellow-900
	var(--yellow-800)	#9f8010	.fc-yellow-800	.bg-yellow-800
	var(--yellow-700)	#b89516	.fc-yellow-700	.bg-yellow-700
	var(--yellow-600)	#cea51b	.fc-yellow-600	.bg-yellow-600
	var(--yellow-500)	#ddb624	.fc-yellow-500	.bg-yellow-500
	var(--yellow-400)	#e9c63f	.fc-yellow-400	.bg-yellow-400
	var(--yellow-300)	#e6d178	.fc-yellow-300	.bg-yellow-300
	var(--yellow-200)	#f1e5bc	.fc-yellow-200	.bg-yellow-200
	var(--yellow-100)	#fbf2d4	.fc-yellow-100	.bg-yellow-100
	var(--yellow-050)	#fdf7e3	.fc-yellow-050	.bg-yellow-050
	@white	#ffffff	.fc-white	.bg-white
	N/A	N/A	N/A	.bg-transparent

Green

	Less	Variable	Text class	Background class	Hover?	Focus?	Dark?
	var(--green-900)	#1e472c	.fc-green-900	.bg-green-900
	var(--green-800)	#29603b	.fc-green-800	.bg-green-800
	var(--green-700)	#2f6f44	.fc-green-700	.bg-green-700
	var(--green-600)	#3d8f58	.fc-green-600	.bg-green-600
	var(--green-500)	#48a868	.fc-green-500	.bg-green-500
	var(--green-400)	#5eba7d	.fc-green-400	.bg-green-400
	var(--green-300)	#82ca9a	.fc-green-300	.bg-green-300
	var(--green-200)	#a6d9b7	.fc-green-200	.bg-green-200
	var(--green-100)	#cae8d4	.fc-green-100	.bg-green-100
	var(--green-050)	#dcf0e2	.fc-green-050	.bg-green-050
	var(--green-025)	#eef8f1	.fc-green-025	.bg-green-025
	@white	#ffffff	.fc-white	.bg-white
	N/A	N/A	N/A	.bg-transparent

Red

	Less	Variable	Text class	Background class	Hover?	Focus?	Dark?
	var(--red-900)	#7a1819	.fc-red-900	.bg-red-900
	var(--red-800)	#942121	.fc-red-800	.bg-red-800
	var(--red-700)	#ac2726	.fc-red-700	.bg-red-700
	var(--red-600)	#c02d2e	.fc-red-600	.bg-red-600
	var(--red-500)	#d1383d	.fc-red-500	.bg-red-500
	var(--red-400)	#de535e	.fc-red-400	.bg-red-400
	var(--red-300)	#e87c87	.fc-red-300	.bg-red-300
	var(--red-200)	#f4b4bb	.fc-red-200	.bg-red-200
	var(--red-100)	#f9d3d7	.fc-red-100	.bg-red-100
	var(--red-050)	#fdf3f4	.fc-red-050	.bg-red-050
	@white	#ffffff	.fc-white	.bg-white
	N/A	N/A	N/A	.bg-transparent

Gold

	Variable	HEX	Text class	Background class	Hover?	Focus?	Dark?
	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	Hover?	Focus?	Dark?
	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	Hover?	Focus?	Dark?
	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

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