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.
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
Less
HEX
RGB
Text class
Background class
Hover? Focus?
@black-900
#0C0D0E
12,13,14
.fc-black-900
.fc-dark
.bg-black-900
@black-800
#242729
36,39,41
.fc-black-800
Default
.bg-black-800
@black-750
#2F3337
45,51,55
.fc-black-750
.bg-black-750
@black-700
#3B4045
59,64,69
.fc-black-700
.fc-medium
.bg-black-700
@black-600
#535A60
83,90,96
.fc-black-600
.bg-black-600
@black-500
#6A737C
106,115,124
.fc-black-500
.fc-light
.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
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
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
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
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
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
Text classes
Background classes
Border Classes
.fc-danger .fc-error
.bg-danger
.bg-error
.bc-danger
.bc-error
Text class
Background class
Border class
.fc-success
.bg-success
.bc-success
Text class
Background class
Border class
.fc-warning
.bg-warning
.bc-warning