Calculer les valeurs de couleur du vert au rouge

En effet, vous pourriez aller pour la solution fournie par @KamilT. Inconvénient de cette méthode (omi), c'est que les couleurs de la moyenne (autour de 50) obtenir brunâtre et pas très agréable par rapport à votre entière rouge et vert.

Je pense qu'il serait beaucoup plus agréable à suivre le spectre de couleurs, et passant au-dessus de l'orange et le jaune, à la place de ce vilain brunâtre.

Cela peut facilement atteint en travaillant avec HSL valeurs plutôt que les valeurs RVB. Si vous définissez la valeur de la Teinte en fonction de votre nombre entre 0 et 100 pour une valeur comprise entre 0°(rouge) et 120°(vert), et de garder votre Saturation à 100% et votre Légèreté à 50%, vous devriez obtenir de belles couleurs vives.

J'ai trouvé un moyen pour convertir entre rgb et hsl ici: LGV à la conversion des couleurs RVB

Et j'ai écrit une fonction simple pour calculer votre valeur rvb à l'aide de la fonction de conversion à partir de la réponse ci-dessus:

//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] + ')'; 
}

Et j'ai mis en place un violon pour démontrer les diffrences entre la LGV méthode et la méthode RVB: http://jsfiddle.net/rE6Rk/1/

mise à jour plus polyvalent, version:

Si vous ne voulez pas travailler avec une gamme de rouge à vert, légèrement adapter la méthode ci-dessus. La valeur qui détermine la couleur réelle dans un hsl représentation est la hue, alors que c'est celui que nous aurons besoin de calculer.

Si vous définissez la portée de votre teinte, en fournissant les 0 et les 1 de la valeur en tant que paramètres, le calcul de la valeur de la teinte devient de base en mathématiques. Jetez un oeil à la mise à jour de la méthode:

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

Comme vous pouvez le voir j'ai changé l'API un peu. Les paramètres sont les suivants:

• percentage: une valeur entre 0 et 1
• hue0: la valeur de la teinte de la couleur que vous souhaitez obtenir lors de la percentage est 0
• hue1: la valeur de la teinte de la couleur que vous souhaitez obtenir lors de la percentage est de 1

Aussi, il n'est plus besoin de calculer la valeur rvb, les navigateurs modernes soutien lgv valeurs.

Alors maintenant, vous pouvez utiliser la méthode comme suit:

//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);

Donc, si vous voulez aller dans le sens des aiguilles que vous avez à faire hue0 < hue1. Si vous voulez aller dans le sens antihoraire, vous avez à faire hue0 > hue1. Et comme elles sont en degrés, vous pouvez simplement ajouter ou de soustraire 360 pour forcer la direction. Vous pouvez même utiliser cette technique pour s'enrouler autour de la teinte cercle plusieurs fois.

J'ai créé un nouveau violon à démontrer: https://jsfiddle.net/r438s65s/

OriginalL'auteur Pevara

C'est juste mathématiques simples 😉

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

C'est tout.

OriginalL'auteur Kamil T