Belajar UI Designer - Color Theory & Palettes

#Pendahuluan

Setelah di episode 2 kita mengenal prinsip visual — termasuk contrast — pada episode ini kita masuk ke elemen yang paling sering menjadi "selera": warna. Banyak desainer muda memilih warna berdasarkan rasa suka; UI designer profesional memilih warna berdasarkan peran dan ukuran keterbacaan.

Mengapa warna penting dipahami secara sistematis? Karena warna adalah sistem komunikasi: hijau berarti sukses, merah berarti bahaya, netral menenangkan, dan brand color menciptakan identitas. Kalau warna dipilih tanpa sistem, hasilnya bukan hanya tidak konsisten — ia juga bisa gagal aksesibilitas (teks tak terbaca) dan membingungkan pengguna (merah untuk aksi sukses). Episode ini memberi kalian kerangka: teori → skema → kontras → palette.

#Color Wheel dan Skema Harmonis

Color wheel (roda warna) adalah dasar semua skema: tiga warna primer (merah, kuning, biru), tiga sekunder (hijau, jingga, ungu), dan enam tersier. Dari roda ini lahir beberapa skema harmoni:

Analogous — warna bersebelahan (misal biru, biru-hijau, hijau). Terasa tenang dan menyatu, cocok untuk latar & area tenang.
Complementary — warna berseberangan (misal biru dan jingga). Kontras tinggi, cocok untuk menarik perhatian ke aksi utama.
Triadic — tiga warna berjarak sama. Cerah dan energik, perlu dikendalikan agar tidak ramai.
Monochromatic — satu hue dalam berbagai tingkat terang-gelap. Konsisten dan elegan, jadi tulang punggung palette UI.

Kantongin memakai pendekatan split-complementary: warna primer ungu sebagai identitas, aksen kuning-emas sebagai warna aksi — dua warna yang bersebelahan dengan lawan ungu. Ini memberi kontras aksi tanpa konflik visual.

#Memahami HSL untuk Mendesain Palette

Saat bekerja di Figma, kalian akan mengatur warna lewat HSL — Hue (roda warna, 0-360°), Saturation (intensitas, 0-100%), Lightness (terang-gelap, 0-100%). Menguasai HSL membuat kalian bisa membuat ramp warna secara matematis, bukan menebak:

Ramp warna primer Kantongin (Hue 260)

primary-500  hsl(260 80% 50%)   ← warna utama
primary-400  hsl(260 80% 62%)   ← hover
primary-300  hsl(260 80% 74%)   ← border / latar lembut
primary-100  hsl(260 80% 93%)   ← latar terang
primary-50   hsl(260 80% 97%)   ← latar paling lembut

Perhatikan: hanya Lightness yang berubah; hue dan saturation dijaga konstan. Hasilnya ramp yang harmonis secara otomatis. Ini persis teknik yang dipakai design system besar — dan menjadi dasar tokens warna di episode 9.

#Kontras dan WCAG

Warna tidak hanya soal harmoni — ia soal keterbacaan. Standar WCAG 2.1 mendefinisikan rasio kontras minimal untuk teks:

Level	Teks normal	Teks besar (≥18pt / ≥14pt bold)	UI component
AA (minimal)	4.5 : 1	3 : 1	3 : 1
AAA (tinggi)	7 : 1	4.5 : 1	—

Di Figma, plugin Stark (sudah disiapkan di episode 0) mengukur kontras secara otomatis. Contoh nyata: teks putih di atas primary-500 (hsl 260 80% 50%) menghasilkan rasio sekitar 5.2 : 1 — lolos AA. Tapi putih di atas primary-300 hanya ~2 : 1 — gagal, jadi primary-300 hanya boleh dipakai untuk elemen non-teks atau teks besar.

Tip

Biasakan menyimpan kontras sebagai bagian dari keputusan, bukan pengecekan belakangan. Saat memilih warna teks, langsung cek rasio AA-nya di Stark — menyesuaikan di akhir proyek jauh lebih mahal daripada memilih dengan benar sejak awal.

#Menyusun Palette Produk

Palette produk tidak cukup satu warna "brand". Palette yang sehat terdiri dari tiga keluarga:

#Warna Primer (Brand)

Warna identitas: satu hue utama + ramp. Dipakai untuk elemen interaktif utama (tombol primary, link, fokus). Kantongin: primary ungu.

#Warna Netral (Skala)

Deretan abu-abu dari hitam lembut ke putih. Netral memegang mayoritas layar — latar, teks, border — sehingga kualitasnya menentukan kesan keseluruhan:

Skala netral Kantongin (tinta berbias ungu)

ink-900   #17151F   ← teks utama
ink-700   #3D3A4A   ← teks sekunder
ink-500   #6B6878   ← teks tersier / placeholder
ink-300   #B4B1C0   ← border
ink-100   #EDECF2   ← divider / latar lembut
ink-50    #F7F6FA   ← latar halaman

Detail penting: netral di sini berbias ungu (bukan abu-abu murni) agar menyatu dengan warna primer. Netral "berbias" adalah tanda desain yang dipikirkan, bukan asal pilih.

#Warna Semantik (Status)

Warna yang membawa makna status — keberhasilannya ditentukan kesepakatan universal:

Warna	Makna	Contoh di Kantongin
Hijau (success)	Berhasil, positif	Transaksi masuk, target tercapai
Merah (danger)	Gagal, bahaya	Transaksi gagal, saldo minus
Kuning (warning)	Perhatian	Stok/target hampir habis
Biru (info)	Informasi	Banner tip

Warna semantik juga harus punya ramp dan lolos kontras. Merah untuk error tapi juga dipakai tombol "hapus akun" — konsisten adalah kuncinya.

Warning

Jangan bergantung pada warna sebagai satu-satunya penanda status — banyak pengguna buta warna. Ikon (tanda centang/peringatan) dan label teks harus menyertai warna semantik. Ini bagian dari accessibility yang kita dalami di episode 15.

#Praktik: Palette Kantongin

Susun palette pertama kalian di Figma:

Buat frame Palette di file Kantongin.
Tentukan hue brand (ungkapan visual Kantongin: tepercaya namun muda → ungu-biru).
Buat ramp 5 level untuk primer dan netral memakai HSL (ubah lightness saja).
Tambahkan 4 warna semantik + ramp minimal (500 dan 100).
Cek kontras: teks utama di atas ink-50 harus ≥ 4.5 : 1.

Simpan palette ini sebagai style Figma (tombol Create style) — di episode 4 dan 5, style warna ini akan dipakai bersama type dan spacing.

#Penutup

Pada episode 3 ini, kalian telah membangun fondasi warna: dari teori roda warna hingga palette produk yang siap dipakai.

Inti yang harus dibawa pulang:

Skema harmoni (analogous, complementary, triadic, monochromatic) menentukan relasi warna.
HSL memungkinkan pembuatan ramp warna secara matematis — ubah lightness, jaga hue & saturation.
Kontras WCAG (AA 4.5 : 1 untuk teks) wajib dicek — gunakan Stark di Figma.
Palette sehat = primer + netral + semantik, masing-masing dengan ramp dan peran yang jelas.

Di episode 4 selanjutnya kita akan membahas typography — type scale, hierarki teks, readability, dan pairing font — untuk membangun sistem tipografi Kantongin yang konsisten. Sampai jumpa di episode 4!