Cara membuat palet warna yang indah

Terlepas dari kenyataan bahwa pemilihan warna yang baik adalah seni, ada beberapa trik untuk menyederhanakan pilihan warna yang indah. Artikel ini terdiri dari dua bagian: di bagian pertama saya akan memberi tahu Anda apa yang membuat palet baik, dan di bagian kedua saya akan mendapatkan formula yang dapat digunakan untuk memilih palet yang indah.

Catatan: ini jauh dari satu-satunya cara untuk memilih warna yang bagus, melainkan seperangkat heuristik yang telah saya kuasai sendiri. Semoga ini membantu Anda menemukan warna yang tepat untuk situs web / aplikasi / game Anda.

Palet warna dan kontras

Pertama, kita perlu mengatakan bahwa warna tidak ada dalam isolasi. Ketika kita berbicara tentang warna yang indah, ini tidak berarti warnanya terang atau gelap, jenuh atau pudar. Ketika kita berbicara tentang pencocokan warna, kita seharusnya tidak banyak berpikir tentang warna individual, tetapi tentang serangkaian warna, atau palet warna.


Dari kiri ke kanan: Super Mario Run, Monumen Valley, Alto's Odyssey, Lara Croft Go

Ketika kita berpikir tentang serangkaian warna, kita harus memikirkan interaksi mereka: haruskah beberapa dari mereka menonjol atau bercampur satu sama lain? Ini disebut kontras.

Proses memilih warna yang indah sering kali bermuara pada pemilihan kontras yang tepat untuk desain Anda.

Keindahan bunga tergantung pada bagaimana mereka bekerja satu sama lain dalam desain Anda. Tetapi ketika datang ke kontras warna, tetapi dapat dibentuk dengan berbagai cara:

Brightness (Terang / Gelap)

Kecerahan adalah jenis kontras yang mudah divisualisasikan. Pada pemilih warna HSB, ini terkait dengan gerakan di sepanjang sumbu vertikal:


Kecerahan

Dalam kasus umum, kita dapat dengan mudah meningkatkan kontras antara dua warna, hanya dengan meningkatkan perbedaan kecerahannya.


Kontras kecerahan

Meskipun mudah dilakukan, itu tidak cukup untuk membuat palet berkualitas. Warna hanya bervariasi dalam besarnya hitam dan putih dan sama sekali tidak semenarik warna berinteraksi dalam lebih banyak dimensi. Yang membawa kita ke ...

Kontras nada

Kami merasakan kontras warna dalam hal rona warna dan tingkat saturasi. Hampir seperti dalam kasus kecerahan, peningkatan perbedaan rona atau saturasi umumnya meningkatkan jumlah kontras antara warna.


Kontras teduh


Saturasi (sumbu horizontal HSB) dan kontras saturasi

Namun demikian, nilai-nilai ini saja tidak bisa melukis seluruh gambar. Kita masih bisa memilih warna yang, meskipun ada perbedaan rona atau saturasi, masih memiliki kontras yang buruk.


Nuansa yang berbeda dan kontras yang buruk


Saturasi yang berbeda dan kontras yang buruk

Apa yang sedang terjadi di sini? Jawabannya adalah warna yang berbeda memiliki nilai nada internal yang berbeda. Sangat sulit bagi banyak orang (termasuk saya) untuk membayangkan nilai nada apa yang dapat mengambil warna yang berbeda. Dan itu membawa kita ke trik favorit saya ...

Grayscale Hack

Jika Anda menampilkan warna dalam nuansa abu-abu, maka kecerahan abu-abu yang dihasilkan dapat menjadi indikator nilai nada warna yang berbeda. Tetapi ini bermanfaat tidak hanya untuk ini: penting jika Anda membuat desain dengan mempertimbangkan kebutuhan para penyandang cacat. Ini adalah cara sederhana untuk memvisualisasikan jumlah kontras yang ada dalam desain terlepas dari rona.


Nilai nada internal untuk nuansa yang berbeda

