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 HEX Text class Background class Hover? Focus?
@orange-900 #874600 .fc-orange-900 .bg-orange-900
@orange-800 #a35200 .fc-orange-800 .bg-orange-800
@orange-700 #bd5c00 .fc-orange-700 .bg-orange-700
@orange-600 #da670b .fc-orange-600 .bg-orange-600
@orange-500 #f2720c .fc-orange-500 .bg-orange-500
@orange-400 #f48024 .fc-orange-400 .bg-orange-400
@orange-300 #f7aa6d .fc-orange-300 .bg-orange-300
@orange-200 #fcd0ad .fc-orange-200 .bg-orange-200
@orange-100 #fee3cf .fc-orange-100 .bg-orange-100
@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 HEX Text class Background class Hover? Focus?
@black-900 #0c0d0e .fc-black-900 .fc-dark .bg-black-900
@black-800 #242729 .fc-black-800 Default .bg-black-800
@black-750 #2f3337 .fc-black-750 .bg-black-750
@black-700 #3b4045 .fc-black-700 .fc-medium .bg-black-700
@black-600 #535a60 .fc-black-600 .bg-black-600
@black-500 #6a737c .fc-black-500 .fc-light .bg-black-500
@black-400 #848d95 .fc-black-400 .bg-black-400
@black-350 #9199a1 .fc-black-350 .bg-black-350
@black-300 #9fa6ad .fc-black-300 .bg-black-300
@black-200 #bbc0c4 .fc-black-200 .bg-black-200
@black-150 #c8ccd0 .fc-black-150 .bg-black-150
@black-100 #d6d9dc .fc-black-100 .bg-black-100
@black-075 #e4e6e8 .fc-black-075 .bg-black-075
@black-050 #eff0f1 .fc-black-050 .bg-black-050
@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 HEX Text class Background class Hover? Focus?
@blue-900 #004487 .fc-blue-900 .bg-blue-900
@blue-800 #0054a3 .fc-blue-800 .bg-blue-800
@blue-700 #0064bd .fc-blue-700 .bg-blue-700
@blue-600 #0077cc .fc-blue-600 .bg-blue-600
@blue-500 #0095ff .fc-blue-500 .bg-blue-500
@blue-400 #379fef .fc-blue-400 .bg-blue-400
@blue-300 #6cbbf7 .fc-blue-300 .bg-blue-300
@blue-200 #addafc .fc-blue-200 .bg-blue-200
@blue-100 #cfeafe .fc-blue-100 .bg-blue-100
@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 HEX Text class Background class Hover? Focus?
@powder-900 #1e3c52 .fc-powder-900 .bg-powder-900
@powder-800 #2c5777 .fc-powder-800 .bg-powder-800
@powder-700 #39739d .fc-powder-700 .bg-powder-700
@powder-600 #5b8db1 .fc-powder-600 .bg-powder-600
@powder-500 #7aa7c7 .fc-powder-500 .bg-powder-500
@powder-400 #a0c7e4 .fc-powder-400 .bg-powder-400
@powder-300 #b3d3ea .fc-powder-300 .bg-powder-300
@powder-200 #d1e5f1 .fc-powder-200 .bg-powder-200
@powder-100 #e1ecf4 .fc-powder-100 .bg-powder-100
@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 HEX Text class Background class Hover? Focus?
@yellow-900 #826a0b .fc-yellow-900 .bg-yellow-900
@yellow-800 #9f8010 .fc-yellow-800 .bg-yellow-800
@yellow-700 #b89516 .fc-yellow-700 .bg-yellow-700
@yellow-600 #cea51b .fc-yellow-600 .bg-yellow-600
@yellow-500 #ddb624 .fc-yellow-500 .bg-yellow-500
@yellow-400 #e9c63f .fc-yellow-400 .bg-yellow-400
@yellow-300 #e6d178 .fc-yellow-300 .bg-yellow-300
@yellow-200 #f1e5bc .fc-yellow-200 .bg-yellow-200
@yellow-100 #fbf2d4 .fc-yellow-100 .bg-yellow-100
@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 HEX Text class Background class Hover? Focus?
@green-900 #1e472c .fc-green-900 .bg-green-900
@green-800 #29603b .fc-green-800 .bg-green-800
@green-700 #2f6f44 .fc-green-700 .bg-green-700
@green-600 #3d8f58 .fc-green-600 .bg-green-600
@green-500 #48a868 .fc-green-500 .bg-green-500
@green-400 #5eba7d .fc-green-400 .bg-green-400
@green-300 #82ca9a .fc-green-300 .bg-green-300
@green-200 #a6d9b7 .fc-green-200 .bg-green-200
@green-100 #cae8d4 .fc-green-100 .bg-green-100
@green-050 #dcf0e2 .fc-green-050 .bg-green-050
@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 HEX Text class Background class Hover? Focus?
@red-900 #7a1819 .fc-red-900 .bg-red-900
@red-800 #942121 .fc-red-800 .bg-red-800
@red-700 #ac2726 .fc-red-700 .bg-red-700
@red-600 #c02d2e .fc-red-600 .bg-red-600
@red-500 #d1383d .fc-red-500 .bg-red-500
@red-400 #de535e .fc-red-400 .bg-red-400
@red-300 #e87c87 .fc-red-300 .bg-red-300
@red-200 #f4b4bb .fc-red-200 .bg-red-200
@red-100 #f9d3d7 .fc-red-100 .bg-red-100
@red-050 #fdf3f4 .fc-red-050 .bg-red-050
@white #ffffff .fc-white .bg-white
N/A N/A N/A .bg-transparent

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