Pilih kombinasi warna secara online. Lembar contekan kombinasi warna keren

Kawan, kami menempatkan jiwa kami ke dalam situs. Terima kasih untuk itu
untuk menemukan keindahan ini. Terima kasih atas inspirasi dan merindingnya.
Bergabunglah dengan kami di Facebook dan dalam kontak dengan

Skema No. 1. Kombinasi komplementer

Pelengkap, atau tambahan, kontras, adalah warna yang terletak di sisi berlawanan dari roda warna Itten. Kombinasi mereka terlihat sangat hidup dan energik, terutama dengan saturasi warna yang maksimal.

Skema nomor 2. Triad - kombinasi 3 warna

Kombinasi 3 warna terletak pada jarak yang sama satu sama lain. Memberikan kontras tinggi dengan tetap menjaga harmoni. Komposisi seperti itu terlihat cukup hidup bahkan saat menggunakan warna pucat dan desaturasi.

Skema No. 3. Kombinasi serupa

Kombinasi 2 hingga 5 warna yang terletak bersebelahan pada roda warna (idealnya 2-3 warna). Kesan: tenang, santai. Contoh kombinasi warna yang diredam serupa: kuning-oranye, kuning, kuning-hijau, hijau, biru-hijau.

Skema No. 4. Kombinasi komplementer-terpisah

Varian dari kombinasi warna yang saling melengkapi, hanya warna yang bersebelahan yang digunakan sebagai pengganti warna yang berlawanan. Kombinasi warna utama dan dua tambahan. Skema ini terlihat hampir sama kontrasnya, tetapi tidak terlalu tegang. Jika Anda tidak yakin dapat menggunakan kombinasi komplementer dengan benar, gunakan kombinasi komplementer terpisah.

Skema nomor 5. Tetrad - kombinasi 4 warna

Skema warna di mana satu warna adalah yang utama, dua yang saling melengkapi, dan yang lainnya menonjolkan aksen. Contoh: biru-hijau, biru-ungu, merah-oranye, kuning-oranye.

Skema nomor 6. Kotak

Kombinasi warna individu

Putih: cocok dengan segalanya. Kombinasi terbaik dengan biru, merah dan hitam.
Beige: dengan warna biru, coklat, zamrud, hitam, merah, putih.
Abu-abu: dengan fuchsia, merah, ungu, pink, biru.
Merah muda: dengan cokelat, putih, hijau mint, zaitun, abu-abu, pirus, biru muda.
Fuchsia (merah muda tua): dengan abu-abu, cokelat, limau, hijau mint, coklat.
Merah: dengan kuning, putih, coklat, hijau, biru dan hitam.
Merah tomat: biru, hijau mint, berpasir, putih krem, abu-abu.
Merah ceri: biru, abu-abu, oranye muda, berpasir, kuning pucat, krem.
Raspberry merah: putih, hitam, mawar damask.
Coklat: biru cerah, krem, merah muda, coklat kekuningan, hijau, krem.
Coklat muda: kuning pucat, putih krem, biru, hijau, ungu, merah.
Coklat tua: kuning lemon, biru langit, hijau mint, merah muda keunguan, limau.
Coklat kemerahan: pink, coklat tua, biru, hijau, ungu.
Oranye: biru, biru, ungu, ungu, putih, hitam.
Oranye muda: abu-abu, coklat, zaitun.
Oranye tua: kuning pucat, zaitun, coklat, ceri.
Kuning: biru, lembayung muda, biru muda, ungu, abu-abu, hitam.
Kuning lemon: merah ceri, coklat, biru, abu-abu.
Kuning pucat: fuchsia, abu-abu, coklat, nuansa merah, cokelat, biru, ungu.
Kuning keemasan: abu-abu, coklat, biru, merah, hitam.
Zaitun: oranye, coklat muda, coklat.
Hijau: cokelat keemasan, oranye, selada, kuning, cokelat, abu-abu, krem, hitam, putih krem.
Warna salad: coklat, cokelat, coklat kekuningan, abu-abu, biru tua, merah, abu-abu.
Pirus: fuchsia, merah ceri, kuning, coklat, krem, ungu tua.
Tukang listrik cantik dalam kombinasi dengan kuning keemasan, coklat, coklat muda, abu-abu atau perak.
Biru: merah, abu-abu, coklat, oranye, pink, putih, kuning.
Biru tua: ungu muda, biru langit, hijau kekuningan, coklat, abu-abu, kuning pucat, oranye, hijau, merah, putih.
Lilac: oranye, merah muda, ungu tua, zaitun, abu-abu, kuning, putih.
Ungu tua: coklat keemasan, kuning pucat, abu-abu, pirus, hijau mint, oranye muda.
Hitam serba guna, elegan, terlihat dalam semua kombinasi, paling baik dengan oranye, merah muda, salad, putih, merah, ungu atau kuning.

