Palette

Colors can be applied to backgrounds of an element with the .bg prefix, or can apply color to the text of the element with just its name.

Aa .bg-dark-red, .dark-red = #b12419;
Aa .bg-red, .red = #d52b1e;
Aa .bg-light-red, .light-red = #ff725c;
Aa .bg-orange, .orange = #E85A00;
Aa .bg-brown, .brown = #5f4132;
Aa .bg-gold, .gold = #df8900;
Aa .bg-yellow, .yellow = #ffd700;
Aa .bg-dark-yellow, .dark-yellow = #febb31;
Aa .bg-light-yellow, .light-yellow = #fbf1a9;
Aa .bg-purple, .purple = #6e3d99;
Aa .bg-dark-purple, .dark-purple = #2f1944;
Aa .bg-dark-pink, .dark-pink = #dc3d9f;
Aa .bg-hot-pink, .hot-pink = #ff41b4;
Aa .bg-pink, .pink = #ff80cc;
Aa .bg-light-pink, .light-pink = #ffa3d7;
Aa .bg-dark-green, .dark-green = #156E02;
Aa .bg-green, .green = #2ac278;
Aa .bg-olive-green, .olive-green = #3d422a;
Aa .bg-teal, .teal = #06807E;
Aa .bg-navy, .navy = #001b44;
Aa .bg-dark-blue, .dark-blue = #185B9D;
Aa .bg-blue, .blue = #038cca;
Aa .bg-blue-gray, .blue-gray = #4b6782;
Aa .bg-light-blue, .light-blue = #96ccff;
Aa .bg-lightest-blue, .lightest-blue = #cdecff;
Aa .bg-washed-blue, .washed-blue = #f6fffe;
Aa .bg-washed-green, .washed-green = #e8fdf5;
Aa .bg-washed-yellow, .washed-yellow = #fffceb;
Aa .bg-washed-red, .washed-red = #ffdfdf; 
:root {
  
  --dark-red: #b12419;
  --red: #d52b1e;
  --light-red: #ff725c;
  --orange: #E85A00;
  --brown: #5f4132;
  --gold: #df8900;
  --yellow: #ffd700;
  --dark-yellow: #febb31;
  --light-yellow: #fbf1a9;
  --purple: #6e3d99;
  --dark-purple: #2f1944;
  --dark-pink: #dc3d9f;
  --hot-pink: #ff41b4;
  --pink: #ff80cc;
  --light-pink: #ffa3d7;
  --dark-green: #156E02;
  --green: #2ac278;
  --olive-green: #3d422a;
  --teal: #06807E;
  --navy: #001b44;
  --dark-blue: #185B9D;
  --blue: #038cca;
  --blue-gray: #4b6782;
  --light-blue: #96ccff;
  --lightest-blue: #cdecff;
  --washed-blue: #f6fffe;
  --washed-green: #e8fdf5;
  --washed-yellow: #fffceb;
  --washed-red: #ffdfdf;
}


.bg-dark-red { background-color: var(--dark-red)};
.bg-red { background-color: var(--red)};
.bg-light-red { background-color: var(--light-red)};
.bg-orange { background-color: var(--orange)};
.bg-brown { background-color: var(--brown)};
.bg-gold { background-color: var(--gold)};
.bg-yellow { background-color: var(--yellow)};
.bg-dark-yellow { background-color: var(--dark-yellow)};
.bg-light-yellow { background-color: var(--light-yellow)};
.bg-purple { background-color: var(--purple)};
.bg-dark-purple { background-color: var(--dark-purple)};
.bg-dark-pink { background-color: var(--dark-pink)};
.bg-hot-pink { background-color: var(--hot-pink)};
.bg-pink { background-color: var(--pink)};
.bg-light-pink { background-color: var(--light-pink)};
.bg-dark-green { background-color: var(--dark-green)};
.bg-green { background-color: var(--green)};
.bg-olive-green { background-color: var(--olive-green)};
.bg-teal { background-color: var(--teal)};
.bg-navy { background-color: var(--navy)};
.bg-dark-blue { background-color: var(--dark-blue)};
.bg-blue { background-color: var(--blue)};
.bg-blue-gray { background-color: var(--blue-gray)};
.bg-light-blue { background-color: var(--light-blue)};
.bg-lightest-blue { background-color: var(--lightest-blue)};
.bg-washed-blue { background-color: var(--washed-blue)};
.bg-washed-green { background-color: var(--washed-green)};
.bg-washed-yellow { background-color: var(--washed-yellow)};
.bg-washed-red { background-color: var(--washed-red)};


.dark-red { color: var(--dark-red)};
.red { color: var(--red)};
.light-red { color: var(--light-red)};
.orange { color: var(--orange)};
.brown { color: var(--brown)};
.gold { color: var(--gold)};
.yellow { color: var(--yellow)};
.dark-yellow { color: var(--dark-yellow)};
.light-yellow { color: var(--light-yellow)};
.purple { color: var(--purple)};
.dark-purple { color: var(--dark-purple)};
.dark-pink { color: var(--dark-pink)};
.hot-pink { color: var(--hot-pink)};
.pink { color: var(--pink)};
.light-pink { color: var(--light-pink)};
.dark-green { color: var(--dark-green)};
.green { color: var(--green)};
.olive-green { color: var(--olive-green)};
.teal { color: var(--teal)};
.navy { color: var(--navy)};
.dark-blue { color: var(--dark-blue)};
.blue { color: var(--blue)};
.blue-gray { color: var(--blue-gray)};
.light-blue { color: var(--light-blue)};
.lightest-blue { color: var(--lightest-blue)};
.washed-blue { color: var(--washed-blue)};
.washed-green { color: var(--washed-green)};
.washed-yellow { color: var(--washed-yellow)};
.washed-red { color: var(--washed-red)};