Pembuatan skema warna - teori dan algoritma [tertutup]

Saya akan menghasilkan diagram dan diagram dan saya mencari beberapa teori tentang skema warna dan contoh algoritma.

Contoh pertanyaan:

• Bagaimana cara menghasilkan warna komplementer atau analog?
• Bagaimana cara menghasilkan warna pastel, dingin dan hangat?
• Bagaimana cara menghasilkan sejumlah warna acak tetapi berbeda?
• Bagaimana cara menerjemahkan semua itu ke hex triplet (warna web)?

Implementasi saya akan di AS3 tetapi setiap contoh dalam pseudocode dipersilakan.

Dalam mencari informasi lebih lanjut tentang pertanyaan ini (ini adalah sesuatu yang saya perjuangkan juga), saya menemukan blog ini . Stefano Mazzocchi menjelaskan teorinya tentang mengapa programmer payah dalam memilih warna untuk desain UI dan menawarkan beberapa saran dan tautan yang bermanfaat.

Sedikit nasihat pertama yang ia tawarkan adalah fakta nyata yang menjadi dasar untuk memilih warna dan saturasi:

Dua potong informasi dengan kontras yang sama dengan latar belakang mereka akan dianggap pada tingkat kepentingan yang sama (semua hal lain dianggap sama), sementara lebih banyak kontras mengidentifikasi lebih penting dan lebih sedikit kontras mengidentifikasi kurang penting.

Ini menawarkan petunjuk pertama tentang cara memilih warna untuk latar depan dan latar belakang - informasi yang kurang penting harus menggunakan kontras yang lebih rendah dan informasi yang lebih penting harus menggunakan kontras yang lebih tinggi.

Tautan pertama adalah ke Color Scheme Designer , sebuah situs yang mirip dengan Kuler. Seperti Kuler, ini adalah alat interaktif yang praktis, tetapi tidak menawarkan wawasan tentang bagaimana warna harus dipetik, yaitu warna kuning yang berfungsi dengan warna hijau atau biru, dll.

Tautan berikutnya yang ia tawarkan adalah ke situs web Laboratorium Penelitian Penggunaan Warna NASA yang berjudul Menggunakan Warna dalam Grafik Tampilan Informasi . Situs ini menyediakan lebih banyak informasi tentang cara memilih warna untuk kontras yang tepat, dll., Dan mencantumkan rumus matematika untuk mengukur hal-hal seperti kontras. Saya belum menemukan kode SW atau algoritma kode semu di situs itu, tetapi saya hanya melihat beberapa halaman. Stefano juga menunjukkan bahwa Lab Warna NASA menggunakan Munsell Colour System , sebuah sistem yang mirip dengan HSV tetapi ditimbang untuk lebih akurat mencerminkan persepsi manusia terhadap warna daripada sifat warna yang dapat diukur.

Satu tautan terakhir yang disebutkan dalam blog Stefano adalah ke situs yang disebut Tren Warna + Palet :: COLOURlovers . Situs ini tidak menawarkan bantuan lagi dalam menemukan algoritma untuk memilih warna daripada Color Scheme Designer atau Kuler, tetapi menekankan kualitas yang kurang terukur dari perubahan saat ini dalam kenikmatan singkat kami tentang warna dan palet tertentu. Layak dikunjungi jika Anda ingin UI Anda mencerminkan tren terbaru.

Sekali lagi, periksa situs web NASA dan bacalah beberapa halaman di sana, terutama yang ada di Color Science , dan Anda harus bisa membuat algoritma yang bisa diterapkan untuk memilih warna yang bekerja sama dan memberikan kontras yang diinginkan.

EDIT: Saya akan menambahkan tautan bermanfaat tambahan di area ini ketika saya menemukannya.

1. Algoritma Genetika Interaktif untuk Colors.pdf
2. Algoritma Segmentasi Warna Perseptual.pdf
3. Panduan untuk Menggabungkan warna dan Skema warna untuk Great Web Design.html

Sejauh alat menghasilkan warna pergi, saya suka http://kuler.adobe.com yang terbaik.