Memilih skema warna untuk situs web adalah salah satu langkah terpenting dalam proses desain. Memilih kombinasi warna adalah proses yang agak rumit dan kreatif. Untungnya, ada banyak layanan yang dapat memberikan dukungan signifikan untuk membuat pilihan yang tepat.

Beberapa sumber daya yang disebutkan dalam ikhtisar ini memungkinkan Anda untuk memilih dari sejumlah besar skema warna yang sudah jadi, sementara yang lain memungkinkan Anda untuk membangun skema Anda sendiri secara interaktif.

Kuler

Adobe Kuler berisi perpustakaan besar skema warna yang dibuat sebelumnya. Anda dapat melihat diagram secara online dan mengunduhnya untuk digunakan dalam produk Adobe Creative Suite.

Color Lovers saat ini memiliki hampir 2 juta skema warna buatan pengguna. Anda dapat melihatnya diurutkan berdasarkan tanggal, peringkat, jumlah tampilan.

ColoRotate memiliki perpustakaan skema warna yang dibuat sebelumnya. Anda juga dapat membuat skema Anda sendiri dengan alat 3D yang unik. Skema warna dapat digunakan langsung di Photoshop dan Fireworks menggunakan plugin ColoRotate.

Perancang Skema Warna memungkinkan Anda memilih jenis skema warna (mono, komplementer, triad, tetrad, analog). Maka dimungkinkan untuk menyesuaikan warna dan melihat efek skema pada contoh.

ColorSchemer memiliki perpustakaan besar skema warna yang dibuat pengguna. Anda dapat mengurutkannya berdasarkan tanggal diposting, peringkat, atau jumlah unduhan.

Pictaculous adalah alat pembuat skema warna online sederhana. Anda dapat mengunggah gambar dan layanan akan menghasilkan diagram untuk digunakan dengan gambar tersebut.

Warna Spire

Color Spire adalah layanan yang sangat mudah digunakan. Anda memilih warna dasar dan itu menunjukkan skema warna. Anda juga dapat melihat tampilan skema pada template sederhana.

Pemilih warna yang kecil, bergaya, dan rapi untuk desain halaman HTML dan tugas lain yang memerlukan warna yang serasi.

Mari kita lihat apa yang bisa dilakukan program ini.

Pengaturan titik warna

Karena program tidak memerlukan instalasi, cukup simpan arsip ke hard drive Anda, buka kemasannya ke lokasi yang nyaman, buka folder dan jalankan file dengan ekstensi .exe. Secara default, program dimulai sebagai tombol kecil:

Bekerja dengan program

Kami mengklik ikon ini dan jendela program terbuka di depan kami:

Layar

Di tab ini, program ini memungkinkan Anda untuk "mengambil" warna apa pun langsung dari layar. Artinya, dari bagian mana pun dari layar yang terlihat pada saat program diluncurkan. Seluruh layar ditampilkan dalam ukuran yang diperkecil di jendela Select Area.

Jika Anda mengklik bagian mana pun di jendela ini, itu akan muncul di jendela kecil berikutnya "Pilih warna". Di sini Anda sudah dapat membidik lebih akurat dan mengambil warna dari titik tertentu.

