La détermination d'une règle: concernent la valeur entière de la couleur #RGB

Question

Je voudrais déterminer une couleur de fond C selon un entier X (nombre de votes positifs)

OK, je pouvais faire

if(x==0) c = '#000'; 
else if(x > 0 && x < 5) c = '#001' 
else if(X<=5 <= 20) c = '#002'; 
//and so on... 

Mais, comment puis-je faire cela pour le rendre graduel? Je veux dire de 0 à 500 voix -> 500 tons de couleurs bleues? (si je ne me trompe pas ses deux chiffres possibles pour HEX (sinon, 15 * 15 xD))

Des idées?

Answer 1

Puisque vous êtes à la recherche d'idées, en voici une que personne d'autre ne vous proposera. Tout d'abord, allez chercher les formules "Catmull-Rom Spline". Il se résume à un truc de multiplication de matrice très simple qui vous donne une formule pour calculer les courbes en fonction d'un ensemble de points de contrôle. OK, alors maintenant que vous savez tout sur les splines Catmull-Rom, vous pouvez écrire du code pour faire une courbe dans 3-espace. Eh bien, qu'est-ce que le RVB sinon un espace en trois dimensions? Vous choisissez donc quelques bons points de contrôle des couleurs (couleurs RVB), puis vous utilisez votre implémentation pratique de Catmull-Rom pour générer une courbe paramétrique à travers toutes ces couleurs, avec autant de couleurs que vous le souhaitez. La chose intéressante au sujet des progressions de couleur sera qu'elles sont vraiment "lisses" à travers les transitions.

Answer 2

Je probablement utiliser quelque chose comme:

var blueness = x/2; 
if (blueness > 255) blueness = 255; 
rgb(0, 0, blueness); 

mais vous pouvez utiliser this sprintf implementation et de l'utiliser comme vous le feriez dans une autre langue pour convertir en hexadécimal.

Answer 3

Ajoutez raphaeljs sur votre page et collez les fonctions estimateColorForValue() et toHex() quelque part dans votre code. estimateColorForValue(hue, value, darkestValue, brightestValue) calcule une couleur pour une certaine valeur, interpolant la couleur en voyant où est dans la plage [darkestValue-brightestValue]value est. hue est dans la plage [0-1]: 0.1 pour orange-browny, 0.4 pour le vert, 0.8 pour le rose, et beaucoup plus de couleurs entre les deux. De petits changements de teinte modifient radicalement la couleur visuelle.

Par exemple: estimateColorForValue(.1, 15, 1, 20), peut être expliqué comme, pour les données allant de 1 à 20, calculer la couleur pour la valeur 15, dans l'espace orangé.

toHex(estimateColorForValue(.1, 15, 1, 20)) ==> "#cf8415"

code:

<script src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael.js"></script> 

<script> 

function toHex(hsb) { 
    return Raphael.hsb2rgb(hsb.h, hsb.s, hsb.b).hex; 
} 

function estimateColorForValue(hue, value, darkestValue, brightestValue) { 
    // Constants to determine saturation and brightness 
    var darkBrightness = 0.6; 
    var brightBrightness = 1; 
    var darkSaturation = 0.3; 
    var brightSaturation = 1; 

    // Compute saturation and brightness: 
    var gradient = (value - darkestValue)/(brightestValue - darkestValue); 
    var saturation = darkSaturation + gradient * (brightSaturation - darkSaturation); 
    var brightness = darkBrightness + gradient * (brightBrightness - darkBrightness); 

    return {h: hue, s:saturation, b:brightness}; 
} 
</script>