Buat skema warna. Generator palet untuk membantu desainer web. Pengaturan titik warna

Warna merupakan salah satu elemen terpenting dalam karya seorang desainer. Namun sebagai sebuah konsep, ini cukup sulit untuk dikuasai: banyaknya kombinasi palet sering kali membuat sulit untuk memutuskan cara terbaik untuk menata antarmuka halaman web dan aplikasi. Sebelumnya, kami menerbitkan ulasan tentang alat pilihan dan. Dan hari ini kami ingin memperluas topik ini dengan memposting terjemahan artikel Alat Warna Esensial untuk Desainer UX oleh Nick Babich di blog.

Posting ini berisi daftar layanan pencocokan warna terbaik untuk website dan desain UX yang akan menghemat banyak waktu Anda. Melalui proyek ini, Anda akan belajar:

dari mana mendapatkan inspirasi;
cara membuat palet Anda sendiri;
bagaimana membuat desain dapat diakses oleh orang-orang dengan gangguan penglihatan warna.

1. Mencari inspirasi

Warna alam

Gambarlah dari dunia sekitar Anda. Yang Anda butuhkan hanyalah melihat-lihat. Pakaian fashion, sampul buku, desain interior... banyak sekali hal menakjubkan di sekitar Anda. Namun kombinasi warna terbaik adalah warna alam. Abadikan momen indah dan coba buat pilihan Anda sendiri berdasarkan gambar tertentu.

Kombinasi warna terbaik ditemukan di alam. Anda bisa mendapatkan skema warna dari foto mana pun

Behance

Dalam layanan populer ini Anda akan menemukan karya-karya menarik yang termasuk dalam portofolio online terbaik dari para profesional sejati di bidangnya. Situs ini juga merupakan sumber inspirasi. Untuk melihat contoh proyek baru yang layak, cukup pilih warna yang Anda inginkan.

Warna Dribbble

Dribbble adalah salah satu yang terbaik yang berguna saat membuat antarmuka pengguna. Jika Anda ingin memahami secara visual bagaimana orang lain menggunakan warna tertentu, kunjungi dribbble.com/colors dan masukkan nilai yang Anda inginkan.

Saat memilih warna untuk situs, di sini Anda dapat mengatur persentase minimumnya - bereksperimenlah, misalnya, coba atur 30% biru.

Coba atur persentase minimum warna tertentu di Dribbble

inspirasi desain

Designspiration adalah alat yang berguna terutama bagi mereka yang sudah memiliki ide kombinasi warna dan ingin melihat contoh kombinasi tersebut. Pilih dari 1 hingga 5 opsi, dan Anda akan menemukan gambar yang sesuai dengan parameter yang ditentukan.

Di Designspiration Anda akan menemukan berbagai contoh kombinasi warna

Tineye Multiwarna

Dengan layanan pencocokan warna Tineye Multicolr, Anda dapat menentukan gamut gambar yang diinginkan bahkan mengatur persentase masing-masing (rasio). Situs ini terintegrasi dengan database 20 juta foto Creative Commons dari Flickr. Ini jelas merupakan salah satu cara tercepat untuk menemukan palet yang sempurna.

warnazilla

ColorZilla adalah ekstensi untuk instalasi di browser Chrome dan Mozilla Firefox. Ini mencakup alat-alat seperti pipet, penjelajahan palet, pembuatan, dan banyak lagi.

Ekstensi ColorZilla tersedia di Chrome dan Firefox

Spektrum Shutterstock

Salah satu cara terbaik untuk mendapatkan gambaran seperti apa skema warnanya adalah dengan melihat gambar yang sesuai. Sebagian besar solusi yang menawarkan pilihan warna desain situs web menyertakan fitur ini, namun Shutterstock Spectrum memiliki antarmuka dan pratinjau yang sangat ramah pengguna yang sangat berguna.

Selain itu, Anda tidak perlu berlangganan, karena penilaian awal terhadap gambar sudah cukup (walaupun gambar tersebut memiliki "tanda air").

Sekolah W3

