[Aetae]

<ul class="nav-list-1">
     <li data-filter="red" class="nav-list__item">Красный</li>
     <li data-filter="green" class="nav-list__item">Зеленый</li>
     <li data-filter="blue" class="nav-list__item">Синий</li>
     <li data-filter="gray" class="nav-list__item">Сброс</li>
</ul>
<style> 
  [data-filter="red"]:active {
    color: red
  }  
  [data-filter="green"]:active {
    color: green
  }  
  [data-filter="blue"]:active {
    color: blue
  }  
  [data-filter="gray"]:active {
    color: gray
  }  
</style>

<ul class="nav-list-2">
     <li style="--active-color: red" class="nav-list__item">Красный</li>
     <li style="--active-color: green" class="nav-list__item">Зеленый</li>
     <li style="--active-color: blue" class="nav-list__item">Синий</li>
     <li style="--active-color: gray" class="nav-list__item">Сброс</li>
</ul>
<style> 
  .nav-list-2 > li:active {
    color: var(--active-color);
  }  
</style>