HTML & CSS de yüzdeye göre renk değiştirme.

Yapmak istediğim.
Elimde bir değer var 1-5 arası küsuratlarıyla birlikte.
Ben 1 iken div'in kırmızı 5 iken yeşil olmasını istiyorum.
5 adet renk tanımlayıp yapabilirim ama benim isteğim o değil.
Geçişken şekilde yapmak istiyorum.

jquery ile yapabilirsiniz hocam

nasıl aratarak bulabilirim hocam yolunu

Jquery mantıksal bir sınama yaparsanız diye önermiştim sadece css ile hazırladığım şekilde kendi sisteminize entegre edebilirsiniz hocam

https://codepen.io/aycanozarpaci/pen/xxzzrgg

css

div[deger="5"]{
  background:green;
}
div[deger="4"]{
  background:green;
}
div[deger="3"]{
  background:orange;
}
div[deger="2"]{
  background:yellow;
}
div[deger="1"]{
  background:red;
}

html

<div class="div" deger="1">
  Değer 1
</div>
<div class="div" deger="2">
  Değer 2
</div>
<div class="div" deger="3">
  Değer 3
</div>
<div class="div" deger="4">
  Değer 4
</div>
<div class="div" deger="5">
  Değer 5
</div>

Emeğiniz için teşekkürler hocam ama ben tek tek renk tanımlamak istemiyorum.

%0-100 arası değer verdiğim de kırmızıdan yeşile kendisi geçiş yapacak yüzdeye göre.
O tarz bir şey arıyorum.

Gradient generator mu aradığınız şey

Bu da değil hocam.
Ben tek kutuyu tek renk yapmak istiyorum ama verdiğim orana göre yeşilden kırmızıya geçişi olacak. Ama kutu tek renk yani kutu içinde sağda sola renk geçişi olmayacak