Menghasilkan serangkaian warna antara dua warna

Diberi warna awal dan akhir, apakah mungkin secara algoritmik menghasilkan serangkaian warna di antara mereka? Misalnya, mengingat warna terang dan gelap biru / abu-abu pada awal dan akhir gambar di bawah, bagaimana saya dapat menghasilkan nuansa menengah?

Salah satu solusi yang mungkin saya pertimbangkan adalah membuat gradien dari dua warna dan kemudian sampel warna pada titik yang sama sepanjang gradien itu. Apakah itu mungkin pendekatan terbaik?

Ini disebut interpolasi warna . Inilah yang dilakukan gradien di bawah tenda. Anda dapat melakukannya dengan menggunakan berbagai cara dan metode, dan bagaimana hasil interpolasi tergantung pada metode.

Saya biasanya melakukan ini untuk proyek web menggunakan JavaScript sehingga saya dapat mengubah warna secara dinamis, seperti di visualizer musik ini . Implementasi JavaScript yang memiliki metode interpolasi linier yang sangat mudah menggunakan RGB, ditarik dari contoh di atas, adalah sebagai berikut:

Demo langsung

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

Yang digunakan seperti itu dan mengembalikan array warna yang diinterpolasi:

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

Anda juga dapat menemukan ekstensi PhotoShop (dan kemungkinan program lain) untuk melakukan interpolasi warna. Namun, Anda mungkin ingin memeriksa untuk memastikan metode interpolasi adalah sama dengan yang Anda inginkan, karena Anda dapat menggunakan fungsi apa saja untuk interpolasi berdasarkan.

Lihatlah jawaban ini. Bagaimana membuat warna yang diberikan sedikit lebih gelap atau lebih terang?

Di mana Anda hanya mengambil nilai-nilai yang terpisah dari masing-masing komponen RGB dan membagi nilainya.

Tapi kami punya satu masalah, tidak hanya ada satu cara untuk melakukan transisi warna.

Pendekatan pertama akan memberi Anda rute terpendek (1) tetapi mungkin rute itu bukan yang Anda butuhkan.

Ini juga dipengaruhi oleh model warna atau logika. Misalnya, dalam model warna Lab * Merah dan Hijau adalah warna yang saling melengkapi, sehingga rute pendek pada model itu akan melewati abu-abu netral (3).

Jika Anda hanya membutuhkan corak warna, jawaban yang lain adalah yang cocok.

Gunakan campuran dalam Illustrator di RGB atau CMYK:

• buat 2 bentuk masing-masing dengan warna awal dan akhir (satu abu-abu dan satu hitam dalam contoh ini, tetapi pilih apa pun yang Anda butuhkan)
• pergi ke Object → Blend → Blend Optionsdan ketik berapa banyak yang Specified stepsAnda butuhkan di antara (20 dalam contoh saya di bawah)
• pilih dua objek Anda dan pilih Object → Blend → Make. Ini akan menghasilkan campuran yang kemudian bisa Anda ubah menjadi objek individual Object → Expand. Kemudian Anda dapat melihat setiap objek perantara dengan kode warnanya sendiri.

Ini merupakan tambahan untuk jawaban lainnya.

Ketika Anda menginterpolasi warna dalam sRGB Anda harus mempertimbangkan bahwa nilai-nilai RGB tidak linear dalam intensitas cahaya tetapi linear dalam intensitas cahaya yang dirasakan manusia. Hal ini membuat penghematan nilai lebih mudah, tetapi untuk berbagai operasi warna perlu pergi ke ruang warna linier.

Persepsi manusia tentang intensitas cahaya sesuai dengan hukum kekuatan, demikian pula dengan

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

dapat digunakan untuk mentransformasikan keduanya. Ini menggunakan nilai gamma 2.2 yang merupakan nilai untuk sRGB. Untuk informasi lebih lanjut tentang ini lihat ini artikel Wikipedia.

Analisis terperinci tentang masalah ini dan contoh implementasi yang salah dapat ditemukan di sini . Salah satunya adalah gradien warna menggunakan interpolasi linier dan sRGB.

Gradien Photoshop (atau "Blend" dalam Ai) sudah disajikan sebagai cara untuk mendapatkan transisi warna linier antara warna awal dan akhir. Bagaimana cara mendapatkan sesuatu yang nonlinear (jalur transisi melengkung) tanpa memprogram beberapa kode skrip?

Salah satu solusinya adalah memodifikasi jalur transisi gradien dengan menyesuaikan layer atau blending mode atau keduanya. Ini benar-benar menghasilkan transformasi kontinu dari warna awal ke warna akhir, jika lapisan pengubah memiliki masker lapisan yang kontinu dan membuat afeksi = Nol di awal dan di akhir.

Ini adalah twist yang cukup kompleks. Layer "Target alone" memiliki gradient dan layer "Modifier" menghasilkan perubahan warna terus menerus dengan blending mode "Color" Untuk membuat semua bengkok, modifier itu sendiri adalah gradien.

Lebih banyak twist dihasilkan oleh lapisan penyesuaian "Kurva" yang menambah kontras. Ini memiliki layer mask yang sama dengan Pengubah, tapi itu tidak wajib. Topeng apa pun ok, jika terus menerus dan hitam di awal dan di akhir.

Ada beberapa mode pencampuran yang tidak berkesinambungan dan kurva yang menyebabkan lompatan tiba-tiba. Salah satunya adalah "Hue". Kemungkinan lain untuk merusak efek adalah "tidak ada perubahan", area warna konstan terlihat yang disebabkan oleh kliping ke semua nol atau semua 255. Saya belum menguji atau menghitung, seberapa banyak dalam praktiknya membantu menggunakan mode RGB 48 bit / pixel. Mungkin tidak sama sekali, karena kami hanya memiliki layar 24 bit / piksel.