Sumber: Dokumentasi Personal

Pemilihan warna memiliki pengaruh besar terhadap cara pengguna memahami sebuah tampilan digital. Dengan strategi desain warna yang tepat, sebuah aplikasi atau website  dapat menjadi lebih nyaman, mudah digunakan, dan ramah bagi semua pengguna. Setiap warna memiliki kemampuan untuk memberikan kesan dan identitas unik yang bervariasi tergantung pada latar belakang sosial dan budaya dari orang yang melihatnya. Setelah menentukan struktur User Flow(Alur pengguna selama menggunakan produk) dan Wireframe(kerangka dasar desain yang mengatur tata letak, struktur, dan fungsionalitas elemen-elemen), maka langkah berikutnya yang sebaiknya dilakukan oleh desainer yaitu pemilihan palet warna sebagai berikut: 

1. Pahami teori dasar warna 

Teori dasar warna yang dapat anda pahami dapat dimulai dari roda warna. Roda warna mencangkup semua hal tentang pencampuran warna. Campuran warna primer atau warna dasar seperti merah, kuning, dan biru, sedangkan warna sekunder seperti oranye, hijau, dan ungu. Adapun gabungan antara warna primer, sehingga menghasilkan warna tersier seperti warna merah-oranye, kuning-oranye, kuning-hijau, biru-hijau, biru-ungu, dan merah-ungu. 

Sumber: Vektor Kades | Menentukan Warna yang Tepat untuk Desain Kita

 2. Ketahuilah Psikologi Warna  

  • Merah sangat identik dengan api, sehingga merah dapat merepresentasikan kehangatan ataupun bahaya. 
  • Kuning adalah warna matahari yang merepresentasikan kebahagian, kecerian, dah kehangatan dari musim semi. 
  • Orange mengkombinasi warna antara merah dan kuning yang menggambarkan aktivitas, energi dan optimisme.
  • Hijau adalah warna alam, tumbuhan hidup, dan pertumbuhan itu sendiri. Secara tidak langsung hijau akan memberi nuansa sejuk, sehat dan alami. 
  • Biru dari laut dan langit, warna ini sering mengkomunikasikan kedamain. Sebagai lawan kata energi, ketenangan sangat merepresentasikan warna biru ini. 
  • Ungu secara umum dikenal sebagai warna kesetian dan keagungan. Karena warna ini memiliki konotasi spiritual. 
  • Hitam memiliki arti yang hampir sama dengan merah karena sering digambarkan sebagai simbol kekuatan,kecanggihan dan eksklusif. 
  • Putih melambangkan kebersihan dan kesucian, dan juga sering sekali menjadi simbol kebaikan. 

 3. Tentukan Warna Utama dan Warna Pendukung 

  • Selama penggunaan halaman website / aplikasi, kita dapat menyimpulkan warna utama apa yang digunakan oleh desainer untuk menyusun halaman tersebut. Umumnya warna dikategorikan berupa Primary Color(warna utama), Secondary Color(warna sekunder), Accent Color(warna penekanan), dan Neutral Color(warna netral).  
  • Primary Color(warna utama) merupakan warna yang paling sering muncul dan merepresentasikan atau karakteristik produk. Warna ini digunakan untuk tombol utama,  navbar(kumpulan menu yang biasa diletakkan pada bagian atas halaman), dan logo. 
  • Secondary Color(warna sekunder) merupakan warna tambahan untuk mencegah tampilan yang monoton, warna ini biasa digunakan untuk card(elemen berbentuk persegi atau persegi panjang yang digunakan untuk mengelompokkan informasi), dan hover state(perubahan warna pada saat pointer diarahkan ke suatu elemen). 
  • Accent Color(warna penekanan) merupakan warna yang bertujuan untuk menarik perhatian pengguna. Warna ini biasa digunakan untuk menunjukkan notifikasi, Alert(peringatan), dan informasi penting. 
  • Neutral Color(warna netral) merupakan warna yang digunakan sebagai dasar tampilan. Warna ini biasa digunakan untuk latar belakang halaman, tulisan informasi, dan border(pembatas luar elemen). 

Sumber: Canva

Model warna adalah sebuah sistem atau cara yang digunakan untuk menciptakan berbagai macam warna melalui gabungan beberapa komponen dasar (biasanya berupa angka). Jenis-jenis model warna yang sering digunakan yaitu sebagai berikut: 

1. Model Warna RGB (Red, Green, Blue) 

Model warna berbasis cahaya yang menggabungkan tiga warna utama merah, hijau, dan biru dengan intensitas angka antara 0 hingga 255 untuk menciptakan jutaan warna di layar digital. Prinsip kerjanya disebut additive (penjumlahan), di mana semakin tinggi nilai ketiga warnanya, maka warna yang dihasilkan semakin terang hingga menjadi putih murni, sedangkan jika ketiga nilainya nol, akan menghasilkan warna hitam atau gelap.  

2. Model Warna RYB (Red, Yellow, Blue) 

Model warna standar teori seni tradisional berbasis pigmen yang menggabungkan warna utama merah, kuning, dan biru menggunakan prinsip subtractive (pengurangan). Dalam sistem ini, warna dihasilkan dari pantulan cahaya pada materi, sehingga semakin banyak warna yang dicampur, semakin banyak cahaya yang diserap dan hasil akhirnya akan menjadi semakin menuju hitam.  

3. Model Warna HSL (Hue, Saturation, Lightness) & HSV (Hue, Saturation, Value) 

Model warna untuk merepresentasikan cara manusia mempersepsikan warna. Keduanya menggunakan Hue untuk menentukan jenis warna dalam lingkaran 0 derajat hingga 360 derajat dan Saturation untuk mengatur kepekatan atau kemurnian warna tersebut. Perbedaan utamanya terletak pada dimensi ketiga: Lightness pada HSL mengontrol keseimbangan antara putih dan hitam (50% adalah warna murni), sementara Value atau Brightness pada HSV mengukur intensitas cahaya yang dipantulkan, di mana nilai maksimalnya menunjukkan warna yang paling terang.  

Dalam desain UI/UX dan Human-Computer Interaction (HCI), pemilihan warna dibagi menjadi beberapa bagian agar tampilan lebih terstruktur, nyaman digunakan, dan mudah dipahami pengguna. Primary color merupakan warna utama yang menjadi identitas aplikasi dan sering digunakan pada elemen penting seperti tombol utama atau navbar. Secondary color berfungsi sebagai warna pendukung untuk menambah variasi visual dan membantu membedakan elemen tanpa membuat tampilan terlihat monoton. Selain itu, terdapat accent color yang digunakan untuk menarik perhatian pengguna karena biasanya memiliki kontras lebih tinggi dibanding warna lain. Sementara itu, neutral color seperti putih, hitam, atau abu-abu digunakan sebagai background dan warna teks agar tampilan tetap bersih serta meningkatkan keterbacaan. Pembagian peran warna ini membantu pengguna dapat memahami prioritas informasi dengan lebih mudah dan nyaman. 

Referensi

Penulis

  • Aldridge Hanse
  • Robin
  • Kenny Zefanya
  • Mariesza Bengthie Cahyani
  • Megan Valerie
  • Muhammad Jibral

PPTI 24 – Computer Science – BINUS @Kemanggisan – B29