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