Mengapa gradien warna ini jauh lebih menarik daripada yang lain?

24

Saya telah bermain-main dengan beberapa gradien di situs yang saya kembangkan, dan saya benar-benar tertarik pada psikologi atau makna lain di balik mengapa warna tertentu tampak lebih menarik daripada yang lain.

Inilah situsnya sekarang:

Login Situs Asli Hub utama situs asli

Gradien di sana terlihat cukup alami untuk desain. Tetapi jika saya mulai mencampur dan mencocokkan, saya berakhir dengan ini:

Upaya gradien yang berbeda Upaya gradien yang berbeda Upaya gradien yang berbeda

Saya tidak dapat menemukan gradien yang layak yang terlihat "alami". Saya bertanya-tanya apa psikologi di balik bagaimana kita memahami campuran warna ini ... apakah ada semacam aturan untuk menemukan warna yang cocok bersama dalam gradien? Saya membayangkan itu tergantung pada jenis perasaan yang Anda tuju. Saya menghargai setiap dan semua masukan!

color gradient color-theory Hayden McAfee
sumber
2
Ini murni pertanyaan subyektif, berdasarkan opini. Hanya karena Anda merasa beberapa gradien lebih baik, itu tidak berarti orang lain akan melakukannya.
Scott
6
Saya setuju dengan scott dan saya akan menjawab "Mengapa mereka terlihat bagus?" dengan "Siapa bilang mereka terlihat bagus?". Tapi itu subjektif. Komentar objektif saya adalah: Saya jamin Anda mengevaluasi warna dalam konteks seluruh layar yang mencakup batas jendela hijau muda. Warna ini saja akan merugikan Anda terhadap pilihan warna tertentu dalam viewport.
horatio
Poin yang sangat bagus di kulit browser dan warna biru. Saya akan kecewa jika saya memiliki perwakilan! Saya akan mulai melihat ini dalam mode layar penuh untuk mencegah bias itu.
Hayden McAfee
Sesuatu yang saya perhatikan hari ini. Semua gradien ini dimungkinkan dengan variasi pasangan LAB yang berbeda ketika berputar di sepanjang A. Untuk yang memiliki photoshop, buka color picker, centang radiobox adi sebelah kanan, dan mainkan dengan slider vertikal di palet. Sebagian besar (semua?) Kombinasi yang disebutkan di sini dapat ditemukan pada nilai Asumbu yang berbeda. Tidak yakin apakah ini memiliki dukungan ilmiah, tetapi itu hanya pengamatan.
Qix

Jawaban:

34

Perbedaan utama antara contoh awal dan percobaan Anda adalah bahwa dokumen asli tidak mencakup perubahan rona yang hampir sama drastisnya.

Roda warna warna jenuh

Mulai dari kuning keemasan ke magenta / merah muda sekitar 1/6 putaran roda warna. Sebaliknya, percobaan Anda (oranye-merah ke biru-ungu, biru-ungu ke kuning-hijau, dan cyan ke biru-ungu) semuanya lebih dari 1/4 putaran.

Banyak perubahan yang tidak dirasakan sebagai satu pergeseran dalam warna, melainkan sebagai perkembangan melalui berbagai warna. Karena gradien Anda agak terkondensasi di header Anda, itu muncul sebagai perubahan yang cukup tajam dan dapat menjelaskan mengapa itu tidak terasa "alami" bagi Anda.

Jika Anda ingin memiliki warna yang berbeda untuk blok warna "tujuan" utama Anda, pilih warna tetangga untuk awal gradien. Misalnya, untuk biru-ungu sebagai titik akhir, pilih biru tua atau magenta sebagai titik awal. Untuk warna kuning-hijau sebagai titik akhir, mulailah dengan warna hijau terang atau merah.

Tentu saja, ini masih akan memberi Anda "suasana hati" yang berbeda tergantung pada suasana hati warna yang terlibat - biru-ungu lebih dingin, warna yang lebih tenang daripada merah muda di aslinya. Tetapi setidaknya gradien akan terlihat sedikit lebih halus.

