Menghasilkan serangkaian warna antara dua warna


15

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?

masukkan deskripsi gambar di sini

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?


2
Lihatlah ini: graphicdesign.stackexchange.com/questions/75417/… Lalu bisa menjadi ducplicate?
Rafael

Artikel bagus lain tentang topik ini: vis4.net/blog/posts/avoid-equidistant-hsv-colors
duri

Ini sangat dekat dengan menjadi duplikat dari pertanyaan Stack Overflow ini
Dawood mengatakan mengembalikan Monica

Jawaban:


13

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.


2
Zach ... Anda benar-benar aneh ... sehingga visualisator musik sangat keren!
Rafael

@ Rafael Saya membuat pasangan lain yang mungkin Anda sukai :)
Zach Saucier

Terima kasih. Color Interpolationitulah yang saya butuhkan. Saya menemukan beberapa implementasi Swift di sini - stackoverflow.com/questions/22868182/uico…
Ben Packard

2
Tautan di atas rusak, tetapi pos dapat ditemukan di sini untuk pembaca di masa mendatang: Transisi UIColor berdasarkan nilai kemajuan
Zach Saucier

23

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.

masukkan deskripsi gambar di sini

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.


5
Saya suka grafik yang menunjukkan berbagai metode interpolasi
Zach Saucier

Saya kira ini berarti harus ada cara untuk menyusun strategi jalan.
Bao Thien Ngo

10

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.

pencampuran


5

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.


Itu salah satu metode interpolasi nilai sRGB, tetapi apa yang harus dilakukan seseorang tergantung pada efek yang mereka inginkan
Zach Saucier

Itu benar, tetapi interpolasi dalam ruang linear adalah apa yang terjadi dengan cahaya dalam kehidupan nyata. Jadi itu yang paling alami untuk melakukannya.
henje

1
@ZachSaucier jumlah kali orang memiliki interpolasi dilakukan atau pencampuran di sRGB dari spesifik maksud adalah oh-begitu-kecil dibandingkan dengan jumlah kali orang telah melakukannya dari ketidaktahuan atau kemalasan (baik berpikir mereka sedang melakukannya di RGB, atau berpikir (benar atau tidak) bahwa perbedaannya tidak penting).
hobbs

1

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.

Transisi

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.