Juga di bagian kanan jendela ini ada tombol tambahan untuk menyalin ke clipboard, dan di bawah tombol "Refresh" (memperbarui konten layar) dan "Terapkan" (menyimpan warna yang dipilih dan mengalihkan jendela ke "Seleksi "tab).

Pilihan

Berikut adalah alat utama untuk pencocokan warna yang mudah: "Ubin", "Lingkaran", "Web" dan "Menang", yang dialihkan menggunakan tab tambahan.

Bekerja dengan alat-alat ini tidak sulit. Cukup klik pada warna yang Anda suka, sesuaikan dengan slider RGB (atau HSV - jika format ini lebih dekat dengan Anda), dan lihat apakah cocok atau tidak.

Jika Anda menyukai warna yang dipilih, Anda dapat menyalin kodenya dari baris "Representasi teks". Selain itu, kode juga dapat dipilih dalam salah satu format standar dengan mengklik panah kecil untuk memperluas daftar.

Perhatikan juga jendela warna ketiga di pojok kanan atas. Selain warna yang dipilih (garis vertikal), itu menunjukkan tiga warna lagi yang menyatu dengan baik dengan yang dipilih.

Dengan demikian, program segera menyarankan beberapa warna yang cocok yang dapat diterapkan pada elemen lain dari desain yang dirancang.

Program ini memiliki banyak tombol bantu yang berbeda. Untuk mengetahui tujuannya, cukup arahkan mouse ke atasnya dan baca tips yang muncul di bagian paling bawah jendela program.

Pengaturan

Di sini Anda dapat menyesuaikan beberapa parameter seperti jenis dan ukuran font dan beberapa properti kosmetik program. Akan lebih mudah untuk bekerja dengan program jika Anda menghapus centang pada kotak "Buka di tab "Layar" dan "Jalankan dalam mode jendela mini".

Tentang program

Di tab terakhir ini, Anda dapat menemukan kontak pengembang dan melihat apakah versi baru program telah dirilis dengan mengunjungi situs webnya.

Keuntungan dan kerugian dari program

ada banyak alat yang berbeda untuk pemilihan warna (lingkaran, ubin, dll.);
memungkinkan Anda membandingkan warna dengan mudah dengan memindahkan jendela program ke dekat elemen layar lainnya;
ada petunjuk untuk semua tombol.

antarmuka yang sedikit rumit;
berjalan diminimalkan dan pada tab "Layar" sangat tidak nyaman (walaupun Anda dapat mematikannya di pengaturan);
tidak semua orang akan menyukai warna jendela program.

temuan

Program ini cukup kuat untuk yang gratis, ia menyediakan hampir semua yang Anda butuhkan untuk memilih warna dengan mudah saat membuat desain situs web. Ada beberapa kekurangan kecil seperti warna jendela program (ungu - tidak untuk semua orang), tetapi tidak mengganggu pengerjaannya.

P.S. Diperbolehkan untuk menyalin dan mengutip artikel ini secara bebas, asalkan tautan aktif terbuka ke sumbernya ditunjukkan dan kepengarangan Ruslan Bogdanov dipertahankan.

P.P.S. Jika program tampak rumit bagi Anda, ada opsi yang lebih sederhana:

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

Posting ini berisi daftar layanan pencocokan warna terbaik untuk situs web dan desain UX yang akan menghemat banyak waktu Anda. Melalui proyek-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 di sekitar Anda. Yang Anda butuhkan hanyalah melihat-lihat. Pakaian modis, sampul buku, desain interior... ada begitu banyak 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 apa pun

Behance

Dalam layanan populer 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 Dribble

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

Saat memilih warna untuk situs, di sini Anda dapat mengatur persentase minimumnya - percobaan, misalnya, coba setel 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 Multikolor

Dengan layanan pencocokan warna Tineye Multicolr, Anda dapat menentukan gamut gambar yang diinginkan dan 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.

Colorzilla

ColorZilla adalah ekstensi untuk instalasi di browser Chrome dan Mozilla Firefox. Ini termasuk alat seperti pipet, penelusuran palet, kreasi, dan banyak lagi.