AmeliaBR
sumber
Saya menghitung rona offset untuk dua warna asli, dan keluar dengan nilai 96 (dari 360 kemungkinan nilai rona). Jadi sekitar seperempat putaran roda warna. Saya mulai menemukan nilai warna lain dengan perbedaan yang sama, dan tetap saja nilainya terasa aneh, meskipun lebih alami. Maafkan ketidakbiasaan saya dengan warna dan semacamnya, tetapi bisakah Anda memikirkan alasan khusus untuk ini? Mungkin mereka hanya warna suasana hati yang berbeda. i.imgur.com/utU1Oex.png
Hayden McAfee
Dalam hal ini perasaan saya adalah bahwa itu bukan tentang gradien melainkan tentang warna akhir; hijau terang cukup menggelegar. Bandingkan dengan versi dalam uji @ cockypup, yang merupakan warna hijau yang jauh lebih lembut (kurang jenuh / cerah). Jauh lebih sulit untuk mengukur suasana warna, tetapi secara umum warna yang kurang jenuh atau sekunder sedikit lebih tenang daripada merah dan hijau terang. Memang menjadi sangat subyektif, tetapi ada banyak sumber daya di luar sana, banyak dengan contoh kombinasi warna yang baik.
AmeliaBR
4
Inilah hal lain yang perlu dipertimbangkan: kontras. Kuning adalah warna paling cerah, memiliki kontras maksimal melawan hitam. Dalam contoh pertama Anda, kuning hanyalah bagian paling atas dari gradien Anda. Itu tidak menonjol. "Rasanya" hampir seperti highlight di atas. Ini membantu memindahkan mata dari bawah ke atas gradien. Dalam contoh ketiga Anda, kuning adalah warna utama dari gradien. Tubuh gradien menonjol. Bagian atas gradien, yang secara budaya dibaca sebagai nilai maksimal, terasa kurang penting daripada bodi. Mata berkelahi antara atas dan bawah. Ini mungkin membuatnya terlihat kurang alami.
cockypup
29

Karena Anda bertanya "mengapa mereka dipersepsikan berbeda", berikut adalah hal lain (sangat culun) untuk dipertimbangkan: pendaran yang dirasakan dari warna RGB. Ini sulit diterapkan, jadi ambil jawaban saya hampir seperti hal-hal sepele :)

Nilai luminescence warna menunjukkan bagaimana "menyala" Anda melihatnya. Jika warnanya bohlam, warna dengan luminesensi rendah akan dianggap redup (bohlam 40W), sedangkan warna dengan luminesensi tinggi akan dianggap sangat cerah (bohlam 100W).

Warna RGB sebenarnya ditampilkan menggunakan sedikit "bola lampu". Layar terdiri dari "bola lampu" kecil, tiga untuk setiap piksel: R (ed), G (reen) dan B (lue). Nilai spesifik R, G, dan B dari suatu warna menunjukkan seberapa terang setiap bola lampu kecil harus menyala untuk menciptakan ilusi warna itu. Misalnya warna oranye RGB (255, 100, 0) dibuat dengan memutar bola merah ke potensi maksimumnya (255), menjadikan bola hijau semi-redup (100) dan mematikan bola biru (0).

Berikut ini adalah ilustrasi yang menunjukkan beberapa warna dan seberapa "cerah" masing-masing komponen RGB harus dibuat untuk menciptakan ilusi warna. Titik-titik kecil di bawah masing-masing warna menunjukkan seberapa redup atau terang komponen yang dibuat.

masukkan deskripsi gambar di sini

Seperti yang dapat Anda lihat di ilustrasi, untuk membuat putih, misalnya, Anda mengubah 3 komponen ke maksimum (255). Kombinasi dari 3 "bola lampu" kecil ini akan dirasakan oleh mata sebagai putih (menjelaskan mengapa hal itu merupakan penyimpangan besar). Untuk membuat hitam, matikan semuanya. Itu mudah: tidak ada cahaya tanpa warna.

Luminescence dari masing-masing warna dihitung dengan menambahkan "seberapa cerah" masing-masing dari 3 komponen. Putih akan menjadi warna dengan pendaran tertinggi, karena 3 komponen diubah ke nilai maksimumnya. Hitam, akan menjadi yang terendah. Kuning akan memiliki pendaran tertinggi daripada hijau karena untuk membuat kuning Anda memerlukan 2 komponen secara maksimal tetapi untuk membuat hijau Anda hanya perlu satu. Jadi, kurang lebih Anda bisa mengatakan itu

L = R + G + B

Ini sedikit lebih rumit. Dengan melihat ilustrasi Anda akan melihat bahwa komponen hijau tampak lebih cerah. Nyatanya, ini dipandang oleh mata sebagai mata yang paling terang. Biru, di sisi lain, dianggap sangat redup. Rumus yang tepat untuk menghitung pendaran memperhitungkannya.

L = 0,2126 R + 0,7152 G + 0,0722 B

Ini ilustrasi lagi, dengan pendaran yang dihitung untuk setiap warna.

masukkan deskripsi gambar di sini

Anda akan melihat bahwa, seperti yang bisa dikatakan mata Anda, kuning lebih bercahaya daripada oranye, tetapi oranye kurang lebih sama terang dengan magenta.

Sekarang, saya telah mengambil warna dari dua palet asli Anda dan menghitung pendarannya.

masukkan deskripsi gambar di sini

Dalam kasus pertama, yang Anda sukai, Anda akan melihat bahwa pendaran warna pertama, di bagian bawah lebih rendah (125) daripada warna kedua, di bagian atas (200). Gradien, kemudian, dianggap sebagai peningkatan luminositas, seolah-olah akan menyala.