Saat Anda membuat palet warna (5 warna) di situs, pilihan Anda adalah Analog, Monokromatik, Triad, Komplementer, Kompon dan Nuansa. Tentu saja Anda dapat menyesuaikan warna Anda alih-alih menghasilkannya secara otomatis. Setiap blok warna menunjukkan nilai numerik dalam RGB dan Hex (serta CMYK / HSV / Lab).

Bagaimana cara menghasilkan warna komplementer atau analog?

Ini melibatkan sedikit pengetahuan teori warna. Anda dapat melihat penjelasan (dasar) yang bagus di sini . Lihat roda warna.

Bagaimana cara menghasilkan warna pastel, dingin dan hangat?

Secara umum, warna-warna pastel adalah "warna-warna lembut." Mereka spektrum warna yang lebih tinggi dan lebih rendah. Lihat bagian warna pastel yang dibuat pengguna Kuler .

Bagaimana cara menghasilkan sejumlah warna acak tetapi berbeda?

Untuk tujuan pembuatan bagan Anda, saya tidak yakin warna acak akan berfungsi. Setiap pilihan warna harus dipilih dengan tangan.

Bagaimana cara menerjemahkan semua itu ke hex triplet (warna web)?

Sebagian besar perangkat lunak grafis menampilkan nilai hex untuk warna. Hex adalah string RGB yang dibuat oleh ## (merah), ## (hijau), ## (biru).

Misalnya, merah murni adalah FF0000, biru murni adalah # 0000FF. Ungu (Anda dapatkan dari pencampuran merah dan biru) adalah # FF00FF.

Karena Anda akan membuat bagan, saya sarankan mengunjungi blog berikut untuk inspirasi:

http://infosthetics.com

http://flowingdata.com

Jika Anda punya waktu, baca Pelajaran dalam Teori Warna

Sebuah ide yang ada dalam pikiran saya untuk sementara waktu adalah untuk menghasilkan warna (dalam batas) sebanyak mungkin untuk warna sebanyak yang diperlukan. Kerumitan tambahannya adalah jika saya membutuhkan beberapa warna tambahan nanti untuk grafik yang sama (mungkin beberapa bar tambahan ditambahkan), mereka perlu masuk ke dalam skema yang sama, menjaga warna yang ada tetap sama.

Gagasan yang saya buat adalah trik yang agak rumit. Bayangkan sebuah lingkaran warna (mungkin masing-masing rona berbeda dengan saturasi dan kecerahan yang sama, meskipun Anda bisa mendefinisikan lingkaran apa pun melalui ruang warna apa pun). Alih-alih memberikan sudut dalam derajat untuk lingkaran itu, miliki rentang nol hingga 255. Dalam biner, itu 00000000 hingga 11111111. Tambahkan satu ke 8 bit 255 dan itu meluap kembali ke nol, sehingga ia bertindak secara alami sebagai "nilai melingkar" (dalam istilah teknis, penambahan dan pengurangan adalah modulo 256).

Caranya adalah ketika Anda memilih warna nol, warna satu dll, untuk sedikit-membalikkan angka-angka itu. Untuk melakukannya di C, saya akan menggunakan ...

value = ((value & 0x0F) << 4) | ((value & 0xF0) >> 4);
value = ((value & 0x33) << 2) | ((value & 0xCC) >> 2);
value = ((value & 0x55) << 1) | ((value & 0xAA) >> 1);

Jadi urutan 0, 1, 2, 3, 4 ditransformasikan menjadi 0, 128, 64, 192, 32.

Intinya adalah bahwa Anda memiliki 256 warna yang berbeda, dan yang paling awal sangat banyak spasi, dengan yang kemudian semakin kurang lebar dan mengisi celah (64 adalah setengah jalan antara 0 dan 128, 32 adalah setengah jalan antara 0 dan 64 dll).

Lebar bit apa pun untuk "sudut" tertentu akan berfungsi jika Anda mengadaptasi bit-reverse, dan tentu saja Anda dapat menjalankan beberapa siklus sekaligus untuk parameter warna yang berbeda (mungkin rona berputar cepat, tetapi saturasi berputar lebih lambat).

