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 RGB Text class Background class Hover? Focus?
@orange-900 #482204 72,34,4 .fc-orange-900 .bg-orange-900
@orange-800 #793906 121,57,6 .fc-orange-800 .bg-orange-800
@orange-700 #A95009 169,80,9 .fc-orange-700 .bg-orange-700
@orange-600 #DA670B 218,103,11 .fc-orange-600 .bg-orange-600
@orange-500 #F2720C 242,114,12 .fc-orange-500 .bg-orange-500
@orange-400 #F48024 244,128,36 .fc-orange-400 .bg-orange-400
@orange-300 #F69C55 246,156,85 .fc-orange-300 .bg-orange-300
@orange-200 #F9B885 249,184,133 .fc-orange-200 .bg-orange-200
@orange-100 #FBD4B6 251,212,182 .fc-orange-100 .bg-orange-100
@orange-050 #FDE3CE 253,227,206 .fc-orange-050 .bg-orange-050
@white #FFFFFF 255,255,255 .fc-white .bg-white
N/A N/A N/A N/A .bg-transparent

Black

Less HEX RGB Text class Background class Hover? Focus?
@black-900 #0C0D0E 12,13,14 .fc-black-900 .bg-black-900
@black-800 #242729 36,39,41 .fc-black-800 .bg-black-800
@black-750 #2F3337 45,51,55 .fc-black-750 .bg-black-750
@black-700 #3B4045 59,64,69 .fc-black-700 .bg-black-700
@black-600 #535A60 83,90,96 .fc-black-600 .bg-black-600
@black-500 #6A737C 106,115,124 .fc-black-500 .bg-black-500
@black-400 #848D95 132,141,149 .fc-black-400 .bg-black-400
@black-350 #9199A1 145,153,161 .fc-black-350 .bg-black-350
@black-300 #9FA6AD 159,166,173 .fc-black-300 .bg-black-300
@black-200 #BBC0C4 187,192,196 .fc-black-200 .bg-black-200
@black-150 #C8CCD0 200,204,208 .fc-black-150 .bg-black-150
@black-100 #D6D9DC 214,217,220 .fc-black-100 .bg-black-100
@black-075 #E4E6E8 228,230,232 .fc-black-075 .bg-black-075
@black-050 #EFF0F1 239,240,241 .fc-black-050 .bg-black-050
@black-025 #FAFAFB 250,250,251 .fc-black-025 .bg-black-025
@white #FFFFFF 255,255,255 .fc-white .bg-white
N/A N/A N/A N/A .bg-transparent

Blue

Less HEX RGB Text class Background class Hover? Focus?
@blue-900 #001E33 0,30,51 .fc-blue-900 .bg-blue-900
@blue-800 #003B66 0,59,102 .fc-blue-800 .bg-blue-800
@blue-700 #005999 0,89,153 .fc-blue-700 .bg-blue-700
@blue-600 #0077CC 0,119,204 .fc-blue-600 .bg-blue-600
@blue-500 #0095FF 0,149,255 .fc-blue-500 .bg-blue-500
@blue-400 #33AAFF 51,170,255 .fc-blue-400 .bg-blue-400
@blue-300 #66BFFF 102,191,255 .fc-blue-300 .bg-blue-300
@blue-200 #99D4FF 153,212,255 .fc-blue-200 .bg-blue-200
@blue-100 #CCEAFF 204,234,255 .fc-blue-100 .bg-blue-100
@blue-050 #E6F4FF 230,244,255 .fc-blue-050 .bg-blue-050
@white #FFFFFF 255,255,255 .fc-white .bg-white
N/A N/A N/A N/A .bg-transparent

Powder