Dalam kasus kedua, tidak ada banyak perbedaan, sehingga gradien dianggap hanya sebagai perubahan rona.

Dalam kasus ketiga, warna dasar memiliki pendaran yang lebih tinggi daripada yang teratas, sehingga gradien akan dianggap sebagai penurunan luminositas, seolah-olah akan meredup.

Ini akan menjelaskan mengapa, bahkan ketika Anda memilih 2 warna yang ditempatkan relatif jarak yang sama satu sama lain pada roda warna daripada yang Anda suka, hasilnya akan dirasakan berbeda.

cockypup
sumber
Respons yang fantastis! Terima kasih atas penjelasan yang jelas; sepertinya jawaban saya adalah kombinasi dari respon-respon ini.
Hayden McAfee
Ini adalah respons yang luar biasa. Saya yakin ini dikombinasikan dengan respons Hayden dapat menghasilkan beberapa hasil yang luar biasa.
Qix
2
Perhatikan bahwa ini agak rumit oleh tampilan gamma. Untuk mendapatkan nilai pendaran yang akurat untuk warna RGB tampilan, Anda harus terlebih dahulu menerapkan koreksi gamma untuk mengubah nilai R / G / B menjadi ruang warna linier sebelum rata-rata menggunakan rumus Anda. Untuk gamma tampilan khas 2.2, rumus yang benar adalah L = (0,2126 R ^ 2,2 + 0,7152 G ^ 2,2 + 0,0722 B ^ 2,2) ^ (1 / 2,2).
Ilmari Karonen
4

Dari http://www.colormatters.com/color-and-design/basic-color-theory

1 - Skema warna berdasarkan warna analog

Warna analog adalah tiga warna yang berdampingan pada roda warna 12 bagian, seperti kuning-hijau, kuning, dan kuning-oranye. Biasanya salah satu dari tiga warna mendominasi.

2 - Skema warna berdasarkan warna komplementer

Warna komplementer adalah dua warna yang saling berseberangan, seperti merah dan hijau dan merah-ungu dan kuning-hijau. Pada ilustrasi di atas, ada beberapa variasi kuning-hijau pada daun dan beberapa variasi merah-ungu pada anggrek. Warna-warna yang berlawanan ini menciptakan kontras maksimum dan stabilitas maksimum.

3 - Skema warna berdasarkan sifat

Alam memberikan titik keberangkatan yang sempurna untuk harmoni warna. Dalam ilustrasi di atas, merah kuning dan hijau menciptakan desain yang harmonis, terlepas dari apakah kombinasi ini cocok dengan formula teknis untuk harmoni warna.

pengguna3437670
sumber
1) Hijau tua ke kuning muda. Seperti gambar skala abu-abu. 2) Red v / s Spring Green / Cyan. Oranye v / s Azure. Indigo / Violet vs Yellow. Salah satu dari keduanya harus kurang jenuh daripada yang lain, untuk kontras ekstra. 3) Perhatikan bagaimana merah lebih gelap dan lebih jenuh daripada kombinasi hijau-kuning, yang juga merupakan gradien dari hijau gelap ke kuning muda kapur.
Locoluis
3

Hanya menambahkan jawaban AmeliaBR (harus menjadi komentar, tapi saya ingin memposting gambar). Salah satu cara untuk mencoba "mengubah" rona Anda tetapi menjaga jarak relatif yang sama antara warna awal dan akhir bisa menggunakan alat rona Photoshop.

Ambil gambar pertama (yang memiliki gradien yang Anda sukai) dan buka di Photoshop. Kemudian buka Hue / Saturation tool ( Image->Adjustment->Hue Saturationatau Ctr+U) dan mainkan dengan slider pertama (Hue). Ini akan menggeser rona seluruh gambar tetapi menjaga hubungan yang sama antara semua rona yang ada (khususnya rona awal dan rona akhir dari gradien Anda). Karena bagian belakang antarmuka Anda berwarna hitam (atau abu-abu netral) perubahan rona tidak akan memengaruhinya.

Jika Anda menemukan kombinasi yang Anda sukai, maka cukup terima perubahan Hue / Saturation (klik OK) dan menggunakan alat pipet (tekan I) pilih warna awal dan akhir dari gradien.

Dalam contoh ini saya telah mengubah rona -155 dan gradien sekarang berubah dari Aquamarine Green (Biru) menjadi Biru, yang merupakan gradien dingin dan menenangkan dengan gema laut.

masukkan deskripsi gambar di sini

Pikiran Anda, persepsi warna memiliki komponen yang sangat pribadi. Apa yang Anda anggap "alami" bagi sebagian orang mungkin dianggap sebagai penyimpangan.

cockypup
sumber
Begitu ya, itu cara yang bagus untuk mendekatinya. Mungkin saya harus mengambil beberapa kelas teori warna untuk mendapatkan ide yang lebih baik tentang bagaimana warna tertentu dirasakan secara umum!
Hayden McAfee