Comment obtenir des valeurs de couleur entre une couleur donnée et blanc?

Question

J'ai besoin de récupérer toutes les valeurs d'une couleur donnée et blanc. Par exemple, à partir de ce bleu (# 4A90E2) jusqu'à blanc (#ffffff), et obtenir des valeurs en fonction d'un certain nombre d'éléments. Si j'ai 6 éléments, j'aurais besoin de 6 couleurs étant un pourcentage représentant les 6 éléments que j'ai, chacun un peu plus léger que le précédent comme si vous divisiez le spectre entre les deux premières couleurs en six égales les pièces.

Des idées?

Nous vous remercions d'avance!

Answer 1

RGB to hex and hex to RGB

Dans ce post, la réponse montre des fonctions pour transformer RVB en hexadécimal et le dos. En utilisant ces fonctions, on peut faire la différence.

Supposons que nous avons # 007FFF, si nous voulons diviser en 2 étapes, d'abord, nous obtenons les valeurs numériques: R: 0, G: 127, Bleu: 255 maintenant nous obtenons la différence du blanc (255): 255-0 = 0, 255-127 = 128, 255-255 = 0

Ces chiffres peuvent maintenant être divisés en plusieurs étapes. En utilisant 2 étapes ce serait: 127.5, 64, 0

Maintenant, on peut itérer sur les nombres de base que nous avons transformés en RGB, et ajouter la valeur de pas à chaque itération pour un pas lisse.

function getColorSteps(color,steps) { 
    var rgb=hexToRgb(color); 
    var deltaRgb = { r: 255-(rgb.r/steps), g: 255-(rgb.g/steps), b:255-(rgb.b/steps) }; 
    colors = []; 
    for (var i = 1; i <= steps; i++) {  
     colors.push({r:rgb.r+deltaRgb.r*i,g:rgb.g+deltaRgb.g*i,b:rgb.b+deltaRgb.b*i}); 
    } 
    return colors; 
} 

Answer 2

Cette fonction fonctionne pour vous:

function getColors(color, n) { 
    // i'm supposing your color is a string in format '#XXXXXX' 
    const white = 0xFF; 
    const redComponent = parseInt("0x" + color[1] + color[2]); 
    const greenComponent = parseInt("0x" + color[3] + color[4]); 
    const blueComponent = parseInt("0x" + color[5] + color[6]); 

    var colors = []; 
    for(var i=1; i<=n; i++) { 
     var red = white - (i*(white-redComponent))/(n+1) + 0xf00; 
     var green = white - (i*(white-greenComponent))/(n+1) + 0xf00; 
     var blue = white - (i*(white-blueComponent))/(n+1) + 0xf00; 

     colors.push("#" + red.toString(16).substr(1,2) + green.toString(16).substr(1,2) + blue.toString(16).substr(1,2)); 
    } 
    return colors;    
}