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

Accent colors

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