Как сопоставить определенный номер цвета от градиента

Question

Предположим, у меня есть div с плавным линейным градиентом (слева направо) от зеленого до красного и задано число от 0 до 1. Я хочу знать конкретный цвет, процент от которого левый.

Т.е. 0 будет отображаться на зеленый, а 1 - на красный. .5 будет отображать красноватую зеленоватую середину и т. Д., Поэтому возвращение такой функции будет представлять собой цветовое представление (например, hex, rgba).

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

Answer 1

Если вы можете преобразовать Hex в целые числа для числа, я думаю, вы должны получить среднее число между двумя цветами. Предполагая, что у вас уже есть цветовые коды Зеленый: # 33FF33 Красный: # FF0000

function ConvertToInt(colorHex){ 
    if(colorHex.length != 6){return 0;} 
    var R = colorHex.substring(0,2); 
    var G = colorHex.substring(2,4); 
    var B = colorHex.substring(4,6); 

    return [parseInt(R,16),parseInt(G,16),parseInt(B,16)]; 
} 

Затем вызовите эту функцию для обоих ваших цветов дает вам массив целых чисел.

function GetColorAtPos(color1,color2,position){ 
    color1Multiplier = position; 
    color2Multiplier = 1-position; 
    finalRGB = []; 
    for(i =0;i<=2;i++){ 
     finalRGB.push(parseInt((color1[i] * color1Multiplier) + (color2[i] * color2Multiplier))) 
    } 
    return finalRGB 
} 

Это должно вернуть средний цвет.

Если вы могли бы опубликовать значение фона, которое у вас есть для элемента, я могу опубликовать выделение цветов.

Это, как вы могли бы назвать его GetColorAtPos(ConvertToInt("FFFFFF"), ConvertToInt("000000"), .5)