Определить цвет на основе процентного градиента

Question

Я ищу способ определения цвета solid на основе процента от градиента. В основном как на изображении ниже

Я использовал CSS, чтобы получить градиент, но я не могу понять, как я могу просто выбрать цвет solid из этого градиента. Это CSS для градиента:

background-image: linear-gradient(to bottom, #00b050 20%, #4ac148 40%, #74d13e, #9de031, #c6ee21, #dbe508, #eedb00, #ffd000, #ffad00, #ff8700, #ff5b00, #ff0000);

В худшем случае я мог бы просто go и назначить значения RGB от 0 до 100 для этого градиента и использовать его. Тем не менее, я не могу помочь, но думаю, что должен быть лучший способ программирования c способ решить эту проблему.

Любая помощь будет полезна.

Answer 1

для вычисления промежуточного цвета между двумя цветами так просто, как использовать

color1=rgb(ar,ag,ab)
color2=rgb(br,bg,bb)
color=rgb(ar+factor*(br-ar),ag+factor*(bg-ag),ab+factor*(bb-ab))

Ну, чтобы упростить вычисление коэффициента, мы можем создать серию div. Итак, представьте, что у вас есть градиент типа

  background-image: linear-gradient(to right,#ff0000,#00ffff);

I go для создания массива цветов

colors2:any[]=[
 {color:"#ff0000",porc:0},
 {color:"#ff0000",porc:0},
 {color:"#00ffff",porc:100},
]

Убедитесь, что я повторяю первый элемент с por c: 0

И преобразовать добавив свойства r, g, b

this.colors2.forEach(c=>{
  c.r=parseInt(c.color.substr(1,2),16)
  c.g=parseInt(c.color.substr(3,2),16)
  c.b=parseInt(c.color.substr(5),16)
})

Так что я могу сделать * ngFor

<div class="col" (mousemove)="mouseMove($event,colors2[i],colors2[i+1])" 
   *ngFor="let color of colors2|slice:0:(colors2.length-1);let i=index"
  [style.background-image]="'linear-gradient(to right,'+colors2[i].color+','+colors2[i+1].color+')'"
  [style.width]="(colors2[i+1].porc-colors2[i].porc)+'%'">
</div>

где

.col
{
  height:2rem;
  display:inline-block
}

Где Функция mouseMove рассчитывает промежуточный цвет

  mouseMove(e,color1,color2)
  {
    this.margin=e.clientX-14
    const rect=e.target.getBoundingClientRect();
    const alfa=(e.clientX - rect.left)/rect.width
    const r=Math.floor(color1.r+alfa*(color2.r-color1.r)).toString(16)
    const g=Math.floor(color1.g+alfa*(color2.g-color1.g)).toString(16)
    const b=Math.floor(color1.b+alfa*(color2.b-color1.b)).toString(16)
    const color=('00'+r).slice(-2)+('00'+g).slice(-2)+('00'+b).slice(-2)
    this.result="#"+color
  }

, в stackblitz можно увидеть три градиента. Каждый градиент имеет два горизонтальных элемента div, один с элементом div с градиентом, использующим css, и ниже "имитирует" элемент div с несколькими элементами div. Если вы наведете указатель мыши на этот последний, вы увидите цвет

Answer 2

Одна идея состоит в том, чтобы сделать градиент ОЧЕНЬ большим, и вы настраиваете background-position на один цвет или, по крайней мере, приближаете его:

.box {
  background-image: linear-gradient(to right, #00b050 20%, #4ac148 40%, #74d13e, #9de031, #c6ee21, #dbe508, #eedb00, #ffd000, #ffad00, #ff8700, #ff5b00, #ff0000);
  background-size:10000% 100%;
  border:10px solid;
  width:50px;
  height:100px;
  display:inline-block;
}

<div class="box" style="background-position:20% 0"></div>
<div class="box" style="background-position:40% 0"></div>
<div class="box" style="background-position:50% 0"></div>
<div class="box" style="background-position:60% 0"></div>
<div class="box" style="background-position:70% 0"></div>
<div class="box" style="background-position:80% 0"></div>
<div class="box" style="background-position:100% 0"></div>