Generando una serie de colores entre dos colores.

Dado un color inicial y un color final, ¿es posible generar algorítmicamente una gama de colores entre ellos? Por ejemplo, dados los tonos claros y oscuros de azul / gris al comienzo y al final de la imagen a continuación, ¿cómo podría generar los tonos intermedios?

Una posible solución que estoy considerando es crear un gradiente a partir de los dos colores y luego muestrear el color en puntos equidistantes a lo largo de ese gradiente. ¿Es probable que sea el mejor enfoque?

Esto se llama interpolación de color . Es lo que hacen los gradientes debajo del capó. Puede hacerlo utilizando una variedad de medios y métodos, y exactamente cómo se interpolan los resultados depende del método.

Comúnmente hago esto para proyectos web que usan JavaScript para poder cambiar los colores dinámicamente, como en este visualizador de música . Una implementación de JavaScript que tiene un método muy directo de interpolación lineal usando RGB, extraído del ejemplo anterior, es el siguiente:

Demo en 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;
}

Que se usa así y devuelve una matriz de colores interpolados:

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

También puede encontrar extensiones de PhotoShop (y probablemente otro programa) para realizar interpolación de color. Sin embargo, es posible que desee verificar para asegurarse de que el método de interpolación es el mismo que desea, ya que puede utilizar cualquier función para interpolar en función de.

Echa un vistazo a esta respuesta. ¿Cómo hacer que un color determinado sea un poco más oscuro o más claro?

Donde simplemente toma los valores separados de cada componente RGB y divide los valores.

Pero tenemos un problema, no hay una sola forma de hacer una transición de color.

El primer enfoque le dará la ruta más corta (1) pero probablemente esa ruta no sea la que necesita.

Esto también se ve afectado por el modelo de color o la lógica. Por ejemplo, en el modelo de color Lab *, el rojo y el verde son colores complementarios, por lo que la ruta corta en ese modelo pasará a través de un gris neutro (3).

Si solo necesita tonos de un color, la otra respuesta es adecuada.

Use una mezcla en Illustrator en RGB o CMYK:

• cree 2 formas cada una con el color inicial y final (uno gris y otro negro en este ejemplo, pero elija lo que necesite)
• vaya Object → Blend → Blend Optionsy escriba cuántos Specified stepsnecesita entre (20 en mi ejemplo a continuación)
• selecciona tus dos objetos y elige Object → Blend → Make. Esto generará la mezcla que luego puede transformar en objetos individuales a través de Object → Expand. Luego puede ver cada objeto intermedio con su propio código de color.

Esta es una adición a las otras respuestas.

Cuando interpola colores en sRGB, debe tener en cuenta que los valores RGB no son lineales en intensidad de luz sino lineales en intensidad de luz percibida por el ser humano. Esto hace que guardar valores sea más fácil, pero para varias operaciones de color es necesario ir al espacio de color lineal.

La percepción humana de la intensidad de la luz está de acuerdo con una ley de poder, así que con

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

se puede usar para transformar entre los dos. Utiliza un valor gamma de 2.2, que es el valor para sRGB. Para más información sobre esto, vea este artículo de Wikipedia.

Un análisis detallado de este problema y ejemplos de implementaciones incorrectas se pueden encontrar aquí . Uno de los cuales es un gradiente de color usando interpolación lineal y sRGB.

El degradado de Photoshop (o "Mezcla" equivalente en Ai) ya se presenta como una forma de obtener una transición de color lineal entre los colores inicial y final. ¿Cómo obtenemos algo no lineal (una ruta de transición curva) sin programar algún código de script?

Una solución es modificar la ruta de transición del gradiente ajustando capas o modos de fusión o ambos. Esto realmente produce una transformación continua desde el color inicial hasta el color final, si las capas de modificación tienen una máscara de capa que es continua y hace que el afecto = Cero al principio y al final.

Aquí hay un giro bastante complejo. La capa "Destino solo" tiene el gradiente y la capa "Modificador" produce un cambio continuo de color mediante el modo de fusión "Color".

Se genera más giro mediante una capa de ajuste "Curvas" que agrega contraste. Tiene la misma máscara de capa que el Modificador, pero eso no es obligatorio. Cualquier máscara está bien, si es continua y negra al principio y al final.

Existen algunos modos y curvas de mezcla discontinua que provocan un salto brusco. Uno de esos es "Hue". Otra posibilidad de estropear el efecto es "sin cambio", un área de color constante visible causada por el recorte a cero o 255. No he probado ni calculado cuánto ayuda en la práctica a utilizar el modo RGB de 48 bits / píxel. Tal vez no, porque todavía tenemos solo 24 bits / píxel en pantalla.