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? Dark?
@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? Dark?
@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? Dark?
@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? Dark?
@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? Dark?
@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? Dark?
@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? Dark?
@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