JSFiddle - React, Tailwind, and code Playground

HTML

<num style="--num:1"></num>
<num style="--num:99"></num>
<num style="--num:165"></num>

CSS

num {
  --breakpoint: 100;
  --g: calc((clamp(0, var(--num), var(--breakpoint)) - calc(var(--breakpoint) - 1)) * 255);
  color: rgb(0, var(--g), 0);

}

num:after {
   counter-reset: variable var(--num);
   content: counter(variable);
}