Berechnen Sie die Farbe HEX mit 2 Farben und Prozent/Position

Question

Ist es möglich, eine Farbe in der Mitte eines Gradienten zu berechnen?

var color1 = 'FF0000'; 
var color2 = '00FF00'; 

// 50% between the two colors, should return '808000' 
var middle = gradient(color1, color2, 0.5); 

Ich habe nur zwei Hex-Strings, und ich möchte eine im Gegenzug.

Answer 1

sollte diese Arbeit:

Es geht ihnen grundsätzlich die Umwandlung der Hälften in Dezimalzahlen, finden, die Ergebnisse zurück an hex konvertieren und verketten sie dann.

var color1 = 'FF0000'; 
var color2 = '00FF00'; 
var ratio = 0.5; 
var hex = function(x) { 
    x = x.toString(16); 
    return (x.length == 1) ? '0' + x : x; 
}; 

var r = Math.ceil(parseInt(color1.substring(0,2), 16) * ratio + parseInt(color2.substring(0,2), 16) * (1-ratio)); 
var g = Math.ceil(parseInt(color1.substring(2,4), 16) * ratio + parseInt(color2.substring(2,4), 16) * (1-ratio)); 
var b = Math.ceil(parseInt(color1.substring(4,6), 16) * ratio + parseInt(color2.substring(4,6), 16) * (1-ratio)); 

var middle = hex(r) + hex(g) + hex(b); 

Answer 2

Ich kann nicht oben auf der Antwort kommentieren, so schreibe ich es hier:

Ich fand heraus, dass in der Teilkette Methode Javascript des Index für den Parameter nicht im zurückgegebenen String enthalten ist. Das heißt:

var string = "test"; 
//index: 
alert(string.substring(1,3)); 

//will alert es and NOT est 

Edit: So sollte es sein:

parseInt(color1.substring(0,2), 16); 
parseInt(color1.substring(2,4), 16); 

und

parseInt(color1.substring(4,6), 16);