Dynamic CSS in backgorund-color

Question

I am creating a grid of cards and each card can have up to three different background-color, is there any way to make this color dynamic? Instead of creating three identical classes in html, just changing the color of each.

 .card_head {
 
  padding: 25px;
  background-color:#FE5959;
  max-width: 30px;
  max-height: 30px;
  border-radius: 50%;
  margin: 15px;
  color: white;
  font-family: 'Roboto', sans-serif;
  display: flex;
  justify-content: center; 
  align-items: center; 
  float: left;
  
}

<div class="card_head"></div>

Answer 1

One of the alternatives to not creating 3 equal classes is to create CSS classes that are applied only when used in conjunction with .card_head. Each class of these will only take the background-color.

.card_head {
  padding: 25px;
  background-color:#FE5959;
  max-width: 30px;
  max-height: 30px;
  border-radius: 50%;
  margin: 15px;
  color: white;
  font-family: 'Roboto', sans-serif;
  display: flex;
  justify-content: center; 
  align-items: center; 
  float: left; 
}

.card_head.cor1 {
  background-color: red;
}

.card_head.cor2 {
  background-color: green;
}

.card_head.cor3 {
  background-color: blue;
}

<div class="card_head cor1">Lorem</div>
<div class="card_head cor2">Lorem</div>
<div class="card_head cor3">Lorem</div>

Another way is to change the background through Javascript but I didn’t understand if this would be a solution for your scenario. Anyway follows an example:

function alterar() {
  document.querySelector('div').style.backgroundColor = 'green';
}

 .card_head {
      padding: 25px;
      background-color:#FE5959;
      max-width: 30px;
      max-height: 30px;
      border-radius: 50%;
      margin: 15px;
      color: white;
      font-family: 'Roboto', sans-serif;
      display: flex;
      justify-content: center; 
      align-items: center; 
      float: left; 
    }

<div class="card_head">Lorem</div>
<button onclick="alterar()">Alterar cor</button>

Answer 2

There are several ways to do this, including putting an attribute style="background-color: ;" right on the tag. But only with CSS in a more "sophisticated" way would be using CSS Variables. With that you a override for the color depending on the case... (This is an approach similar to that used by several Design Systems such as Bootstrap for example)

/* suas cores pré definidas */ 
.alerta {
  --cor: red;
}
.sucesso {
  --cor: green;
}

.card_head {
  padding: 25px;
  max-width: 30px;
  max-height: 30px;
  border-radius: 50%;
  margin: 15px;
  color: white;
  font-family: 'Roboto', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
  
  background-color: var(--cor); /* só tem um background-color */
}

<div class="card_head alerta"></div>

<div class="card_head sucesso"></div>

<!-- Definido a --cor direto na tag -->

<div class="card_head" style="--cor: gold"></div>