Apakah ada cara yang baik untuk membangun skema warna Hijau-Kuning-Merah?

Teori warna dasar memberi tahu kita bahwa palet warna Hijau, Kuning dan Merah adalah jelek, mereka adalah warna yang berbenturan. Jika kita menganggap Hijau sebagai warna yang menonjol, warna analog yang menyertainya adalah Merah dan Biru - tidak ada ruang untuk kuning dalam skema warna seperti itu.

Jadi, apakah ada cara yang bisa menggabungkan Hijau, Kuning dan Merah dalam skema warna tanpa membutakan pengguna?

Sebagai contoh saya, saya memiliki halaman di situs web di mana warna-warna ini digunakan untuk mengukur tingkat keterampilan yang diperlukan untuk suatu proyek terhadap tingkat aktual keterampilan ini yang diberikan pengguna. Hijau memenuhi atau melampaui level ini, Kuning menunjukkan sedikit harapan yang kurang dan Merah berarti mereka tidak cukup baik atau sama sekali tidak memiliki keterampilan yang diberikan.

Ini adalah contoh saya (mengabaikan bidang oranye dan abu-abu di sekitar huruf, mereka tidak terkait).

Kita semua pasti setuju bahwa ini terlihat sangat mengerikan, tetapi format inilah yang harus saya patuhi, seluruh hal Hijau-Merah-Kuning. : /

Menjadi seorang programmer terutama, berlawanan dengan desainer Grafis / Web, pemahaman saya tentang teori warna dan pengalaman pengguna terbatas.

Singkatnya, pertanyaan saya adalah Bagaimana seseorang bisa membangun skema warna yang secara tradisional bertentangan tanpa mengurangi Pengalaman Pengguna?

(Jika pertanyaan saya tidak cocok, saya akan menghapusnya, saya tidak yakin di mana menanyakan hal ini, sepertinya yang paling tepat)

Hijau, kuning, dan merah tidak bisa bersamaan? Orang Etiopia harus dihina. Google untuk gambar hijau, kuning, dan merah, dan saya pikir Anda menemukan beberapa contoh menarik (bersama dengan yang jelek).

Seberapa baik kumpulan warna berjalan bersama-sama tergantung pada koordinat warna yang tepat, dan posisi relatif, bentuk, pada ukuran objek berwarna, dan efek yang ingin Anda miliki (misalnya, menenangkan versus menarik, menyenangkan versus serius, berani versus halus). ). Saya tidak punya aturan keras dan cepat untuk Anda, tetapi ada beberapa hal untuk diujicobakan.

Pengorbanan ukuran-saturasi

Untuk menghindari efek menggelegar (dengan asumsi Anda tidak menginginkannya), ukuran objek berwarna harus berbanding terbalik dengan saturasi warnanya. Contoh Anda memiliki saturasi yang cukup tinggi, jadi cobalah saturasi warna yang lebih rendah (mis., Pastel) atau warna sesuatu selain latar belakang. Misalnya, Anda bisa mewarnai teks dan membiarkan latar belakangnya netral, atau Anda bisa mewarnai bentuk atau simbol kecil di samping teks. Yang terakhir akan memberikan kesempatan untuk menggunakan bentuk untuk secara berlebihan mengkodekan kecocokan keterampilan untuk aksesibilitas dan keperluan pencetakan hitam-putih (tanda centang hijau untuk Puas, tanda seru kuning untuk Shortfall, dan merah "jangan masukkan" simbol untuk Tidak Cukup Baik) .

Jarak

Bagaimana warna terlihat tergantung pada kedekatan mereka satu sama lain. Warna daripada bentrok ketika berdekatan terlihat oke dengan pemisahan kecil. Coba letakkan batas netral di sekitar setiap sel untuk memisahkan warna lebih banyak (seperti yang Anda miliki di tajuk), kecuali ada makna sel-sel berwarna sama yang menyatu untuk dianggap sebagai objek tunggal. Coba ketebalan yang berbeda. Coba pisahkan setiap sel dengan batas putih , gunakan untuk tampilan ubin.

Pola

