Teori Warna

Tanpa banyak warna atau grafis, setiap situs akan menjadi Jakob Nielsen situs impian ‘s. Meskipun filosofi Nielsen telanjang-tulang arsitektur Web memiliki aksesibilitas dan kegunaan manfaat, kebanyakan desainer Web ingin menambahkan sentuhan tanda tangan ke situs mereka dengan banyak elemen desain. Untungnya, seorang desainer dapat menambahkan warna ke situs tanpa kehilangan aksesibilitas dan kegunaan jika situs ini dirancang dengan kemampuan mereka dalam pikiran.Sementara banyak desainer merasa nyaman merancang sebuah situs untuk banyak pengguna, orang-orang desainer yang sama mungkin merasa tidak mampu ketika datang untuk memilih warna dan grafis.
Dalam hal ini bagian dari Kurikulum Standar Web , saya akan membahas dasar-dasar warna dan tiga skema warna yang sederhana sehingga Anda dapat merasa yakin tentang memilih warna untuk situs Anda. Aku akan menindaklanjuti artikel ini dengan sepotong tentang cara untuk menyederhanakan pilihan warna ini. Setelah semua, itu lebih menyenangkan untuk menikmati pujian pada desain situs Web Anda daripada berkeringat atas pilihan warna.

Warna, tints, dan nuansa

Warna, atau warna, secara historis telah dibagi menjadi warna primer, sekunder, dan tersier. Warna primer terdiri dari merah, kuning dan biru, dan mereka disebut warna primer karena Anda tidak perlu mencampur warna untuk membuat tiga warna. Jika Anda ingin menerjemahkan warna-warna ini menjadi warna web, Anda dapat menciptakan mereka menggunakan hex mereka (heksadesimal) setara # ff0000, # ffff00, dan

  1. 0033CC seperti yang ditunjukkan pada Gambar 1:

Primary Colours

Gambar 1: warna primer dan sekunder, dan setara hex mereka