Ekstensi ColorZilla tersedia di Chrome dan Firefox

Spektrum Shutterstock

Salah satu cara terbaik untuk mendapatkan gambaran tentang skema warna yang akan terlihat adalah dengan melihat gambar yang sesuai. Sebagian besar solusi yang menawarkan pemilihan warna untuk desain situs web menyertakan fitur ini, tetapi Shutterstock Spectrum memiliki antarmuka dan pratinjau yang sangat ramah pengguna, yang sangat berguna.

Selain itu, Anda tidak perlu berlangganan, karena penilaian awal gambar akan cukup (meskipun faktanya memiliki "tanda air").

W3Schools

Baru-baru ini, sebuah blog mengulas pilihan dari W3Schools. Ada banyak informasi tentang topik ini, mulai dari nama / kode warna, 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 Bahan

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

pendingin

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

Skema warna di Coolors berdasarkan foto

Adobe Color CC

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

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

Pemilihan warna untuk situs sesuai dengan 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 desain ini sangat mirip. Satu-satunya perbedaan adalah bahwa di Paletton Anda tidak terbatas pada lima opsi, tetapi Anda dapat bereksperimen dengan nada antarmuka tambahan.

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

3. Membuat palet dapat diakses

Saat ini, gangguan persepsi warna jauh lebih umum 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 digabungkan dengan sempurna satu sama lain, sementara yang lain justru sebaliknya. Sejumlah besar proyek tidak lulus tes A / A, dan ini adalah fakta. Sangat penting untuk memeriksa desain visual antarmuka dan kontras nada, terutama jika ada banyak teks di halaman. Untuk tujuan ini, gunakan saat memilih warna situs.

WebAIM Color Contrast Checker 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 yang Anda ciptakan untuk buta warna.

Jenis buta warna dalam skema

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

Beginilah cara seseorang dengan protanomaly melihat palet

NoCoffee Vision Simulator untuk Chrome

Dengan bantuan situs web NoCoffee Vision Simulator, Anda dapat melihat bagaimana orang dengan buta warna atau rabun melihat halaman web tertentu. Misalnya, dengan menentukan opsi "Achromatopsia" di bagian "Kekurangan Warna", Anda akan melihat halaman web dalam warna abu-abu.

Seperti inilah proyek CNN untuk orang dengan deuteranopia

Kesimpulan

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

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

1. Gunakan gamut yang diketahui

Lebih dari 500 kombinasi warna merek terkenal telah dikumpulkan di situs web brandcolors.net. Yandex, Google, Burger King menggunakan palet yang sama di semua produk mereka. Merek-merek ini dan warnanya sudah tidak asing lagi 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 menemukan kembali roda setiap saat, karena kombinasi yang harmonis telah dikenal sejak lama. Buka colordrop.io dan pilih. Ada ratusan palet 4 warna profesional di situs ini. Setelah memilih yang Anda inginkan, klik dan salin kode warna dari panel yang terbuka di sebelah kanan.

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

3. Tentukan palet warna foto atau gambar yang Anda suka

Metode ini sedikit lebih sulit. Tapi juga lebih efektif.

Di situs coolors.co di panel atas di sebelah kiri, 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 tautan ke kolom kosong.
Layanan akan menentukan kombinasi warna (di bawah, di bawah gambar yang diunggah).
Anda dapat mengubah warna individual palet ini dengan menandainya dan memilih titik di foto yang ingin Anda ambil warnanya.
Tombol "Kolase" menyimpan palet yang dihasilkan dengan kode warna di komputer.
Tombol "Otomatis" menghasilkan kombinasi baru berdasarkan foto yang sama.
Klik "OK" dan buka halaman utama situs untuk pekerjaan lebih lanjut dengan palet.

Halaman utama situs ini tidak kalah fungsional. Di sini Anda dapat mengambil nuansa warna individu atau merakit palet baru dengan mengganti warna individu.

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 Anda sendiri. Untuk melakukan ini, tekan bilah spasi - layanan secara otomatis membuat kombinasi 5 warna.

Pada setiap warna 4 tombol ikon:

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