Seberapa baik warna berjalan bersama juga berubah dengan pola warna, jadi pastikan Anda mengevaluasi mockup dengan proporsi dan posisi warna yang khas. Misalnya, jika sebagian besar waktu semuanya berwarna hijau, dan yang paling penting bagi pengguna untuk menghadiri "highlight" kuning dan merah, maka pilihlah hijau yang membuat latar belakang yang baik (misalnya, saturasi rendah, cahaya), dan kuning dan merah tampak duduk "di atas" (misalnya, saturasi yang lebih tinggi, gelap). Pertimbangkan bahwa estetika pola juga dapat berkomunikasi dan memotivasi pengguna. Jika pengguna memiliki seperangkat keterampilan yang sangat tidak cocok atau tidak seimbang, mungkin Anda menginginkan pola yang jelek. Pola yang paling menarik harus sesuai dengan keadaan yang paling menguntungkan bagi pengguna.

Kegunaan

Pertanyaan Anda menyangkut estetika, tetapi pilihan kode warna juga memiliki implikasi kegunaan besar. Pilihan warna Anda harus:

• Secara visual berbeda satu sama lain, terutama jika digunakan dalam kondisi visual yang terdegradasi (misalnya pada ponsel di bawah sinar matahari).

• Berikan kontras yang bagus dengan latar belakang (jika latar depan), atau dengan latar depan (jika latar belakangnya). Misalnya, teks hitam pada merah tidak begitu bagus. Secara umum, latar depan dan latar belakang membutuhkan tingkat kecerahan yang berbeda.

• Pastikan peringkat warna konsisten dengan apa yang dikodekan. Misalnya hal-hal yang harus diperhatikan pengguna untuk lebih kontras dengan latar belakang dan warna-warna lainnya.

• Memberikan aksesibilitas dan kemampuan mencetak, di mana setiap warna juga memiliki tingkat kegelapan yang berbeda, dengan tingkat kegelapan ditingkatkan ke jajaran (merah lebih dari kuning lebih dari hijau). Jadikan hijau Anda agak kebiru-biruan dan / atau merah Anda agak jingga sehingga pengguna buta warna merah-hijau (jenis kebutaan warna yang paling umum) masih dapat melihat perbedaan warna.

• Gunakan kode warna hanya untuk satu variabel. Saya tidak tahu untuk apa Anda menggunakan abu-abu dan oranye, tetapi kemungkinan akan menyebabkan kebingungan dan mempersulit bagi pengguna untuk menggunakan warna merah hijau dan kuning. Kapan saja Anda memiliki lebih dari tiga warna, sulit untuk menjaga hal-hal yang dapat digunakan. Temukan cara lain untuk mengkode kode abu-abu dan oranye apa pun (misalnya, menggunakan ukuran atau berat font, atau menggunakan garis putus-putus untuk batas sel; lihat Memasukkan G ke GUI ).

Dalam satu proyek yang saya kerjakan, warna yang saya gunakan adalah # E00000, # FF8400, dan # C0FFE0 (bukan kuning yang sangat kuning, tetapi masih berfungsi).

Saya memiliki lebih banyak tentang memilih kode warna, termasuk cara menghitung kontras warna dan kecerahan di Breaking the Color Code .

Coba gunakan warna pastel daripada warna RGY yang sebenarnya. Dengan saturasi yang berkurang, akan lebih mudah untuk melihat informasi.

Hex Merah Pastel: # F7977A RGB: 246-150-121

Pastel Green Hex: # 82CA9D RGB: 130-202-156

Hex Kuning Pastel: # FFF79A RGB: 255-247-153

Saya melihat tiga tantangan utama dengan tiga warna ini.

• Merah dan hijau memiliki tingkat kecerahan yang baik untuk digunakan pada teks, kuning tidak.
• Kuning memiliki kecerahan yang baik untuk warna latar belakang, hijau dapat diringankan untuk tujuan tersebut, tetapi merah akan berubah menjadi merah muda.
• Desaturasi hijau dan merah berfungsi dengan baik, tetapi kuning berubah menjadi keruh.

Saya hanya bisa memikirkan beberapa opsi, dengan asumsi Anda tidak menyukai pengaruh pop art dari area besar warna jenuh. Kedua hal ini meminimalkan dampak saturasi dengan memudarnya warna.

• Gunakan gradien di latar belakang sel.
• Terapkan warna sebagai bayangan teks. Bayangan akan membutuhkan jumlah yang cukup blur untuk menyoroti teks.