Warna sekunder adalah campuran dari warna primer, dan warna-warna adalah sebagai berikut:

  • Merah + Kuning = Oranye (# ff9900)
  • Kuning + Biru = Hijau (# 00cc00)
  • Biru + Merah = Violet (# 660099)

Warna tersier adalah campuran dari warna-warna sekunder, dan mereka berbohong antara warna primer dan sekunder ditunjukkan pada roda di atas. Meskipun warna web berbeda dari biasa “pelukis” warna, mungkin membantu untuk mendapatkan sebuah roda warna (seperti terlihat pada Gambar 2) untuk memiliki di tangan saat Anda belajar tentang berbagai skema warna. Selain itu, roda warna akan menampilkan semua tints, nada dan nuansa sehingga Anda dapat mulai menyadari kemungkinan warna yang Anda miliki di tangan. Beberapa istilah yang lebih penting untuk belajar adalah sebagai berikut:

  • Tint – warna yang dihasilkan ketika putih ditambahkan
  • Tone – Warna yang dihasilkan ketika abu-abu ditambahkan
  • Naungan – Warna yang dihasilkan ketika hitam ditambahkan

Tints, nada dan nuansa

Gambar 2: Sebuah roda warna nyata

Tanda panah pada Gambar 2 menunjukkan hal yang berbeda sebagai berikut:

  • Terluar Band – warna tersier kuning-oranye (kuning + orange)
  • Band kedua – warna itu warna tersier (putih ditambahkan)
  • Band ketiga – nada warna (abu-abu ditambahkan)
  • Band terdalam – warna pada roda cetak (hitam ditambahkan)

Seperti yang dapat Anda lihat dari roda warna yang ditunjukkan di atas, jumlah putih, abu-abu dan hitam ditambahkan ke warna yang kecil-hanya cukup untuk mengubah warna asli dan menciptakan apa yang dikenal sebagai skema warna monokromatik.

Skema warna monokromatik

Skema warna telah ada selama berabad-abad, sehingga tidak perlu untuk menemukan kembali roda warna. Meskipun warna web berbeda dari cetak warna, konsep-konsep yang sama. Anda hanya bertukar nomor hex untuk nama warna, dan cocok kemudian sedekat mungkin. Salah satu alat online saya sarankan gunakan untuk membantu dengan ini adalah Skema Warna Designer , seperti terlihat pada Gambar 3, yang memungkinkan Anda untuk menentukan skema warna dengan cepat dan mudah, dan bahkan menentukan apakah warna yang Anda pilih menyediakan cukup kontras untuk low- penglihatan atau buta warna pengguna.

Color Scheme Generator

Gambar 3: Color Scheme Generator II.

Jika Anda ingin lebih membantu memutuskan apakah warna yang Anda pilih memberikan kontras yang cukup baik, mencoba Analyser Kontras dari Paciello Group.Alat ini memeriksa kontras antara latar depan dan warna latar belakang.

Untuk mencapai warna, nada dan warna untuk warna kuning-oranye pada generator warna online, pertama-tama pilih warna yang panah menunjuk ke dalam gambar di atas. Kemudian, pilih Mono di panel yang terletak di bawah roda warna dan default pada panel di kotak ke kanan. Juga pilih Vision normal dalam pemilihan dari menu pull-down di bagian kanan bawah. Jangan centang “mengurangi ke warna ‘aman'” kotak di atas kotak warna kecuali Anda seorang purist.

Catatan: Istilah “web-safe warna” berasal dari waktu ketika monitor bisa menampilkan 256 warna, hanya 216 dari yang sama di seluruh platform Windows / Mac / Unix, maka “web safe” monicker. Sementara beberapa puritan masih tetap dengan “palet warna Web-aman”, browser modern mampu menangani apa yang dikenal sebagai “24-bit” warna. Sebenarnya warna 24-bit pada 10-11 bit per channel menghasilkan 16.777.216 warna yang berbeda. Dengan kata lain, itu aman untuk mengatakan bahwa “aman Web” palet warna jarang diperlukan lagi.

Kembali ke skema warna monokromatik. Hasil yang Anda harus menerima dengan mengikuti langkah-langkah yang dijelaskan di atas adalah: kuning-oranye (# FFCC00), warna (# FFF2BF), tone (# FFE680), dan bayangan (# B38F00). Nomor hex ini jauh lebih dapat diandalkan daripada tebakan Anda akan membuat dengan mencoba untuk mencocokkan roda warna nyata ke layar backlit dari browser Web. Dan, sebagai “Mono” menunjukkan, skema ini diterjemahkan menjadi skema warna monokromatik, seperti terlihat pada Gambar 4.

Skema warna monokromatik

Gambar 4: Sebuah skema warna monokromatik.

Sebuah skema warna monokromatik setara dengan satu warna dan semua tints nya, nada dan nuansa. Sementara skema ini adalah yang paling mudah untuk digunakan, tidak memberikan banyak kegembiraan dalam desain Web untuk banyak desainer. Sebaliknya, Anda mungkin ingin menjelajahi skema lain untuk menambah pizzaz ke link, gambar, dan spanduk.

Skema Warna Komplementer

Selanjutnya keluarga skema warna untuk mengeksplorasi adalah skema saling melengkapi, di mana Anda cocok warna yang terletak tepat di seberang satu sama lain pada roda warna, seperti terlihat pada Gambar 5.

Skema warna komplementer

Gambar 5: Contoh skema warna komplementer.

Bila Anda memilih satu warna dan warna yang berlawanan, Anda juga mencakup semua tints, nada dan nuansa warna kedua. Ini menyediakan pilihan yang lebih banyak, dan itu diterjemahkan dengan baik dengan warna secara online tool-lihat Gambar 6.

Skema warna komplementer online

Gambar 6: Sebuah skema warna komplementer di dalam alat warna online.

Pada gambar di atas, saya telah memilih warna oranye dengan warna komplementer kebalikan dari biru. Pengaturan saya memilih untuk mendapatkan skema ini meliputi pengaturan Kontras di kiri bawah, default pada menu di bawah generator, dan penglihatan normal. Perhatikan bahwa warna utama yang dipilih ditandai dengan titik hitam pada disk bagian dalam roda warna (baik di atas dan online di situs generator) dan bahwa sebaliknya, warna komplementer yang secara otomatis dipilih untuk Anda ditandai dengan lingkaran berongga di tepi bagian dalam. Tanda ini membuat lebih mudah bagi Anda untuk menganalisis skema warna Anda.

Generator warna ini membuat mudah bagi Anda untuk memilih warna untuk link, link yang dikunjungi, dan bahkan gambar karena menyediakan warna hex untuk Anda di bagian kanan atas. Anda dapat mencampur dan mencocokkan warna murni (warna di bagian atas) dan warna nya, nada atau teduh dan merasa hebat tentang memilih skema warna solid.

Greenpeace

Gambar 7: The Greenpeace situs-contoh yang baik dari skema warna komplementer.

Greenpeace USA (lihat Gambar 7) adalah salah satu dari banyak situs yang menggunakan skema warna yang kontras. Ya, Anda lihat kuning dan jeruk, tapi warna dominan adalah warna hijau dan merah-dua yang langsung berlawanan satu sama lain pada roda warna. Anda hampir tidak bisa pergi salah dengan metode warna komplementer ini. Bahkan, penggunaan kombinasi warna yang “hangat” dan “dingin” membuat situs tenaga dengan kontras warna.

Hangat vs warna-warna dingin

Skema warna komplementer yang besar untuk digunakan di situs web, karena mereka juga mengandung warna hangat dan dingin. Penggunaan warna-warna ini memberikan kontras, dan sangat mudah untuk mengingat yang warna yang “hangat” dan yang warna yang “keren” seperti yang Anda lihat pada Gambar 8 (dan di situs pembangkit warna):

Warna hangat dan sejuk

Gambar 8: Warna hangat dan sejuk.

Warna hangat adalah warna-warna yang akan mengingatkan Anda tentang musim panas, matahari atau api. Mereka terdiri dari violet ke kuning. Warna-warna dingin mungkin mengingatkan Anda tentang musim semi, es, atau air. Warna-warna berkisar dari kuning-hijau kembali ke violet. Jika Anda perhatikan bagaimana warna bekerja pada roda, Anda akan segera menemukan bahwa Anda tidak dapat memilih satu warna tanpa memilih lawan dalam “suhu.” Jadi, jika Anda memilih merah panas, sebaliknya adalah hijau yang sejuk. Atau, jika Anda memilih biru-hijau yang sejuk, Anda akan berakhir dengan merah-oranye pedas di sisi lain.

Salah satu contoh situs yang secara konsisten menggunakan kombinasi warna hangat / dingin adalah Ecolution , seperti terlihat pada Gambar 9.

Ecolution

Gambar 9: Ecolution-contoh yang baik dari hangat / warna dingin.

Ecolution biasanya menggunakan merah sebagai warna aksen di halaman rumah mereka berbeda dengan logo hijau mereka. Mereka kemudian perpaduan dua warna kontras dengan berbagai tints, nada dan nuansa dua warna. Bahkan “kulit hitam” dalam sebuah gambar dapat bersandar ke arah “hangat” atau “dingin,” seperti halnya kulit putih. Secara keseluruhan, foto itu adalah “hangat,” yang memainkan baik dengan hijau murni mencolok. Meskipun mereka menggunakan warna yang sama seperti Greenpeace, situs Ecolution mengambil kurang “silau” dengan nada kaya dan nuansa dalam foto.

Anda tidak pernah menyadari bahwa teori warna itu begitu mudah, kan? Nah, kalau begitu … mari kita memperumit masalah sedikit …

Skema warna triadic

Sebuah skema warna triadic (lihat Gambar 10) dibuat ketika Anda memilih satu warna dan kemudian memilih dua warna lain yang terletak berjarak sama satu sama lain di sekitar lingkaran, seperti:

Skema warna triadic

Gambar 10: Sebuah skema warna triadic.

Saya memilih warna utama untuk skema ini karena saya ingin menunjukkan bagaimana skema warna tampaknya berisi metode untuk kegilaan. Bukan kebetulan bahwa warna primer berbohong di mana mereka melakukan pada roda warna, karena setiap warna mengandung jumlah yang sama warna sekunder dan tersier antara setiap primer. Tapi, warna dasar skema triadic dapat tampak tua-topi seperti yang telah digunakan secara berlebihan. Sebaliknya, Anda dapat mencoba beberapa pilihan warna lain pada generator warna online, seperti Gambar 11:

Online skema warna triadic

Gambar 11: Sebuah skema warna triadic alternatif.

Skema triad di atas dibangun dari oranye-kuning, biru-hijau, dan merah-ungu. Aku mengambil oranye-kuning pertama (perhatikan titik gelap di bagian dalam dari roda warna di sebelah kiri), dan kemudian memilih pilihan Triad terletak di bawah kemudi. Generator secara otomatis memilih pilihan triadic termasuk semua tints, nada dan nuansa. Warna-warna yang menyertainya ditandai pada roda warna dengan titik-titik kosong, sama seperti warna komplementer tercatat dalam contoh monokromatik.

Sekarang, ini adalah di mana roda warna nyata mungkin akan berguna, sebagai hasil secara online tidak cukup cocok dengan hasil dari roda warna genggam. Ketika saya mendorong alat Angle / Jarak bawah roda warna untuk “max,” Namun, tampaknya cocok dengan roda warna saya memegang di tangan saya. Hasil yang ditunjukkan di atas adalah mereka yang cocok dengan roda warna yang paling dekat.

Skema warna triadic juga berisi warna-warna hangat dan dingin, tapi satu suhu akan mendominasi. Biasanya, suhu yang akan menaungi lain adalah salah satu yang Anda pilih di ujung depan. Dalam hal ini, saya awalnya memilih oranye-kuning, yang merupakan warna yang hangat. Warna-warna hangat yang ditunjukkan di atas akan mendominasi sebagai hasilnya, dengan salah satu dari dua warna lain pinjaman kontras keren.

Puzzle Pirates

Gambar 12: Puzzle Pirates-A skema warna triadic baik.

Puzzle Pirates , yang ditunjukkan pada Gambar 12, menggunakan skema triadic di halaman rumah mereka. Mereka menggunakan skema merah-biru-kuning primer, dan skema utama ini sangat cocok untuk situs permainan anak-anak. Perhatikan bahwa biru dominan dan bahwa merah dan kuning digunakan sebagai aksen dan memimpin mata di sekitar halaman.

Skema warna Tetradic

Semakin banyak warna yang Anda pilih, semakin rumit skema warna. Namun, salah satu trik adalah untuk menemukan warna, nada atau teduh dan tetap berpegang pada daerah-daerah di seluruh papan daripada mencampur warna murni dan tints mereka, nada dan nuansa. Metode ini bekerja dengan baik dengan skema warna seperti empat skema warna tetradic. Skema ini (lihat Gambar 13) adalah seperti skema komplementer, hanya Anda menggunakan dua complementaries yang berjarak sama.

Skema warna Tetradic

Gambar 13: skema warna Tetradic.

Gambar 14 menunjukkan bagaimana skema tetrad bekerja secara online:

Tetrad contoh online

Gambar 14: Sebuah skema warna tetradic dalam generator online.

Perhatikan titik hitam di bawah merah pada roda warna ke kiri. Ini adalah warna pertama yang saya pilih, saya kemudian mengklik tombol Tetrad bawah kemudi.Empat warna yang muncul sekali lagi agak off from my roda warna genggam, tetapi ketika aku mendorong alat Angle / Jarak bawah roda warna untuk “max,” tampaknya cocok dengan roda warna saya memegang di tangan saya . Hasil yang ditunjukkan di atas adalah mereka yang cocok dengan roda warna yang paling dekat.

Skema warna ini dapat menjadi cukup rumit, jadi apa yang Anda mungkin ingin lakukan pada saat ini adalah untuk mengambil semua empat tints atau nada atau nuansa dari warna di kolom kanan. Anda dapat membuat pilihan Anda dengan mengklik tanda panah di ujung kanan. Sebagai contoh, Gambar 15 menunjukkan contoh blok diisi dengan tints skema warna ini:

Tints Tetradic

Gambar 15: tints Tetradic.

Dan Gambar 16 menunjukkan contoh nada mid-range:

Midrange triadic

Gambar 16: Tetradic nada mid-range.

Jika Anda melihat dekat pada kotak di atas, Anda akan melihat bahwa generator juga menyediakan Anda dengan empat skema warna monokromatik. Skema ini akan ditampilkan pada kolom sebelah kanan serta dalam setiap persegi dalam persegi yang lebih besar.

Situs Jane Goodall

Gambar 17: The Jane Goodall Institute situs-baik tetradic skema warna misalnya.

The Jane Goodall Institute situs (Gambar 17) adalah salah satu dari beberapa situs yang benar-benar membawa skema warna tetradic baik. Perhatikan ungu, nada kuning, highlight merah dalam foto (situs memegang lebih merah lebih bawah pada halaman), dan hijau. Ungu tidak cocok persis dengan skema warna yang dihasilkan oleh warna secara online tool-itu membungkuk ke arah merah-violet-tapi cukup dekat untuk digunakan sebagai contoh bagaimana Anda dapat menggunakan kedua roda warna dan generator warna secara online untuk menghasilkan ide-ide untuk situs Anda.

Sekarang, ketika Anda berselancar di Web mencari warna dan desain ide-ide, menjaga roda warna Anda dekat di tangan untuk mempelajari lebih lanjut tentang bagaimana desainer menggunakan skema warna pada situs Web favorit Anda!

Ringkasan

Meskipun kombinasi warna mungkin tampak rumit, semua skema warna membawa “aturan.” Tertentu Pedoman ini memudahkan untuk memahami yang warna bekerja sama untuk menambah minat dan kontras ke situs Web.

Alasan roda warna ada adalah bagi orang untuk menggunakannya. Warna roda dan alat-alat seperti Generator Color online membuat warna-memetik mudah bahkan bagi para desainer berpengalaman.

Keempat skema warna yang tercakup dalam artikel ini adalah monokromatik, komplementer, triadic, dan tetradic. Walaupun skema warna lain ada, empat skema warna ini adalah yang paling mudah untuk memahami dan melaksanakan.

Silahkan berkomentar

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s