İki renk arasında bir dizi renk oluşturma

Bir başlangıç ​​rengi ve bir son renk verildiğinde, aralarında algoritmik olarak bir renk aralığı oluşturmak mümkün müdür? Örneğin, aşağıdaki görüntünün başlangıcında ve sonunda mavi / gri açık ve koyu tonları göz önüne alındığında, ara gölgeleri nasıl oluşturabilirim?

Düşündüğüm olası bir çözüm, iki renkten bir degrade oluşturmak ve daha sonra bu degrade boyunca eşit mesafede noktalarda rengi örneklemektir. Bunun en iyi yaklaşım olması muhtemel mi?

Buna renk enterpolasyonu denir . Degradelerin kaputun altında yaptığı şey budur. Bunu çeşitli araçlar ve yöntemler kullanarak yapabilirsiniz ve sonuçların tam olarak nasıl enterpolasyon yapıldığı yönteme bağlıdır.

Bunu genellikle JavaScript kullanan web projeleri için yapıyorum, böylece bu müzik görselleştiricide olduğu gibi renkleri dinamik olarak değiştirebiliyorum . Yukarıdaki örnekten alınan, RGB kullanarak çok basit bir doğrusal enterpolasyon yöntemine sahip bir JavaScript uygulaması aşağıdaki gibidir:

Canlı demo

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

Bu şekilde kullanılır ve enterpolasyonlu renklerin bir dizisini döndürür:

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

Renk enterpolasyonu yapmak için PhotoShop (ve muhtemelen diğer program) uzantılarını da bulabilirsiniz. Bununla birlikte, enterpolasyon yönteminin arzu ettiğinizle aynı olduğundan emin olmak isteyebilirsiniz, çünkü enterpolasyona dayalı herhangi bir işlevi kullanabilirsiniz.

Bu cevaba bir göz atın. Belirli bir renk nasıl daha koyu veya daha açık hale getirilir?

Her bir RGB bileşeninin ayrılmış değerlerini alıp değerleri böldüğünüz yer.

Ancak bir sorunumuz var, renk geçişi yapmanın tek bir yolu yok.

İlk yaklaşım size en kısa rotayı verecektir (1), ancak muhtemelen bu rota ihtiyacınız olan şey değildir.

Bu, renk modeli veya mantıktan da etkilenir. Örneğin, Lab * renk modelinde Kırmızı ve Yeşil tamamlayıcı renklerdir, bu nedenle bu modeldeki kısa rota nötr griye geçecektir (3).

Sadece bir rengin tonlarına ihtiyacınız varsa, diğer cevap uygun bir cevaptır.

Illustrator'da RGB veya CMYK'da bir karışım kullanın:

• her biri başlangıç ve bitiş rengiyle 2 şekil oluşturun (bu örnekte bir gri ve bir siyah, ancak ihtiyacınız olanı seçin)
• gidin Object → Blend → Blend Optionsve kaç yazın Specified steps(aşağıda benim örnekte 20) arasında ihtiyaç
• iki nesnenizi seçin ve seçin Object → Blend → Make. Bu , daha sonra tek tek nesnelere dönüştürebileceğiniz karışımı oluşturur Object → Expand. Sonra her ara nesneyi kendi renk koduyla görebilirsiniz.

Bu diğer cevaplara bir ektir.

SRGB'de renkleri enterpole ettiğinizde, RGB değerlerinin ışık yoğunluğunda doğrusal değil, insan tarafından algılanan ışık yoğunluğunda doğrusal olduğunu göz önünde bulundurmalısınız. Bu, değerlerin kaydedilmesini kolaylaştırır, ancak çeşitli renk işlemleri için doğrusal renk uzayına gitmek gerekir.

İnsanların ışık yoğunluğu algısı bir güç yasasına göre, yani

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

ikisi arasında dönüşüm için kullanılabilir. Bu, sRGB için değer olan 2,2'lik bir gama değerini kullanır. Bununla ilgili daha fazla bilgi için bu Wikipedia makalesine bakın.

Bu sorunun ayrıntılı bir analizi ve yanlış uygulama örnekleri burada bulunabilir . Bunlardan biri doğrusal ve sRGB enterpolasyonu kullanan bir renk gradyanıdır.

Photoshop'un gradyanı (veya Ai'de eşdeğer olarak "Karışım") başlangıç ​​ve bitiş renkleri arasında doğrusal bir renk geçişi elde etmenin bir yolu olarak zaten sunulmuştur. Bazı kodlama kodlarını programlamadan doğrusal olmayan bir şeyi (kavisli geçiş yolu) nasıl elde edebiliriz?

Bir çözüm, katmanları veya karıştırma modlarını veya her ikisini birden ayarlayarak degrade geçiş yolunu değiştirmektir. Bu, eğer değiştirici katmanlar sürekli bir katman maskesine sahipse ve başlangıçta ve sonunda şefkat = Sıfır yaparsa, başlangıç ​​renginden bitiş rengine sürekli bir dönüşüm üretir.

İşte oldukça karmaşık bir bükülme. "Yalnız Hedef" katmanında gradyan vardır ve "Modifier" katmanı, "Color" modunu karıştırarak sürekli bir renk kayması üretir.

Kontrast ekleyen bir ayar katmanı olan "Curves" tarafından daha fazla bükülme oluşur. Değiştirici ile aynı katman maskesine sahiptir, ancak bu zorunlu değildir. Başlangıçta ve sonunda sürekli ve siyahsa, herhangi bir maske tamamdır.

Ani sıçramaya neden olan sürekli olmayan karıştırma modları ve eğriler vardır. Bunlardan biri "Ton". Etkiyi bozmak için bir başka olasılık, "değişiklik yok", sıfırın tamamına veya 255'in tümüne kırpmanın neden olduğu görünür bir sabit renk alanıdır. Belki de hiç, çünkü hala ekranda sadece 24 bit / piksel var.