Berechnen Farb-HEX-2 Farben und Prozent/position

Ist es möglich zu berechnen, eine Farbe in einer Mitte einen Farbverlauf?

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

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

Habe ich nur zwei hex-Zeichenketten, und ich will eine Gegenleistung.

InformationsquelleAutor Kalamar Obliwy | 2013-05-03
  1. 37

    Sollte dies funktionieren:

    Es beinhaltet im wesentlichen die in Dezimalzahlen konvertieren, finden Sie die Hälften, die Umwandlung der Ergebnisse wieder zu hex und dann verketten Sie Sie.

    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);
    • beachten Sie das Dritte argument -> 0.5 ist das Verhältnis von color1 und color2
    • Ahh, übersehen, dass. Antwort korrigiert.
    • Gut, das ist in der Tat in der Nähe, aber wenn-Verhältnis ist 0 dann ist die Farbe schwarz, in der Erwägung, dass es sein sollte color1. Darüber hinaus verfügt der r.toString etc. nicht pad mit Nullen gefüllt, wird Sie?
    • var r1 = parseInt(color1.substring(0,1), 16), r2 = parseInt(color2.substring(0,1), 16); var r = Math.ceil(r1 + (r2-r1)*ratio); ??
    • Ja, eine Korrektur ist erforderlich.
    • Auch wenn Ihr nicht mit Nullen aufgefüllt ist, wird es nicht ein problem, zum Beispiel, wenn Sie es als eine Farbe. #888 und #080808, sind genau die gleichen.
    • Antwort korrigiert.
    • #abc ist #aabbcc; als Nächstes #8FFFF ist nicht gültig ich denke (das ist der Fall, wenn nicht alle r -, g -, b sind entweder 1-oder 2-stellig)
    • Antwort bearbeitet. Sollte jetzt funktionieren.
    • Der substring ist falsch, die Parameter sind : (0, 2) - (2, 4) - (4, 6)
    • die hex-Funktion zurückkehren sollte : return (x.Länge == 1) ? x + x : x;
    • color1 und color2 Umgekehrt.

    InformationsquelleAutor techfoobar
  2. 4

    Ich kann nicht kommentieren, die Antwort oben, also Schreibe ich es hier:

    Fand ich heraus, dass in der Javascript substring-Methode der parameter index ist nicht enthalten in der zurückgegebenen Zeichenfolge. Das bedeutet:

    var string = "test";
//index:      0123
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);
    InformationsquelleAutor Nilz11
Schreibe einen Kommentar