如何用JavaScript实现单一红色的动态深浅强度变化？

我见过很多开发者实现多种颜色间的深浅过渡，但我仅需针对单一红色进行处理。我有一个包含逾期日期列的表格，要求逾期1天时显示浅红色，逾期天数越多，红色强度越高。以下是我的尝试：

注：我使用了基础Vue.js简化实现，无需掌握Vue.js知识，只需复制修改函数或创建新函数调用即可。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

</head>

<body>
  <div id="id">
    <div class="table-responsive">
      <table class="table table-striped w-auto">
        <thead>
          <tr>
            <th>Due Data</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <span class="badge" v-bind:style="'background-color: rgb('+255/3*getLateDays('2022-07-08')+',0,0)'">
                2022-07-08
              </span>
            </td>
          </tr>
          <tr>
            <td>
              <span class="badge" v-bind:style="'background-color: rgb('+255/3*getLateDays('2022-07-09')+',0,0)'">
                2022-07-09
              </span>
            </td>
          </tr>
          <tr>
            <td>
              <span class="badge" v-bind:style="'background-color: rgb('+255/3*getLateDays('2022-07-10')+',0,0)'">
                2022-07-10
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  </div>
</body>
<script>
  var myApp = new Vue({
    el: '#id',
    data() {
      return {

      }
    },
    methods: {
      getLateDays(date) {
        return Math.ceil((new Date().setHours(0, 0, 0, 0) - new Date(date + ' 00:00:00').setHours(0, 0, 0, 0)) / (1000 * 60 * 60 * 24));
      }
    },
  });
</script>

</html>

内容的提问来源于stack exchange，提问作者Bryan Santos