Baru-baru ini, sebuah blog mengulas pilihan dari W3Schools. Ada banyak informasi tentang topik ini, mulai dari nama / kode coraknya, teori kombinasi palet dan diakhiri dengan deskripsi berbagai format: HEX, RGB, CMYK, HWB, dll. Anda juga akan menemukan generator sederhana, konverter dan "layanan mini" serupa. Secara keseluruhan, menarik untuk dilihat.

2. Buat palet warna

Alat Warna Desain Material

Layanan pemilih warna situs Alat Warna Desain Material memungkinkan Anda membuat, berbagi, dan mempratinjau skema warna untuk pilihan Anda. Salah satu fungsinya yang berguna adalah mengukur tingkat aksesibilitas kombinasi warna apa pun.

pendingin

Coolors adalah situs untuk membuat palet multi-warna. Perbaiki saja warna tertentu dan tekan bilah spasi. Alat ini juga bagus karena Anda akan mendapatkan lebih dari satu hasil, tetapi Anda dapat menghasilkan beberapa opsi hanya dengan mengubah data awal.

Skema warna di Coolors berdasarkan foto

Adobe Warna CC

Layanan pencocokan warna Adobe Color CC (sebelumnya Kuler) kini cukup populer. Ini tersedia secara gratis di Internet, tetapi ada juga versi deskriptornya. Dengan aplikasi web ini, Anda akan membuat palet menggunakan roda warna:

Atau Anda bisa mendapatkan hasil spesifik dari gambar yang sudah jadi:

Pemilihan warna situs sesuai gambar

Ada ratusan kombinasi yang sudah jadi di sini, cari di bagian "Tonton":

Jika Anda menggunakan versi desktop, Anda dapat mengekspor sistem warna yang Anda buat ke InDesign, Photoshop, dan Illustrator dalam satu klik.

palet

Ini sering dibandingkan dengan Adobe Color CC sebelumnya karena desainnya sangat mirip. Satu-satunya perbedaan adalah di Paletton Anda tidak dibatasi pada lima opsi, tetapi Anda dapat bereksperimen dengan nada antarmuka tambahan.

Selain itu, Anda dapat melihat. Bersama dengan aplikasi lainnya, aplikasi ini memungkinkan Anda bekerja di mana saja, hanya menggunakan ponsel cerdas Anda. Selain langsung membuat/mengekspor palet warna, di sini Anda dapat memilih warna tertentu dari gambar atau menggunakan opsi dasar.

3. Membuat palet dapat diakses

Saat ini, gangguan persepsi warna lebih umum terjadi daripada yang kita kira. Sekitar 285 juta orang di dunia mengalami masalah penglihatan. Anda harus selalu memeriksa apakah yang Anda pilih tersedia untuk pengguna tersebut.

Pemeriksa Kontras Warna WebAIM

Beberapa nada berpadu sempurna satu sama lain, sementara yang lain justru sebaliknya. Sejumlah besar proyek tidak lulus uji A/A, dan ini adalah faktanya. Sangat penting untuk memeriksa desain visual antarmuka dan kontras warna, terutama jika ada banyak teks pada halaman. Untuk tujuan ini, gunakan saat memilih warna situs.

Pemeriksa Kontras Warna WebAIM adalah alat berbasis web yang memeriksa kode warna dalam nilai heksadesimal.

pendingin

Kami telah menyebutkan layanan ini di atas. Antara lain, Coolors juga akan membantu Anda memeriksa palet ciptaan Anda untuk mengetahui adanya buta warna.

Jenis buta warna dalam suatu skema

Alih-alih mode "Normal", pilih jenis masalah penglihatan yang ingin Anda simulasikan. Hasilnya, Anda akan memahami dengan tepat bagaimana orang yang tidak bisa membedakan warna tertentu akan melihat desain Anda.

Beginilah cara pengidap protanomali melihat palet

Simulator Visi NoCoffee untuk Chrome

Dengan bantuan situs web NoCoffee Vision Simulator, Anda dapat melihat bagaimana orang-orang dengan buta warna atau gangguan penglihatan akan memandang halaman web tertentu. Misalnya, dengan menentukan opsi "Achromatopsia" di bagian "Defisiensi Warna", Anda akan melihat halaman web berwarna abu-abu.

Seperti inilah proyek CNN bagi penderita deuteranopia

Kesimpulan

