Génération d'une série de couleurs entre deux couleurs

Étant donné une couleur de début et une couleur de fin, est-il possible de générer algorithmiquement une gamme de couleurs entre elles? Par exemple, étant donné les nuances claires et sombres de bleu / gris au début et à la fin de l'image ci-dessous, comment puis-je générer les nuances intermédiaires?

Une solution possible que j'envisage est de créer un dégradé à partir des deux couleurs, puis d'échantillonner la couleur à des points équidistants le long de ce dégradé. Est-ce que ce sera probablement la meilleure approche?

C'est ce qu'on appelle l' interpolation des couleurs . C'est ce que font les dégradés sous le capot. Vous pouvez le faire en utilisant une variété de moyens et de méthodes, et la façon exacte dont les résultats sont interpolés dépend de la méthode.

Je le fais couramment pour les projets Web utilisant JavaScript afin de pouvoir changer les couleurs dynamiquement, comme dans ce visualiseur de musique . Une implémentation JavaScript qui a une méthode d'interpolation linéaire très simple utilisant RVB, tirée de l'exemple ci-dessus, est la suivante:

Démo en direct

// Returns a single rgb color interpolation between given rgb color
// based on the factor given; via https://codepen.io/njmcode/pen/axoyD?editors=0010
function interpolateColor(color1, color2, factor) {
    if (arguments.length < 3) { 
        factor = 0.5; 
    }
    var result = color1.slice();
    for (var i = 0; i < 3; i++) {
        result[i] = Math.round(result[i] + factor * (color2[i] - color1[i]));
    }
    return result;
};
// My function to interpolate between two colors completely, returning an array
function interpolateColors(color1, color2, steps) {
    var stepFactor = 1 / (steps - 1),
        interpolatedColorArray = [];

    color1 = color1.match(/\d+/g).map(Number);
    color2 = color2.match(/\d+/g).map(Number);

    for(var i = 0; i < steps; i++) {
        interpolatedColorArray.push(interpolateColor(color1, color2, stepFactor * i));
    }

    return interpolatedColorArray;
}

Qui est utilisé comme tel et retourne un tableau des couleurs interpolées:

var colorArray = interpolateColors("rgb(94, 79, 162)", "rgb(247, 148, 89)", 5);

Vous pouvez également trouver des extensions PhotoShop (et probablement d'autres programmes) pour effectuer l'interpolation des couleurs. Cependant, vous voudrez peut-être vérifier que la méthode d'interpolation est la même que celle que vous souhaitez, car vous pouvez utiliser n'importe quelle fonction pour interpoler en fonction.

Jetez un oeil à cette réponse. Comment rendre une couleur donnée un peu plus foncée ou plus claire?

Où vous prenez simplement les valeurs séparées de chaque composant RVB et divisez les valeurs.

Mais nous avons un problème, il n'y a pas qu'une seule façon de faire une transition de couleur.

La première approche vous donnera l'itinéraire le plus court (1) mais cet itinéraire n'est probablement pas ce dont vous avez besoin.

Ceci est également affecté par le modèle de couleur ou la logique. Par exemple, dans le modèle de couleur Lab *, le rouge et le vert sont des couleurs complémentaires, de sorte que l'itinéraire court sur ce modèle passera par un gris neutre (3).

Si vous n'avez besoin que de nuances de couleur, l'autre réponse est appropriée.

Utilisez un mélange dans Illustrator en RVB ou CMJN:

• créez 2 formes chacune avec la couleur de début et de fin (un gris et un noir dans cet exemple, mais choisissez ce dont vous avez besoin)
• allez Object → Blend → Blend Optionset saisissez le nombre dont Specified stepsvous avez besoin entre les deux (20 dans mon exemple ci-dessous)
• sélectionnez vos deux objets et choisissez Object → Blend → Make. Cela générera le mélange que vous pourrez ensuite transformer en objets individuels via Object → Expand. Ensuite, vous pouvez voir chaque objet intermédiaire avec son propre code couleur.

Ceci est un ajout aux autres réponses.

Lorsque vous interpolez des couleurs en sRGB, vous devez tenir compte du fait que les valeurs RVB ne sont pas linéaires en intensité lumineuse mais linéaires en intensité lumineuse perçue par l'homme. Cela facilite l'enregistrement des valeurs, mais pour diverses opérations de couleur, il est nécessaire d'aller dans l'espace colorimétrique linéaire.

La perception humaine de l'intensité lumineuse est fonction d'une loi de puissance, donc avec

linear = sRGB^2.2
sRGB = linear^(1/2.2)

peut être utilisé pour transformer entre les deux. Cela utilise une valeur gamma de 2,2 qui est la valeur pour sRGB. Pour plus d'informations à ce sujet, consultez cet article Wikipedia.

Une analyse détaillée de ce problème et des exemples d'implémentations incorrectes peuvent être trouvés ici . L'un d'eux est un dégradé de couleurs utilisant une interpolation linéaire et sRGB.

Le dégradé de Photoshop (ou de manière équivalente "Blend" en Ai) est déjà présenté comme un moyen d'obtenir une transition de couleur linéaire entre les couleurs de début et de fin. Comment obtenir quelque chose de non linéaire (un chemin de transition courbe) sans programmer du code de script?

Une solution consiste à modifier le chemin de transition du gradient en ajustant les calques ou les modes de fusion ou les deux. Cela produit vraiment une transformation continue de la couleur de début à la couleur de fin, si les calques de modification ont un masque de calque qui est continu et rend l'affection = zéro au début et à la fin.

Voici une tournure assez complexe. Le calque "Cible seule" a le dégradé et le calque "Modificateur" produit un décalage de couleur continu en mélangeant le mode "Couleur" Pour rendre tout sinueux, le modificateur lui-même est un dégradé.

Plus de torsion est générée par un calque de réglage "Courbes" qui ajoute du contraste. Il a le même masque de calque que le Modifier, mais ce n'est pas obligatoire. Tout masque est correct, s'il est continu et noir au début et à la fin.

Il existe des modes de fusion et des courbes discontinues qui provoquent un saut brusque. L'un d'eux est "Hue". Une autre possibilité de gâcher l'effet est "aucun changement", une zone de couleur constante visible causée par l'écrêtage à zéro ou à 255. Je n'ai ni testé ni calculé, combien cela aide en pratique d'utiliser le mode RVB 48 bits / pixel. Peut-être pas du tout, car nous n'avons encore que 24 bits / pixel à l'écran.