Less HEX RGB Text class Background class Hover? Focus?
@powder-900 #10212D 16,33,45 .fc-powder-900 .bg-powder-900
@powder-800 #1E3C52 30,60,82 .fc-powder-800 .bg-powder-800
@powder-700 #2C5777 44,87,119 .fc-powder-700 .bg-powder-700
@powder-600 #39739D 57,115,157 .fc-powder-600 .bg-powder-600
@powder-500 #4C8DBD 76,141,189 .fc-powder-500 .bg-powder-500
@powder-400 #71A5CB 113,165,203 .fc-powder-400 .bg-powder-400
@powder-300 #96BDD9 150,189,217 .fc-powder-300 .bg-powder-300
@powder-200 #BCD4E6 188,212,230 .fc-powder-200 .bg-powder-200
@powder-100 #E1ECF4 225,236,244 .fc-powder-100 .bg-powder-100
@powder-050 #F4F8FB 244,248,251 .fc-powder-050 .bg-powder-050
@white #FFFFFF 255,255,255 .fc-white .bg-white
N/A N/A N/A N/A .bg-transparent

Yellow

Less HEX RGB Text class Background class Hover? Focus?
@yellow-900 #433600 67,54,0 .fc-yellow-900 .bg-yellow-900
@yellow-800 #765E00 118,94,0 .fc-yellow-800 .bg-yellow-800
@yellow-700 #A98700 169,135,0 .fc-yellow-700 .bg-yellow-700
@yellow-600 #DCB000 220,176,0 .fc-yellow-600 .bg-yellow-600
@yellow-500 #FFCF10 255,207,16 .fc-yellow-500 .bg-yellow-500
@yellow-400 #FFD943 255,217,67 .fc-yellow-400 .bg-yellow-400
@yellow-300 #FFE476 255,228,118 .fc-yellow-300 .bg-yellow-300
@yellow-200 #FFEEA9 255,238,169 .fc-yellow-200 .bg-yellow-200
@yellow-100 #FFF8DC 255,248,220 .fc-yellow-100 .bg-yellow-100
@yellow-050 #FFFDF6 255,253,246 .fc-yellow-050 .bg-yellow-050
@white #FFFFFF 255,255,255 .fc-white .bg-white
N/A N/A N/A N/A .bg-transparent

Green

Less HEX RGB Text class Background class Hover? Focus?
@green-900 #08120B 8,18,11 .fc-green-900 .bg-green-900
@green-800 #173621 23,54,33 .fc-green-800 .bg-green-800
@green-700 #265A37 38,89,55 .fc-green-700 .bg-green-700
@green-600 #367D4D 54,125,77 .fc-green-600 .bg-green-600
@green-500 #45A163 69,161,99 .fc-green-500 .bg-green-500
@green-400 #5FBA7D 94,186,125 .fc-green-400 .bg-green-400
@green-300 #82CA9A 130,201,154 .fc-green-300 .bg-green-300
@green-200 #A6D9B7 166,217,183 .fc-green-200 .bg-green-200
@green-100 #CAE8D4 201,232,212 .fc-green-100 .bg-green-100
@green-050 #DCF0E2 219,240,226 .fc-green-050 .bg-green-050
@green-025 #EDF7F1 237,247,241 .fc-green-025 .bg-green-025
@white #FFFFFF 255,255,255 .fc-white .bg-white
N/A N/A N/A N/A .bg-transparent

Red

Less HEX RGB Text class Background class Hover? Focus?
@red-900 #170305 22,3,5 .fc-red-900 .bg-red-900
@red-800 #430A0F 67,10,15 .fc-red-800 .bg-red-800
@red-700 #70101A 112,16,26 .fc-red-700 .bg-red-700
@red-600 #9C1724 156,22,36 .fc-red-600 .bg-red-600
@red-500 #C91D2E 201,29,46 .fc-red-500 .bg-red-500
@red-400 #DC3D4C 221,60,76 .fc-red-400 .bg-red-400
@red-300 #E06C77 224,108,119 .fc-red-300 .bg-red-300
@red-200 #E699A1 230,153,161 .fc-red-200 .bg-red-200
@red-100 #EEC4C8 238,196,200 .fc-red-100 .bg-red-100
@red-050 #F9ECEE 249,236,237 .fc-red-050 .bg-red-050
@white #FFFFFF 255,255,255 .fc-white .bg-white
N/A 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