Itu hanya meninggalkan pertanyaan tentang bagaimana Anda memetakan "sudut" Anda ke nomor RGB tertentu atau apa pun, yang saya tidak ahli di - oh, dan pertanyaan apakah ActionScript mendukung bit-fiddling.

Ada pertanyaan Stack Overflow yang menarik " Fungsi untuk membuat roda warna " pada ini. Anda mungkin juga ingin membaca salah satu makalah yang direkomendasikan (PDF).

Pertanyaan ini membuat saya terpesona sehingga saya mulai melakukan beberapa pencarian di Google. :) Jangan mengharapkan jawaban berdasarkan pengalaman.

Pada dasarnya, untuk melakukan perhitungan dengan warna, yang terbaik adalah melakukan operasi pada roda warna, yang direpresentasikan dalam format HSL .

Penulis posting ini cukup baik untuk memberikan beberapa informasi tentang konversi RGB ke HSL, dan kode sampel tentang cara menghitung warna komplementer.

Jika Anda beruntung, Anda tidak perlu memahami semua itu, jika salah satu dari pustaka AS3 bernama canggung ini bekerja untuk Anda.

• Colorjizz
• Mojocolor

Saya telah menggunakan kode berikut. Catatan: tidak menggunakan teori tentang cara kerja mata / otak, saya hanya ingin dapat membuat langit-langit warna sedemikian rupa sehingga merah + hijau + biru = 1, dan warnanya berjarak kurang lebih sama. Parameter "saya" adalah warna dari total num yang mungkin. Ia berfungsi untuk num kira-kira 91 ish. Catatan saya harus dijalankan dari nol hingga num-1. Hal-hal lain mungkin terjadi, batasan yang diberikan di atas cukup sewenang-wenang, tetapi setidaknya itu menghasilkan warna-warna yang berbeda - dengan anggapan Anda tidak perlu terlalu banyak.

void select_color(int me,int num){
  int s[14]={0,1,3,6,10,15,21,28,36,45,55,66,78,91};
  int j,nrows=0,irow=0,jcol=0;
  float del,red,grn,blu;
// we build a red/green triangle with an area>=num
  for(j=0;j<14;j++)if(me>=s[j])irow=j;
  for(j=13;j>0;j--)if(num<=s[j])nrows=j;
  jcol=me-s[irow];
  del=1./(nrows-.9);
  red=1.-del*irow;
  grn=del*jcol;
  blu=1.-red-grn;
  glColor3f(red,grn,blu);
}

Sekali lagi, ini tidak menggunakan teori warna, jadi tidak ada jaminan bahwa jarak dioptimalkan dalam air apa pun - terutama jika Anda khawatir dengan pengguna sesekali dengan buta warna sebagian.

Anda juga dapat dengan mudah mengatur warna primer varaibles ke angka acak, tetapi mereka bahkan lebih kecil kemungkinannya untuk membentuk set yang berbeda secara visual.

Di masa lalu, saya telah melakukan ini dengan hanya memilih 20 atau lebih warna, daripada mencoba untuk menghasilkannya. Kecuali jika grafik Anda sangat kompleks, Anda biasanya tidak membutuhkan lebih banyak. Pendekatan ini, meskipun sederhana, juga memungkinkan Anda menetapkan warna yang sama ke faktor yang sama dalam grafik Anda (misalnya, Anda selalu dapat membuat 'penjualan' warna yang sama, membuat grafik lebih mudah untuk ditafsirkan).

Saya suka sampel warna dari foto . Sebagai desainer saya melakukan ini secara manual. Sebagai seorang programmer saya biasanya memilih piksel acak. Jika Anda ingin lebih banyak kontrol, Anda dapat membuat 'foto' Anda sendiri yang memenuhi aturan tertentu.

Saya selalu menyukai utilitas online VisiBone karena Anda dapat memilih beberapa warna dan secara interaktif mengevaluasi seberapa buruk mereka saling berbenturan: http://www.visibone.com/colorlab/

Saya mengatakan betapa buruknya mereka berbenturan karena saya terbiasa dengan kontras warna seperti yang berlaku pada seni "analog" dan terkejut oleh betapa buruknya warna yang saya pilih berbenturan satu sama lain dalam seni digital. (Jelas saya bukan desainer sekalipun)