Semua layanan pencocokan warna untuk situs web dan desain UX yang disebutkan dalam artikel pasti akan membantu Anda dalam mencari rangkaian yang menarik dan efektif. Namun ingat, cara terbaik untuk mempelajari cara membuat palet menakjubkan adalah dengan banyak berlatih dan bereksperimen.

Warna memainkan peran besar dalam desain web. Untuk memilih skema warna situs yang tepat, ada layanan khusus. Saya yakin setiap desainer web memiliki setidaknya satu di bookmark mereka.

Kadang-kadang Anda duduk dan memikirkan warna biru mana yang harus dipilih sebagai warna utama untuk situs tersebut, sedikit lebih terang atau sedikit lebih terang, atau mungkin lebih gelap ... Dan Anda masih perlu mengambil warna tambahan untuk itu. Tentu saja Anda bisa melakukannya dengan mata, tetapi lebih baik menggunakan salah satu layanan khusus.

Saya tidak akan berbicara tentang teori warna (ini adalah informasi yang terlalu banyak), tetapi hanya akan mempublikasikan di sini layanan yang saya miliki di bookmark saya dan yang saya gunakan.

Saya telah berteman dengan instrumen ini selama bertahun-tahun. Alat paling nyaman untuk memilih warna (menurut saya). Ini memiliki banyak fitur tambahan. Misalnya, Anda bisa melihat contoh halaman terang dan gelap dengan warna yang dipilih.

Anda dapat mengevaluasi bagaimana penderita buta warna dan gangguan penglihatan lainnya akan melihat skema warna Anda. Anda dapat memilih warna yang aman untuk web.

Adobe Kuler adalah alat web kedua yang cukup sering saya gunakan. Pemilihan skema warnanya hampir sama dengan di situs sebelumnya, tapi saya menyukainya bukan karena itu. Selain dapat membuat skema warna sendiri, Anda juga dapat melihat dan menggunakan skema yang dibuat oleh orang lain.

Untuk melakukan ini, klik tombol di menu kiri atas "Jam". Dan Anda akan melihat galeri semua jenis kombinasi warna.

Alat ini sedikit mirip dengan Colorscheme, namun memiliki lebih sedikit fitur, namun memungkinkan untuk melihat tampilan blok warna.

Saya jarang menggunakan situs ini, tetapi karena saya sudah memilikinya di bookmark saya, saya memutuskan untuk menambahkannya.

Dua situs berikut menghasilkan palet dari gambar pilihan Anda. Itu ajaib :)

Anda memilih gambar apa pun yang warnanya Anda suka, layanan menganalisisnya dan memberi Anda palet warna. Kedua situs ini hanya berbeda dalam cara menyediakan gambarnya.

Kebutuhan situs ini unduh gambar dari komputer Anda.

Pemilih warna yang sangat berguna. Berdasarkan prinsip “Suka – Tidak Suka”.

flatcolors.net

Sesuai dengan namanya, di sini kamu bisa memilih warna untuk flat design yang lagi ngetren. Situs ini menarik karena dengan memilih palet, Anda dapat mendownloadnya untuk program Corel dan Photoshop.

materialpalette.com

Tren fesyen lainnya adalah desain material. Situs ini membantu memilih kombinasi warna untuk UI (antarmuka pengguna). Selain itu, situs ini memiliki banyak ikon.

Dan terakhir, antarmuka pengguna lagi. Ini hanyalah kumpulan warna untuk desain UI. Dengan mengklik warna apa pun, Anda dapat melihat bagaimana teks putih akan dibaca dengan latar belakang tertentu.

Ini adalah alat yang saya miliki di bookmark saya.

Tulis di komentar situs pencocokan warna apa untuk desain web yang Anda gunakan?

Setiap desainer web memahami betapa pentingnya . Dengan bantuan warna, aksen ditempatkan - detail penting ditekankan dan detail tambahan disembunyikan. Warna menciptakan suasana hati. Warna adalah hal pertama yang dilihat pengunjung situs, bahkan sebelum mereka membaca satu huruf pun atau menyadari apa yang tergambar dalam foto tertentu. Palet warna Situs Anda mungkin menunda pengunjung, atau mungkin membuatnya takut.

