Obliczanie wartości kolorów od zielonego do czerwonego

Question

Chciałbym obliczyć wartość koloru według podanego numeru.

0 -> pure red 
100 -> pure green 

example: 75 -> color, which is 75% from red to green. 

Potrzebuję tego do licznika wygaśnięcia, który pokazuje odpowiednie kolory jako dni odliczane.

Answer 1

Można rzeczywiście wybrać rozwiązanie dostarczone przez @KamilT. Wadą tej metody (imo) jest to, że kolory w środku (około 50) będą brązowawe i niezbyt ładne w porównaniu do twoich czerwonych i zielonych.

Myślę, że byłoby o wiele ładniej podążać za spektrum kolorów, a przechodząc przez pomarańczowy i żółty, zamiast tego brzydkiego brązowawego.

Można to łatwo osiągnąć poprzez pracę z wartościami HSL zamiast wartościami RGB. Jeśli ustawisz wartość barwy na podstawie liczby pomiędzy 0 a 100 na wartość między 0 ° (czerwony) i 120 ° (zielony) i utrzymasz nasycenie na poziomie 100%, a jasność na poziomie 50%, powinieneś uzyskać ładne, jasne kolory .

znalazłem sposób na konwersję pomiędzy RGB i HSL tutaj: HSL to RGB color conversion

i napisałem prostą funkcję do obliczenia wartości RGB za pomocą funkcji konwersji z odpowiedzi powyżej:

// convert a number to a color using hsl 
function numberToColorHsl(i) { 
    // as the function expects a value between 0 and 1, and red = 0° and green = 120° 
    // we convert the input to the appropriate hue value 
    var hue = i * 1.2/360; 
    // we convert hsl to rgb (saturation 100%, lightness 50%) 
    var rgb = hslToRgb(hue, 1, .5); 
    // we format to css value and return 
    return 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')'; 
} 

And I utwórz skrzypce wykazać Różnice między metodą HSL oraz metodę RGB: http://jsfiddle.net/rE6Rk/1/

aktualizacji bardziej wszechstronna wersja:

Jeśli nie chcesz pracować z zakresem od czerwonego do zielonego, możesz nieco dostosować powyższą metodę. Wartość określająca rzeczywisty kolor reprezentacji hsl to hue, więc jest to ta, którą musimy obliczyć.

Jeśli zdefiniować zakres swojego odcienia poprzez dostarczanie wartości 0 i 1 jako parametrów, obliczanie wartości odcienia staje podstawowej matematyki. Spójrz na zaktualizowaną metodę:

function percentageToHsl(percentage, hue0, hue1) { 
    var hue = (percentage * (hue1 - hue0)) + hue0; 
    return 'hsl(' + hue + ', 100%, 50%)'; 
} 

Jak widać zmieniłem trochę API. Parametry są następujące:

• percentage: wartość między 0 a 1
• hue0: wartość odcienia koloru chcesz uzyskać, gdy percentage jest 0
• hue1: wartość odcień kolor chcesz uzyskać, gdy percentage jest 1

Ponadto, nie ma już potrzeby, aby obliczyć wartość RGB, modern browsers obsługują wartości HSL jak jest.

Więc teraz można użyć metody następująco:

// green(120) to red(0) 
color = percentageToHsl(perc, 120, 0); 

// blue(225) to pink(315) 
color = percentageToHsl(perc, 225, 315); 

// blue (225) to yellow(45 + 360) 
color = percentageToHsl(perc, 225, 405); 

Więc jeśli chcesz iść w prawo, trzeba dokonać hue0 < hue1. Jeśli chcesz iść w lewo, musisz ustawić hue0> hue1. A ponieważ są to stopnie, możesz po prostu dodać lub odjąć 360, aby wymusić kierunek. Możesz nawet użyć tej techniki do wielokrotnego owinięcia kółka odcień.

Utworzyłem nowy skrzypce wykazać: https://jsfiddle.net/r438s65s/

Answer 2

To tylko prosta matematyka;)

Red = 255 - (255 * (Number/100)) 
Green = 255 * (Number/100) 
Blue = 0 

To wszystko.

Answer 3

Odpowiedź przez Pevara jest wielki. Dostosowałem jego jsfiddle do moich potrzeb, i może jest to przydatne także dla innych: http://jsfiddle.net/rE6Rk/8/

Pozwala to na nierównomierną dystrybucję kolorów. W moim przypadku chciałem, aby wszystko poniżej 0,5 (50) było czerwone. A 0,75 będzie w środku między czerwonym a zielonym. Zamiast więc pracować z twardymi ramkami 0 i 1, można je przesuwać.

zmienia się w funkcji numberToColorHsl (wyłącznie): * I jest zmiennoprzecinkowy 0-1 zamiast int 0-100 * Dodatkowe parametry min/max

/** 
* Convert a number to a color using hsl, with range definition. 
* Example: if min/max are 0/1, and i is 0.75, the color is closer to green. 
* Example: if min/max are 0.5/1, and i is 0.75, the color is in the middle between red and green. 
* @param i (floating point, range 0 to 1) 
* param min (floating point, range 0 to 1, all i at and below this is red) 
* param max (floating point, range 0 to 1, all i at and above this is green) 
*/ 
function numberToColorHsl(i, min, max) { 
    var ratio = i; 
    if (min> 0 || max < 1) { 
     if (i < min) { 
      ratio = 0; 
     } else if (i > max) { 
      ratio = 1; 
     } else { 
      var range = max - min; 
      ratio = (i-min)/range; 
     } 
    } 

    // as the function expects a value between 0 and 1, and red = 0° and green = 120° 
    // we convert the input to the appropriate hue value 
    var hue = ratio * 1.2/3.60; 
    //if (minMaxFactor!=1) hue /= minMaxFactor; 
    //console.log(hue); 

    // we convert hsl to rgb (saturation 100%, lightness 50%) 
    var rgb = hslToRgb(hue, 1, .5); 
    // we format to css value and return 
    return 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')'; 
} 

Wizualnie wyjaśnić to lepsze niż słowa.