Generare una serie di colori tra due colori

Dato un colore iniziale e un colore finale, è possibile generare algoritmicamente una gamma di colori tra loro? Ad esempio, date le tonalità chiare e scure del blu / grigio all'inizio e alla fine dell'immagine in basso, come posso generare le tonalità intermedie?

Una possibile soluzione che sto prendendo in considerazione è quella di creare un gradiente dai due colori e quindi campionare il colore in punti equidistanti lungo quel gradiente. È probabile che sia l'approccio migliore?

Questo si chiama interpolazione del colore . È ciò che fanno i gradienti sotto il cofano. Puoi farlo usando una varietà di mezzi e metodi, e esattamente come i risultati sono interpolati dipende dal metodo.

Lo faccio comunemente per progetti Web che utilizzano JavaScript in modo da poter cambiare i colori in modo dinamico, come in questo visualizzatore di musica . Un'implementazione JavaScript che ha un metodo molto semplice di interpolazione lineare usando RGB, presa dall'esempio sopra, è la seguente:

Dimostrazione dal vivo

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

Che viene utilizzato in questo modo e restituisce una matrice di colori interpolati:

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

Puoi anche trovare estensioni di PhotoShop (e probabilmente altri programmi) per eseguire l'interpolazione del colore. Tuttavia, potresti voler controllare per assicurarti che il metodo di interpolazione sia lo stesso che desideri, poiché puoi usare qualsiasi funzione per interpolare in base.

Dai un'occhiata a questa risposta. Come rendere un determinato colore un po 'più scuro o più chiaro?

Dove si prendono semplicemente i valori separati di ciascun componente RGB e si dividono i valori.

Ma abbiamo un problema, non esiste un solo modo per effettuare una transizione cromatica.

Il primo approccio ti darà il percorso più breve (1) ma probabilmente quel percorso non è quello che ti serve.

Ciò è influenzato anche dal modello di colore o dalla logica. Ad esempio, nel modello di colore Lab * il rosso e il verde sono colori complementari, quindi il percorso breve su quel modello passerà attraverso un grigio neutro (3).

Se hai solo bisogno di sfumature di un colore, l'altra risposta è adatta.

Usa una fusione in Illustrator in RGB o CMYK:

• crea 2 forme ognuna con il colore iniziale e finale (uno grigio e uno nero in questo esempio, ma scegli quello che ti serve)
• vai a Object → Blend → Blend Optionse digita quanti ne Specified stepshai bisogno tra (20 nel mio esempio di seguito)
• seleziona i tuoi due oggetti e scegli Object → Blend → Make. Ciò genererà la fusione che è quindi possibile trasformare in singoli oggetti tramite Object → Expand. Quindi puoi vedere ogni oggetto intermedio con il suo codice colore.

Questa è un'aggiunta alle altre risposte.

Quando interpoli i colori in sRGB devi considerare che i valori RGB non sono lineari nell'intensità della luce ma lineari nell'intensità della luce percepita dall'uomo. Ciò semplifica il salvataggio dei valori, ma per varie operazioni di colore è necessario passare allo spazio colore lineare.

La percezione umana dell'intensità della luce è secondo una legge di potere, quindi con

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

può essere usato per trasformare tra i due. Questo utilizza un valore gamma di 2,2 che è il valore per sRGB. Per ulteriori informazioni su questo vedi questo articolo di Wikipedia.

Un'analisi dettagliata di questo problema ed esempi di implementazioni errate sono disponibili qui . Uno dei quali è un gradiente di colore che utilizza l'interpolazione lineare e sRGB.

Il gradiente di Photoshop (o equivalentemente "Miscela" in Ai) è già presentato come un modo per ottenere una transizione di colore lineare tra i colori iniziale e finale. Come possiamo ottenere qualcosa di non lineare (un percorso di transizione curvo) senza programmare un codice di scripting?

Una soluzione consiste nel modificare il percorso di transizione del gradiente regolando i livelli, i metodi di fusione o entrambi. Questo produce davvero una trasformazione continua dal colore iniziale al colore finale, se i livelli di modifica hanno una maschera di livello che è continua e rende l'affetto = Zero all'inizio e alla fine.

Ecco una svolta piuttosto complessa. Il livello "Solo bersaglio" ha il gradiente e il livello "Modificatore" produce uno spostamento continuo del colore fondendo il modo "Colore" Per rendere tutto contorto, il modificatore stesso è un gradiente.

Più torsione è generata da un livello di regolazione "Curve" che aggiunge contrasto. Ha la stessa maschera di livello del modificatore, ma non è obbligatorio. Qualsiasi maschera è ok, se è continua e nera all'inizio e alla fine.

Esistono alcune modalità di fusione e curve continue che causano un salto improvviso. Uno di questi è "Hue". Un'altra possibilità per rovinare l'effetto è "nessun cambiamento", un'area di colore costante visibile causata dal ritaglio a tutti o zero 255. Non ho testato né calcolato, quanto in pratica aiuta a utilizzare la modalità RGB a 48 bit / pixel. Forse no, perché abbiamo ancora solo 24 bit / pixel sullo schermo.