Memilih Palet Warna yang Tepat- langkah pertama menuju membangun situs web yang ideal dan sempurna. Warna setiap elemen halaman harus selaras tidak hanya dengan elemen yang terkait secara visual, tetapi juga dengan skema warna keseluruhan halaman dan situs secara keseluruhan.

Agar tidak salah di awal perjalanan, kami sudah menyiapkan sedikit ikhtisar generator skema warna, memungkinkan Anda memilih jumlah dan kombinasi warna primer yang tepat yang akan Anda gunakan saat mengembangkan situs. Beberapa di antaranya cukup sederhana dan memiliki fungsi standar, sementara lainnya memiliki sejumlah fitur unik. Namun semuanya niscaya akan memberikan bantuan yang sangat berharga dalam mengembangkan desain website yang unik.

Adobe Warna CC

Adobe Warna CC- semacam standar untuk aplikasi semacam itu, yang memungkinkan membuat skema warna yang berbeda gunakan untuk ini lingkaran warna. Untuk membantu desainer akan ada akses langsung ke komunitas Adobe Pendingin, di mana Anda dapat mengambil ribuan warna berbeda.

palet

Salah satu yang tertua (bekerja sejak 2002) dalam ulasan kami alat untuk membuat kombinasi warna dan skema warna.

gaya saya

Menjelajahi situs yang ditentukan di bilah pencarian dan memberikan laporan tentang kombinasi warna yang digunakan di dalamnya, font, ukuran gambar, dll. Hal ini akan memungkinkan desainer untuk membangun solusi mereka sendiri, berdasarkan situs web yang mereka sukai.

pendingin

Memungkinkan menghasilkan kombinasi warna dasar, lalu sempurnakan palet yang dihasilkan sesuai keinginan Anda dan simpan dalam berbagai format - SVG, PDF, atau SCSS.

Warna banyak digunakan dalam desain - warna memungkinkan Anda untuk "menghidupkan kembali" konten - untuk menciptakan hubungan semantik antar elemen, untuk mengisi karya dengan emosi dan suasana hati. Desainer pemula memilih warna acak, namun ada cara untuk menggunakan warna dengan lebih bermakna. Pertimbangkan 4 metode tersebut, disusun menurut prinsip dari yang sederhana hingga yang kompleks.

1. Gunakan gamut yang diketahui

Lebih dari 500 kombinasi warna merek terkenal dikumpulkan di website brandcolors.net. Yandex, Google, Burger King menggunakan palet yang sama di semua produknya. Merek-merek ini dan warnanya familiar dan disukai banyak orang. Ketik nama di bilah pencarian atau gulir halaman, klik merek dan warna yang diinginkan: kodenya akan disalin ke clipboard.

2. Pilih palet profesional yang sudah jadi

Cara termudah adalah dengan mengambil kombinasi warna yang sudah jadi. Tidak perlu selalu menemukan kembali roda, karena kombinasi yang harmonis telah dikenal sejak lama. Buka colordrop.io dan pilih. Ada ratusan palet 4 warna profesional di situs ini. Setelah memilih salah satu yang Anda inginkan, klik dan salin kode warna dari panel yang terbuka di sebelah kanan.

Selain itu, layanan ini berisi 24 pilihan warna desain datar yang sudah jadi. Klik di sebelah kiri di bawah nama "Flat Colors" dan ambil kode shade yang Anda suka.

3. Tentukan palet warna foto atau gambar yang Anda sukai

Cara ini sedikit lebih sulit. Namun juga lebih efektif.

Di situs coolors.co di panel kiri atas, temukan ikon kamera, klik di atasnya. Jendela unggah gambar akan terbuka.
Anda dapat memilih foto atau gambar dengan skema warna yang Anda suka dari komputer Anda atau menyalin link ke kolom kosong.
Layanan akan menentukan kombinasi warna (di bawah, di bawah gambar yang diunggah).
Anda dapat mengubah masing-masing warna palet ini dengan menandainya dan memilih titik di foto yang ingin Anda ambil warnanya.
Tombol "Kolase" menyimpan palet yang dihasilkan dengan kode warna ke komputer.
Tombol "Otomatis" menghasilkan kombinasi baru berdasarkan foto yang sama.
Klik "OK" dan buka halaman utama situs untuk bekerja lebih lanjut dengan palet.