Ada satu tantangan lain di sini yang tidak ada hubungannya dengan estetika. Merah akan mengalahkan dua warna lainnya dan menghasilkan perhatian pada tanda negatif pada halaman. Jika itu tujuan Anda, Anda baik. Jika Anda ingin bagan Anda bersifat positif, Anda akan berjuang.

"Merah", "Kuning", "Hijau" menyisakan banyak ruang untuk penafsiran sehingga Anda memiliki peluang bagus untuk menemukan kombinasi yang berfungsi dengan baik.

Untuk masalah estetika Anda, saya mengambil warna "merah" dan "hijau" dan memasukkannya ke dalam blender warna . Kemudian saya memilih pHSL sebagai model warna untuk blending. Ini sudah meningkatkan set warna.

Selanjutnya saya mencoba berbagai "merah" dan "hijau" untuk lebih meningkatkan kesan. Sedikit lebih gelap, lebih jenuh / lebih kuat merah. Hijau dengan sedikit lebih kuning, ditambah saturasi yang lebih tinggi.

OK, tidak buruk tetapi juga belum siap.

Untuk masalah kegunaan Anda, ingatlah bahwa ada hierarki pencahayaan (relatif), rona, dan saturasi untuk memandu perhatian kami. Karena kuning secara alami memiliki nilai pencahayaan tertinggi, bidang-bidang ini yang paling menarik perhatian kita. Jadi saya mengimpor warna ke konverter warna untuk mengubah setiap warna satu per satu. Dalam contoh saya, saya memberikan nilai luminance yang sama "kuning" dan "hijau". Luminance rendah untuk kuning atau luminance lebih tinggi untuk hijau tampak bermasalah secara estetika.

Saya mencoba kombinasi saya di Photoshop dan menyadari bahwa batas putih (spasi) membuat kesan yang baik. Jadi saya akan merekomendasikan spasi putih untuk sel dan paling banyak satu garis hitam tipis untuk membagi setiap baris entri.

Dengan menggunakan alat yang disebutkan di atas, Anda mungkin menemukan kombinasi warna yang memenuhi selera atau kebutuhan pribadi Anda lebih baik (misalnya saturasi yang lebih tinggi untuk hijau) ...

Anda harus berhati-hati ketika menggunakan warna sebagai latar belakang karena dapat membuat keterbacaan lebih sulit dan mengalihkan pengguna dari pesan. yaitu latar belakang merah dan font hitam.

Mengubah warna menjadi skala abu-abu biasanya membantu memahami warna mana yang paling kontras. yaitu ketika Anda mengubah merah menjadi skala abu-abu warnanya abu-abu gelap. Oleh karena itu warna yang buruk untuk digunakan sebagai latar belakang ketika font Anda hitam. Anda perlu memilih warna yang akan memberi Anda kontras yang baik.

Namun, jika Anda ingin memberi pengguna dengan cepat pemahaman tentang apa yang Anda coba lakukan saya sarankan membiarkan sel-sel kosong (warna terang) dan hanya menambahkan simbol kecil yang menunjukkan status (persegi atau 5% atau sel diisi dengan warna)

Dengan cara itu pengguna dapat membaca teks dan melihat kategori miliknya dengan cukup cepat.

Namun, jika Anda ingin menggabungkan warna, saya sarankan Anda membeli buku "Indeks warna". Di sana Anda akan menemukan ribuan kombinasi yang akan cocok bersama dan Anda akan menghemat waktu.

Jika Anda menemukan nuansa warna yang tepat, Anda tentu bisa menggunakan warna merah, kuning, dan hijau secara bersamaan.

Saya sarankan mencari di beberapa situs ini di mana Anda dapat menemukan beberapa kombinasi bagus:

http://www.colorschemer.com/schemes/search.php?s=red+yellow+green&submit=Search

Atau coba buat sendiri beberapa di antaranya:

http://colorschemedesigner.com/

Apa yang benar-benar saya sarankan adalah setelah memilih kombinasi warna Anda, tanyakan kepada orang lain apa yang mereka pikirkan. Kadang-kadang kita tidak memiliki cukup tampilan luar dan kita hanya suka warna-warna itu bersama-sama meskipun mereka tidak bagus sama sekali.

Jangan lupa untuk memikirkan kontras dan visibilitas teks saat memilih warna yang tepat.

Saya akan merekomendasikan menggunakan kuning muda karena Anda menggunakannya sebagai warna yang cukup netral.

Berikut adalah tiga skema, harap Anda menyukainya.