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

15

É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?

entrez la description de l'image ici

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?

Ben Packard
la source
2
Jetez un oeil à ceci: graphicdesign.stackexchange.com/questions/75417/… Pourrait alors être un doublon?
Rafael
Un autre bon article sur le sujet: vis4.net/blog/posts/avoid-equidistant-hsv-colors
thorn
Ceci est très proche d'être un doublon de cette question de débordement de pile
Dawood dit réintégrer Monica le

Réponses:

13

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.

Zach Saucier
la source
2
Zach ... tu es tellement un geek ... que le visualiseur de musique est super cool!
Rafael
@Rafael J'en ai fait quelques autres que vous aimerez peut-être aussi :)
Zach Saucier
Merci. Color Interpolationétait ce dont j'avais besoin. J'ai trouvé quelques implémentations Swift ici - stackoverflow.com/questions/22868182/uico…
Ben Packard
2
Le lien ci-dessus est rompu, mais le message peut être trouvé ici pour les futurs lecteurs: Transition UIColor basée sur la valeur de la progression
Zach Saucier
23

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.

entrez la description de l'image ici

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.

Rafael
la source
5
J'aime le graphique montrant les différentes méthodes d'interpolation
Zach Saucier
Je suppose que cela signifie qu'il doit y avoir un moyen de codifier la stratégie de chemin.
Bao Thien Ngo
10

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.

mélange

Lucian
la source
5

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.

henje
la source
C'est une méthode d'interpolation des valeurs sRGB, mais ce qu'une personne doit faire dépend de l'effet qu'elle veut
Zach Saucier
C'est vrai, mais l'interpolation dans l'espace linéaire est ce qui se passe avec la lumière dans la vraie vie. C'est donc le plus naturel de le faire.
henje
1
@ZachSaucier le nombre de fois les gens ont fait une interpolation ou le mélange dans sRGB de l' intention spécifique est oh-so-minuscule par rapport au nombre de fois les gens ont fait de l' ignorance ou la paresse (soit pensant qu'ils sont en train de faire en RGB, ou penser (à juste titre ou non) que la différence est sans importance).
Hobbs
1

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.

Transition

user287001
la source