01 dari 10
Memahami Warna dan Skema Warna Web
Ada empat skema warna dasar yang dapat Anda gunakan untuk situs Web. Setiap halaman artikel ini menunjukkan gambar skema warna, dan bagaimana Anda dapat menghasilkan skema serupa di Photoshop.
- monokromatik
Menggunakan warna rona yang sama. Mereka mungkin memiliki tints atau nuansa yang berbeda tergantung pada seberapa banyak putih atau hitam yang ditambahkan. - sejalan
Ini menggunakan warna yang dekat satu sama lain pada roda warna. - komplementer
Ini sering dilihat sebagai "berlawanan" karena dua warna dalam skema warna komplementer saling berhadapan di roda warna. - triadic
Warna-warna ini secara merata di roda warna.
Semua skema warna akan menggunakan warna kuning ini sebagai warna dasar.
02 dari 10
Skema Warna Web Monokromatik
Skema warna ini menggunakan warna kuning mustardy dari warna dasar saya dan menambahkan beberapa putih dan hitam untuk mewarnai dan memudarkan skema yang sesuai.
- kiri atas - warna dasar # ffe500
- kanan atas - tambahkan isi 50% putih untuk mendapatkan # fff280
- kiri bawah - tambahkan isi 75% putih untuk mendapatkan # fff8bf
- kanan bawah - tambahkan isi 50% hitam untuk mendapatkan # 7f7200
Skema warna monokromatik seringkali paling mudah di mata semua skema warna. Perubahan warna dan bayangan yang lembut membuat warna-warna itu mengalir satu sama lain dengan lebih baik. Gunakan skema warna ini untuk membuat situs Anda tampak lebih cair dan terkumpul.
03 dari 10
Lebih Banyak Skema Warna Web Monokromatik
Menambahkan kotak sebesar 20% hitam untuk mendapatkan lebih banyak warna dalam skema. Menambahkan hitam atau putih ke warna Anda dapat membuat warna baru ke palet Anda tanpa mengacaukan nada halaman.
04 dari 10
Skema Warna Web Analog
Skema warna ini mengambil warna dasar kuning dan menambahkan dan mengurangi 30 derajat ke warna di palet warna Photoshop.
- kiri atas - warna dasar # ffe500
- kanan atas - +30 derajat untuk mendapatkan # 99ff00
- kiri bawah - -30 derajat untuk mendapatkan # ff6600
- kanan bawah - 100% putih #ffffff
Warna yang analog bisa bekerja dengan sangat baik bersama-sama, tetapi kadang-kadang mereka dapat bentrok dengan buruk. Pastikan untuk menguji skema ini dengan lebih banyak orang daripada diri Anda sendiri, keluarga dan teman-teman Anda. Ketika mereka bekerja, mereka membuat situs yang lebih berwarna daripada skema monokromatik, tetapi hampir sama cairnya.
05 dari 10
Lebih Banyak Skema Warna Web Analog
Menambahkan kotak sebesar 20% hitam untuk mendapatkan lebih banyak warna dalam skema.
06 dari 10
Skema Warna Web Komplementer
Skema warna komplementer, tidak seperti skema warna lainnya biasanya hanya memiliki dua warna. Warna dasar dan sebaliknya di roda warna. Photoshop memudahkan untuk mendapatkan warna komplementer - cukup pilih area warna yang Anda inginkan sebagai pelengkap dan tekan Ctrl-I. Photoshop akan membaliknya untuk Anda. Pastikan untuk melakukan ini pada layer duplikat, jadi Anda tidak kehilangan warna dasar Anda.
- kiri - warna dasar # ffe500
- benar - pelengkap # 001aff
Skema warna komplementer sering lebih mencolok daripada skema warna lainnya, jadi gunakan dengan hati-hati. Mereka paling sering digunakan pada bagian-bagian yang perlu menonjol.
07 dari 10
Lebih Banyak Skema Warna Web Pelengkap
Untuk mendapatkan versi ini, saya menambahkan 50% putih ke bagian bawah warna dan 30% hitam ke pusat persegi. Seperti yang Anda lihat, ini memberi Anda beberapa opsi lagi tetapi masih merupakan skema warna pelengkap.
08 dari 10
Skema Warna Web Triadik
Skema warna triadik terdiri dari 3 warna yang kurang lebih sama di sekitar roda warna. Karena roda warna 360 derajat, saya kembali menggunakan kotak warna di pemilih warna untuk menambah dan mengurangi 120 derajat dari warna dasar.
- kiri atas - warna dasar # ffe500
- kanan atas - +120 derajat untuk mendapatkan # e500ff
- kiri bawah - -120 derajat untuk mendapatkan # 00ffe6
- kanan bawah - 100% putih #ffffff
Skema warna triadik sering menghasilkan halaman Web yang sangat dinamis. Tetapi seperti skema warna pelengkap, mereka dapat memengaruhi orang secara berbeda. Pastikan untuk menguji.
Anda juga dapat membuat skema warna tetradik atau 4 warna, di mana warnanya sama-sama ditempatkan di sekitar roda warna.
09 dari 10
Lebih Banyak Skema Warna Web Triadic
Seperti contoh lainnya, saya menambahkan 30% persegi hitam ke warna untuk mendapatkan nuansa tambahan.
10 dari 10
Skema Warna Web Berwarna
Keindahan ada di mata orang yang melihatnya, tetapi itu adalah fakta yang tidak menyenangkan bahwa tidak semua warna berjalan bersama. Warna sumbang adalah warna yang lebih jauh dari sekitar 30 derajat terpisah pada roda warna dan tidak saling melengkapi atau bagian dari tiga serangkai.
Skema warna sumbang bisa sangat mengejutkan dan seharusnya hanya digunakan untuk membangkitkan perhatian. Ingat bahwa karena warna-warna ini sering berbenturan, perhatian yang Anda dapatkan mungkin tidak persis seperti yang Anda cari.