Mari kita lihat bagaimana nilai nada ini terlihat dalam pemilih warna HSB. Juga perhatikan bagaimana perubahan dalam nilai nada berubah dalam spektrum untuk setiap rona (ditunjukkan pada kolom paling kanan):


Jika kita melihat contoh sebelumnya, tetapi sekarang dalam nuansa abu-abu, maka akan lebih mudah untuk mengatakan warna mana yang memiliki kontras tinggi dan rendah.


Kontras saturasi: kontras tinggi di atas, kontras buruk di bawah.


Kontras warna: kontras tinggi di atas, kontras buruk di bawah.

Mari kita lihat lagi permainan yang ditunjukkan di atas, tetapi sekarang dalam skala abu-abu.


Anda dapat dengan mudah melihat bahwa latar depan menonjol dengan baik di latar belakang, elemen-elemen interaktif sangat kontras dengan elemen-elemen non-interaktif, dan bahwa jika gim ini dalam skala abu-abu, ia akan tetap dapat dimainkan. Kesimpulan paling penting dari ini:

Gunakan grayscale hack secara berkala dan sengaja untuk memvisualisasikan kontras yang ada dalam desain Anda.

Kontras yang indah mengarah pada penciptaan palet warna yang indah, jadi saya hadir untuk Anda ...

Formula untuk memilih palet warna yang indah

Mari kita terapkan analisis di atas, tetapi dalam urutan terbalik: mulai dengan desain dalam skala abu-abu, kemudian beralih ke pemilihan warna yang sesuai.

1: Tentukan di mana kita membutuhkan kontras

Buat bingkai desain Anda, dan kemudian tentukan area mana dari bingkai yang Anda butuhkan lebih kontras dan yang kurang.

2: Warnai desain dalam nuansa abu-abu

Cobalah untuk mewarnai bingkai desain hanya dalam nuansa abu-abu. Jadikan area yang membutuhkan lebih banyak kontras memiliki perbedaan kecerahan terbesar. Langkah ini harus dilakukan dalam resolusi akhir desain. Elemen desain kecil (misalnya, logo dan ikon aplikasi) memerlukan kontras sangat tinggi untuk menyoroti elemen kecil.

3: Pilih warna dasar

Pilih nuansa warna dasar yang ingin Anda gunakan. Ini adalah langkah subjektif, dan Anda dapat menggunakan alat seperti ShapeFactory's Pigment atau Adobe Color CC untuk memilihnya. Fakta menyenangkan: beberapa kombinasi warna sangat populer sehingga mereka mendapat status jejak .

4: Sesuaikan warna untuk memiliki nilai nada yang sesuai

Setelah mengambil rona, temukan interval nilai tonal di mana rona kira-kira sesuai dengan nilai nada abu-abu dari sketsa yang diambil sebelumnya. Saat bereksperimen dengan kecerahan dan saturasi, beralih di antara mode warna asli dan skala abu-abu. Tugas Anda adalah untuk mendapatkan palet warna yang, ketika ditampilkan dalam nuansa, cocok dengan desain dari langkah 2.

Contoh 1


(1) Bingkai dan (2) kontras skala abu-abu yang disukai


(3) Warna dasar yang dipilih

Jika kita ingin melihat palet warna yang ditunjukkan di atas, kita harus menemukan area mana dari masing-masing warna yang secara kasar sesuai dengan desain dalam skala abu-abu.


Kisaran nada yang sesuai untuk warna dasar

Sekarang kita dapat memilih kombinasi warna dari bagian mana saja dari area ini:


(4) Beberapa pilihan palet warna

Contoh 2

Seperti inilah proses ini ketika mengembangkan aplikasi Overlink saya:


Proses dari kiri ke kanan, atas ke bawah: kerangka gambar, skala abu-abu, warna dasar, desain akhir

Selamat! Saya harap ini membantu Anda memilih set warna yang kontras di mana Anda membutuhkannya, perpaduan di mana Anda tidak membutuhkannya, dan secara keseluruhan terlihat indah.

Kontras saja bukan aspek yang paling penting untuk menciptakan desain yang hebat, tetapi itu memainkan peran penting dalam memilih palet yang indah.