Sangat sulit untuk memilih warna yang bagus untuk infografik. Kami akan mencoba mengatasi masalah ini.
Setelah membaca artikel ini, Anda akan merasa lebih percaya diri dengan pilihan warna Anda. Dan jika Anda sama sekali tidak memiliki selera warna, maka ini hanyalah rekomendasi untuk kombinasi yang bagus. Mari berbicara tentang kesalahan warna umum yang mengelilingi kita di mana-mana dan bagaimana menghindarinya.
Artikel ini tidak akan membantu Anda menemukan gradien atau bayangan yang bagus. Ini dirancang untuk memberikan warna yang indah dan tajam untuk berbagai kategori informasi (misalnya benua, industri, spesies burung) dalam diagram garis, diagram lingkaran, diagram batang, dan sebagainya.
FiveThirtyEight, , Pudding, New York Times, The Economist Akkurat
Saya akan banyak berbicara tentang saturasi, kecerahan, dan warna. Ini adalah ruang warna HSB (hue, saturation, lightness) atau HSV (hue, saturation, value):
- The berkisar hue dari 0 ° sampai 360 °, ini adalah roda warna khas Anda: ⬤ ⬤ ⬤
- Saturasi berkisar dari 0% (abu-abu) hingga 100% (makanan super penuh warna !!): ⬤ ⬤ ⬤
- The brightness / nilai perubahan dari 0% (hitam) sampai 100% (warna sebenarnya): ⬤ ⬤ ⬤
Untuk mengonversi warna dari HEX (mis. # Cc0000) atau RGB (mis.
rgb(207, 176, 58)) Ke HSB / HSV, gunakan alat seperti colorizer.org .
Kerabat HSB / HSV adalah ruang warna HCL . Ada parameter yang sama (hue, chroma = saturation, brightness), tetapi lebih mendekati "bagaimana kita benar-benar melihat warna." Layanan Datawrapper kami menggunakan ruang warna HCL di pemilih warna:
Karena tidak ada HCL di Adobe Photoshop atau colorizer.org, setiap penyebutan derajat (misalnya 0 °) atau persen di sini mengacu pada ruang warna HSB / HSV.
Oke, mari kita mulai.
Perluas pemahaman Anda tentang warna
Anda mungkin berpikir, “Untuk grafik, saya butuh lima warna. Jadi saya menggunakan warna hijau, kuning, biru dan merah. Dan ... hmm ... mungkin oranye? Atau ungu! "
Jika Anda belum pernah berpikir tentang warna sejak melukis buku mewarnai Anda sebagai seorang anak, maka pemikiran ini masuk akal. Oleh karena itu, saya menulis artikel ini untuk memberi tahu Anda bahwa sebenarnya ada lebih banyak bunga.
Lihatlah diagram ini dan bandingkan dengan warna utama ⬤ ⬤ ⬤ ⬤ ⬤ ⬤ :
Kucing atau anjing? Penulis: Nadia Bremer
Warna pada bagan sangat berbeda. Nadia menggunakan merah ⬤ , yang berbeda dari merah biasa ⬤ . Hijau ⬤ - ini ... bisakah kau menyebutnya hijau ⬤ ?
Jadi sebelum kami memperkenalkan aturannya, izinkan saya menakut-nakuti Anda sedikit: ribuan warna dapat digunakan. Ada merah kekuningan ⬤ , merah kebiruan ⬤ dan segala sesuatu di antaranya. Ada abu-abu ⬤ , tapi ada juga abu-abu dingin ⬤ dan abu-abu hangat ⬤ . Dan kemudian ada warna biru. Sangat biru! Seperti ini ⬤ , ini ⬤ , ini ⬤ , ini ⬤ dan ini ⬤ . Dan kami belum berbicara tentang oranye dan kuning.
Kamu punya banyakpilihan. Ini berarti Anda dapat tetap berada di area kecil roda warna dan masih memiliki banyak pilihan.
Jangan menari di sekitar roda warna
Anda tidak perlu mengambil warna dari seluruh roda warna seperti ⬤ ⬤ ⬤ ⬤ ⬤ ⬤ . Diagram akan terlihat lebih profesional - dan karena itu lebih dapat diandalkan - jika diagram hanya menggunakan sedikit warna dan tone yang berdekatan.
Pada titik ini, masuk akal untuk melihat roda warna. Adobe Color atau Color Calculator cocok untuk ini .
Kalkulator Warna untuk Memilih Kombinasi Harmonis
Banyak dari alat ini memberikan kombinasi warna yang harmonis. Salah satunya disebut "square" atau "notebook". Jangan gunakan itu . Ini akan menghasilkan terlalu banyak nada, yang harus dihindari.
Dalam video, saya menggunakan alat warna Paletton , dimulai dengan kombinasi notebook dan kemudian mengurangi jarak. Perhatikan betapa cantik kombinasi warnanya.
Jika jaraknya cukup kecil, Anda sebagian besar menggunakan pelengkap warna atau pelengkap. Dan ini adalah pilihan yang bagus! Banyak pasangan warna pelengkap bekerja dengan baik bersama-sama. Jika ragu, selalu gunakan warna pelengkap dan tetangganya .
Jadi mari kita lakukan - kali ini dengan Adobe Color: Warna
Tambahan Kita dalam Adobe Color
Warna kami berlawanan pada roda warna, jadi keduanya jelas saling melengkapi. Hore! Tapi mereka juga tidak bisa digunakan: dua warna jingga terlalu mirip. Dan semuanya terlihat begitu ... cerah.
Di sinilah Anda perlu mengubah saturasi dan kecerahan.
Gunakan saturasi dan kecerahan untuk membuat nada berfungsi
Saturasi dan kecerahan sama pentingnya dengan warna. Bahkan, Anda bisa menciptakan warna baru hanya dengan mengubah saturasi dan kecerahan. Berikut ini dua pasang warna dengan tone yang sama, hanya saturasi dan brightness yang berbeda: ⬤ ⬤ / ⬤ ⬤ (jika Anda mengubah sedikit tone, hasilnya akan lebih baik: ⬤ ⬤ / ⬤ ⬤ ).
Mari kembali ke kombinasi warna kita: ⬤ ⬤ ⬤ ⬤ . Setelah bermain dengan saturasi dan kecerahan, ini terlihat seperti ini:
Warna pelengkap yang lebih cocok di Adobe Color
I desaturasi cyan muda ⬤ dan oranye terang ⬤dan membuat semua warna menjadi lebih gelap kecuali oranye terang. Sial, kamu sudah bisa mengerjakan ini!
Jadi, jika kombinasi warna Anda tampak belum lengkap, Anda tidak perlu langsung menambahkan tone lain. Pertama ubah saturasi dan kecerahan - dan lihat apa yang terjadi.
Inilah yang saya lakukan dengan semua palet warna ini: ⬤ ⬤ ⬤ ⬤ dan ⬤ ⬤ ⬤ ⬤ ⬤ dan ⬤ ⬤ ⬤ ⬤ . Semuanya kira-kira saling melengkapi dan semuanya memiliki saturasi dan kecerahan yang berbeda.
Gunakan warna-warna hangat dan biru
Desainer infografik sangat menyukai kombinasi lain: kuning / oranye / merah dan biru . Lihat portofolio South China Morning Post atau yang ini dari The Economist (PDF) , misalnya : mereka lebih sering menggunakan warna-warna ini daripada ungu atau hijau.
Tiga halaman South China Morning Post
Alasannya adalah karena warna-warna hangat plus biru ini cukup serbaguna untuk membedakan kategori. Kuning, oranye dan merah terlihat sangat bagus bersama-sama, tetapi orang masih melihatnya sebagai warna yang berbeda: ⬤ ⬤ ⬤ persis seperti yang kita inginkan untuk kategori warna. Dan biru lebih fleksibel daripada nada lainnya: banyak biru, tidak peduli seberapa gelapnya ⬤atau ringan, ⬤ kaya ⬤ atau tidak jenuh ⬤ , terlihat menyenangkan, menenangkan dan profesional.
Dan mereka tersedia: orang buta warna dapat dengan mudah membedakan antara biru dan oranye / merah.
Oleh karena itu, bila ragu, gunakan warna oranye / merah dengan biru.
Saat menggunakan warna hijau, buat menjadi kuning atau biru
Hijau cerah adalah seperenam pada roda warna, dari sekitar 90 ° ⬤ hingga 150 ° ⬤ , dengan puncak pada 120 ° ⬤ . Namun, Anda tidak akan menemukan infografis yang bagus dengan warna-warna ini. Mengapa?
Pertama, warna hijau itu sendiri sangat gelap. Dan kilatan hijau berubah menjadi neon yang canggung ⬤ . Untuk mendapatkan nada yang bagus, Anda perlu mencerahkan dan mengurangi saturasi warna hijau - lebih banyak daripada warna lainnya. Ini persis seperti yang dilakukan Washington Post dengan hijaunya ⬤ di sini:
"Bagaimana Trump Mengembalikan Warisan Obama," The Washington Post
Ini 142 ° hijau, tetapi hanya 14% jenuh. Rona yang sama dengan kecerahan yang sama pada saturasi 100%: ⬤ . Begini caranya.
Dan ingat tentang orang buta warna: hijau murni yang dikombinasikan dengan merah, jingga atau coklat sulit bagi mereka untuk membedakannya.
Jadi bila Anda menggunakan warna hijau, buatlah menjadi sedikit kuning atau sedikit biru. Anda dapat melihat ini pada contoh di awal artikel: semua hijau kecuali ⬤ memiliki nada lebih besar dari 160 ° (artinya, lebih biru) ⬤ ⬤ ⬤ atau kurang dari 60 ° (artinya, lebih kuning) ⬤ ⬤ . Dalam proyek ini, yang telah kita lihat, Nadia menggunakan warna kuning-hijau dan biru-hijau:
Kucing atau anjing? Penulis: Nadia Bremer
Sepertinya Anda dapat menggunakannya dalam infografis sebagai dua warna berbeda: win-win!
Hindari Warna Murni
Rona "murni" terletak di roda warna tepat 60 °, 120 °, 180 °, 240 °, 300 °, atau 360 ° / 0 °:
Berikut contohnya: di HSV / HSB, nilai rona biru cerah ⬤ ini adalah 180 °, nilainya saturasi adalah 67%, dan nilai kecerahan 91%. Anda juga dapat melihat nilai RGB warna Anda: jika setidaknya dua nilai cocok, maka warnanya "murni". Misalnya, ⬤ kami adalah
rgb(77, 232, 232).
Untuk membuat warna lebih alami dan enak dipandang, Anda bisa mengubah saturasi warna murni atau membuatnya lebih gelap. Jika Anda ingin warna cerah dan jenuh, pilih warna campuran yang setidaknya 5-10 ° dari warna bersih.
Pada gambar di atas, merah dan oranye, biru dan hijau memiliki saturasi dan kecerahan yang sama. Satu-satunya perbedaan adalah nadanya: merah ⬤ (0 °), biru ⬤ (240 °) dan hijau ⬤ (120 °) tampak lebih berair daripada oranye ⬤ (40 °), biru sedang ⬤ (211 °) dan hijau kebiruan ⬤ (170 °).
Hindari warna-warna cerah dan jenuh
Warna-warna cerah pasti akan menarik perhatian pembaca. Tapi para pembaca ini tidak akan berterima kasih. Kebanyakan orang merasa sedikit tegang saat melihat warna seperti ini: "warna yang sangat jenuh dan cerah TIDAK akan cocok untuk [komunikasi] yang serius, penuh kepercayaan atau tenang," jelas Bartram, Patra, dan Stone dalam artikel 2017 mereka Warna Afektif dalam Infografis ( PDF ) ...
Jika warna mendekati saturasi 100% dan kecerahan 100%, kemungkinan besar warnanya terlalu cerah. Ini pasti berlaku untuk warna solid seperti ⬤ ⬤ ⬤ ⬤ .
"Tapi saya pernah melihat sebelumnya melihat warna yang gila, dan terlihat bagus" - Anda berkata dan akan menyebut proyek seperti ini:
Artikel New York Times tentang playlist
ArtikelBloomberg Bankruptcy Pudding Celebrity
Article
Membandingkan warna dalam contoh ini dengan ⬤ ⬤ ⬤ ⬤ , warnanya akan lebih sedikit jenuh atau lebih gelap. 100% saturated dan 100% vivid green ⬤ menjadi kurang saturated di New York Times ⬤ dan juga Blo dalam artikel Bloomberg dan artikel Puddingkurang saturasi dan gelap ⬤ .
Mereka mempertahankan efek warna-warna cerah yang menyenangkan dan menarik perhatian, tetapi juga lebih enak dipandang.
Semuanya berhasil karena Pudding, The New York Times, dan Bloomberg memiliki desainer hebat.Jika ragu, hindari saturasi 100% yang dikombinasikan dengan kecerahan 100% .
Gabungkan warna dengan kecerahan berbeda
Terkadang saya menemukan infografis, terutama bagan area, di mana elemen yang berdekatan memiliki kecerahan yang sama. Anda dapat dengan mudah memeriksa ini: cukup ubah warna Anda menjadi hitam dan putih (misalnya, menggunakan alat kami ). Jika setiap orang memiliki warna abu-abu yang sama, maka kecerahannya sama.
Misalnya, ⬤ ⬤ ⬤ pada diagram paling kiri terlihat seperti ⬤ ⬤ ⬤ dalam skala abu-abu.
Untuk menghindari gamut yang tidak menyenangkan, ada dua opsi:
- « »: , , , : ⬤⬤⬤. : ⬤⬤⬤
- , ,
Saya sangat merekomendasikan opsi pertama (Anda masih dapat memberi bingkai putih jika Anda suka): warna akan menjadi lebih dinamis, dan buta warna akan berterima kasih kepada Anda. Faktanya, semua orang akan berterima kasih, terlepas dari diskriminasi warna mereka.
Pada kenyataannya, cara yang benar untuk mengatur warna untuk kategori adalah dengan memilih warna dari gradien seperti ini:
Skema Warna Viridis
Semua gradien ini berubah dari terang ke gelap, sehingga warna memiliki kecerahan yang berbeda: ⬤ ⬤ ⬤ ⬤ ⬤ atau ⬤ ⬤ ⬤ ⬤ ⬤ . Jika Anda menyukai pendekatan ini, coba generator palet warna ini .
Buat warna sama "berwarna"
Dalam infografis Anda, Anda sering ingin menonjolkan warna. Ada berbagai cara untuk mencapai ini. Warna dibedakan berdasarkan karakteristik berikut:
- karena mereka jauh lebih gelap ⬤ ⬤
- karena mereka jauh lebih ringan ⬤ ⬤
- karena mereka lebih intens ⬤ ⬤
- karena mereka lebih bersih ⬤ ⬤
Namun biasanya Anda hanya ingin menonjolkan satu atau dua warna saja. Sebagian besar sisanya harus terlihat kurang lebih sama .
Jika Anda menggunakan warna dengan kecerahan berbeda (berbeda dalam nuansa abu-abu), Anda perlu menyeimbangkannya. Cobalah untuk menghilangkan saturasi warna-warna cerah. Tambahkan lebih banyak saturasi ke dalam gelap .
Atau pilih rona yang kurang murni: pada gambar di atas, hijau ⬤ dan biru ⬤ sangat murni, jadi saya menggelapkannya (begitulah tampilan mereka pada kecerahan 100%: ⬤ ⬤ ).
Lalu saya ingin menambahkan warna merah ... tetapi warna merah cerah terlalu pekat sebagai warna murni (dari 0 °) ⬤ ⬤ ⬤ . Jadi saya punya dua pilihan:
- gelapkan saja : ⬤ ⬤ ⬤ .
- pindahkan rona (dan hanya rona) 30 ° untuk membuatnya lebih oranye ⬤ ⬤ ⬤ .
Saya memilih yang kedua agar sedikit lebih ramah. Tapi kedua opsi itu berfungsi.
Hindari kontras yang terlalu rendah dengan latar belakang
Banyak sekali infografis yang menggunakan warna pastel pada latar belakang yang cerah. Mereka seringkali tidak terlalu jenuh dan sangat ringan.
Ini menyebabkan masalah: jika Anda mengerjakan area, garis, dan titik kecil, warna terang dan desaturasi sulit dibedakan. Tetapi bahkan jika keterbacaan bukanlah suatu masalah - untuk area yang luas, misalnya - infografik Anda harus sangat kontras dengan latar belakang untuk dengan percaya diri mengatakan, "Hei, saya di sini dan ada yang ingin saya katakan."
Inilah yang harus dilakukan jika warnanya terlalu desaturasi dan terlalu terang ⬤ ⬤ ⬤ :
- Tingkatkan saturasi: ⬤ ⬤ ⬤
- Buat mereka lebih gelap: ⬤ ⬤ ⬤
- Atau lakukan keduanya untuk hasil terbaik: ⬤ ⬤ ⬤
Tentu, ini juga soal selera. Tetapi jika menurut Anda warnanya terlalu pastel, cobalah membuatnya lebih kaya dan lebih gelap. Lihat saja apa yang terjadi. Dan jika berjalan dengan baik, biarkan seperti itu.
Hindari terlalu banyak kontras dengan latar belakang
Kebalikannya juga benar: jangan membuat warna terlalu gelap dan tersaturasi dengan latar belakang yang cerah. Jika ragu, cobalah mencerahkan warna, menghilangkan saturasi, dan lihat apa yang terjadi.
Pilih latar belakang yang cukup desaturasi
Setelah Anda mengetahui warnanya, latar belakang warna-warni mungkin tampak seperti ide yang bagus. Tetapi latar belakang ini memiliki dua kelemahan besar: Pertama, mudah mengalihkan perhatian dari data. Kedua, ini sangat membatasi potensi gamut warna dan oleh karena itu sulit untuk dikerjakan. Faktanya, semakin jenuh latar belakangnya, semakin kompleks, jadi lebih baik untuk memilih warna desaturasi. Berikut beberapa aturan dasar untuk ruang warna HSB / HSV:
- Jika Anda menginginkan latar belakang yang terang, jauhi warna dengan kecerahan kurang dari 95% dan saturasi lebih dari 7%.
- Jika Anda menginginkan latar belakang gelap, pertahankan saturasi di bawah 20%. Selain itu, jangan sepenuhnya hitam - pertahankan kecerahan antara 10% dan 25%.
Cukup salin warnanya atau coba pahami
Sulit untuk merasakan dan memilih sendiri warna yang bagus. Jadi tidak masalah jika hanya menyalin kombinasi yang indah. Serius, tidak ada yang memalukan tentang mencuri. Saya telah menulis seluruh artikel tentang di mana mendapatkan inspirasi warna: film, artis, palet warna orang lain, dll. (Dan infografis lainnya adalah sumber yang bagus).
Jika Anda ingin secara intuitif memahami warna mana yang cocok satu sama lain, coba ini: Analisislah. Berikut beberapa cara untuk melakukannya:
Foto pohon niko foto di Unsplash
- , , , . , , Photoshop image-color.com. .
- Adobe Capture, , « »: (, !)
- : . ? ? , ?
- . . ?
Selain itu, lain kali Anda membuat infografis dan Anda tidak puas dengan warnanya, analisislah di ruang warna HSV / HSB , misalnya menggunakan colorizer.org :
- Seberapa jenuh warna - seberapa baik atau buruk warnanya dengan meningkatkan atau menurunkan saturasi beberapa (atau banyak) poin persentase?
- Apa arti nada ? Apa yang terjadi jika Anda mengubah nada hanya beberapa derajat?
- Apakah kecerahan warnanya berbeda?
Seiring waktu, Anda akan berpindah dari tingkat "Ini bagus, tapi saya tidak tahu mengapa" ke tingkat "Ini bagus karena suatu alasan." Dan Anda akan menemukan diri Anda mampu melanggar lebih banyak lagi aturan ini - dan masih menciptakan kombinasi warna yang bagus.