Halaman utama situs pun tak kalah fungsionalnya. Di sini Anda dapat memilih corak warna individual atau menyusun palet baru dengan mengganti warna individual.

4. Buat skema warna Anda sendiri secara online

Dengan mengunggah foto ke situs yang sama coolors.co, Anda tidak hanya dapat menentukan kode warna, tetapi juga membuat kombinasi sendiri. Untuk melakukan ini, tekan bilah spasi - layanan secara otomatis membuat kombinasi 5 warna.

Pada setiap warna 4 ikon tombol:

Nuansa alternatif - Nuansa warna (lebih gelap dan lebih terang),
Drag (Memindahkan warna ke kanan atau kiri pada palet),
Sesuaikan (Sesuaikan rona, saturasi, kecerahan, dll.),
Kunci (perbaiki warna).

Salah satu faktor terpenting dalam menciptakan desain yang unik dan mudah dikenali adalah warna. Pemilihan skema warna yang tepat dapat menentukan sukses tidaknya sebuah situs. Saat pengunjung pertama kali melirik halaman web, warna yang Anda pilih mengiriminya pesan instan tentang halaman tersebut. Untungnya, ada banyak alat yang tersedia untuk membantu Anda memilih skema warna yang tepat. Inilah lima yang terbaik.

1. Lebih dingin

Kuler dari Adobe telah lama dikenal sebagai asisten terbaik untuk desainer web profesional. Tidak seperti kompetitor, terdapat komunitas luas di sini dan Anda dapat berbagi palet yang dibuat atau mengambil skema warna orang lain dan memodifikasinya sesuai kebutuhan Anda. Untuk berkomunikasi di komunitas, Anda perlu mendaftar dan mendapatkan ID Adobe. Warna di Kuler direpresentasikan dalam berbagai format, termasuk RGB, CMYK, LAB, dan HSV.

Inspirasi bisa muncul di bawah pengaruh peristiwa yang paling tidak terduga. Misalnya, Anda mungkin menemukan foto cantik dengan skema warna yang menarik. Generator palet warna ini dirancang hanya untuk memproses foto-foto tersebut. Unggah file dalam format JPG atau PNG dan dapatkan tata letak detail berdasarkan warna utama. Apa pun reaksi yang ingin Anda timbulkan pada pengunjung Anda, generator palet warna dapat membantu Anda menciptakan tampilan unik untuk situs web mana pun.

Warna-warna individual tidak pernah tergantung dalam ruang hampa, dan setiap warna berdampak pada warna-warna di sekitarnya. Alat Contrast-A mengambil pendekatan yang sangat teknis terhadap konfigurasi palet, memberikan informasi rinci tentang Rasio Luminance dan perbedaan kecerahan dan warna. Ini adalah alat yang sempurna jika Anda ingin membuat situs web minimalis dengan sedikit warna yang saling melengkapi.

Plugin populer untuk Firefox ini memungkinkan Anda menentukan nilai masing-masing warna dan mengukur perbedaan di antara keduanya langsung di browser. Ada "browser skema warna" untuk memilih warna individual dari set yang telah dipilih sebelumnya. Mudah digunakan dan sangat kaya fitur, plugin ColorZilla seperti pisau ekstensi browser tentara Swiss untuk desainer dan seniman web.

Tidak seperti kebanyakan generator skema warna "roda warna" lainnya, Colorotate menampilkan palet pada kerucut 3D. Seperti Kuler, pengguna dapat menyimpan dan mengedit skema warna mereka sendiri, serta melihat palet yang dibuat oleh desainer lain. Alat ini terintegrasi dengan program desain populer Adobe Fireworks dan Photoshop.

Dalam hal desain web yang efektif, kita berbicara tentang antarmuka pengguna dan tata letak yang intuitif, namun skema warna sama pentingnya, atau bahkan lebih penting. Alat yang tercantum di sini akan mengarahkan Anda ke arah yang benar untuk memilih palet warna yang bagus untuk situs Anda pada percobaan pertama. Ada alat berguna lainnya di internet, tetapi alat inilah yang dapat Anda gunakan untuk mulai membangun persenjataan sempurna yang sesuai dengan gaya pribadi Anda. Semoga beruntung dan selamat mendesain!