Memilih warna untuk UI bukan cuma soal selera: ada cara yang bisa diulang dan dicek. Bayangin kartu contoh warna cat di toko bangunan. Satu strip berisi tujuh kotak dari hijau paling muda sampai paling tua, semuanya hijau yang sama, cuma dicampur lebih banyak putih atau lebih banyak hitam. Di UI, strip itu disebut skala warna: satu warna brand diturunkan jadi versi terang (tint) dan gelap (shade), dan tiap versi punya tugasnya.
🧪 Tebakan cepat:
hsl(142 72% 50%)(hijau) danhsl(221 83% 53%)(biru) sama-sama punya lightness sekitar 50%. Kalau keduanya dipakai sebagai latar tombol dengan teks putih, apakah teksnya sama mudah dibaca? Jawabannya ada di bagian "Lightness bukan terang yang dilihat mata".
HSL: tiga angka yang bisa kamu atur
Hex seperti #15803d susah diubah dengan kepala. HSL memecah warna jadi tiga angka yang masuk akal:
- Hue (0 sampai 360): letak warna di lingkaran warna. Merah 0, hijau 120, biru 240.
- Saturation (0% sampai 100%): seberapa "berwarna". 0% berarti abu-abu.
- Lightness (0% sampai 100%): 0% hitam, 100% putih, 50% warna paling penuh.
Hijau Bu Sri #15803d dalam HSL kira-kira hsl(142 72% 29%): hue 142, saturasi 72%, lightness 29%. Di CSS modern ditulis dengan spasi; versi lama dengan koma, hsl(142, 72%, 29%), juga jalan.
Untuk membuat shade (versi lebih gelap), turunkan Lightness. Untuk tint (lebih terang), naikkan Lightness. Hue dan Saturation tetap, jadi warnanya tetap "hijau yang sama".
Satu warna jadi satu skala: 50 sampai 900
Skala ditulis dengan angka 50 (paling terang) sampai 900 (paling gelap), seperti di Tailwind. Ini skala hijau Bu Sri: hue dan saturasi tetap, lightness turun bertahap:
:root {
--green-50: hsl(142 72% 97%); /* latar yang sangat lembut */
--green-100: hsl(142 72% 93%);
--green-200: hsl(142 72% 85%);
--green-300: hsl(142 72% 74%);
--green-400: hsl(142 72% 58%);
--green-500: hsl(142 72% 45%);
--green-600: hsl(142 72% 36%);
--green-700: #15803d; /* brand: hsl(142 72% 29%), latar tombol */
--green-800: hsl(142 72% 24%);
--green-900: hsl(142 72% 20%); /* teks hijau di atas latar terang */
}
Tiap step dicek dengan teks putih di atasnya. Rasio kontras dan batas 4,5:1 sudah kamu kenal dari pelajaran hierarki teks:
| Step | Lightness | Hex | Teks putih |
|---|---|---|---|
| 50 | 97% | #f2fdf6 |
1,04:1 |
| 300 | 74% | #8decb0 |
1,42:1 |
| 500 | 45% | #20c55d |
2,28:1 |
| 600 | 36% | #1a9e4a |
3,48:1 |
| 700 | 29% | #15803d |
5,02:1, lolos |
| 800 | 24% | #116931 |
6,80:1 |
| 900 | 20% | #0e5829 |
8,58:1 |
- Step 700 adalah step pertama yang lolos 4,5:1 dengan teks putih. Itu sebabnya tombol Bu Sri memakai 700, bukan 500 yang "di tengah".
- Step 50 dan 100 untuk latar yang lembut, 800 dan 900 untuk teks hijau di atas latar terang.
- Skala jadi seperti Tailwind gak murni matematika.
green-700Tailwind persis#15803d, tapigreen-800-nya#166534(warna hover halaman ini sejak pelajaran teks interaktif), sedikit lebih abu dari hitungan kita (#116931) karena saturasinya diturunkan ke 64%. Skala yang bagus dihitung dulu, lalu disetel dengan mata.
Lightness bukan terang yang dilihat mata
Lightness HSL itu angka matematika, bukan terang yang dirasakan mata. Hitung kontrasnya dengan teks putih:
| Warna | Hex | Teks putih |
|---|---|---|
hsl(142 72% 50%) |
#24db67 |
1,84:1, gagal |
hsl(221 83% 53%) |
#2563EB |
5,17:1, lolos |
Jadi jawaban tebakannya: gak sama. Teks putih di biru terbaca, di hijau nyaris hilang. Itu jawaban tebakannya. Mata kita jauh lebih peka ke hijau daripada ke biru: di rumus luminans WCAG, hijau diberi bobot 0,7152, merah 0,2126, dan biru cuma 0,0722. Hijau dengan lightness 50% terlihat jauh lebih terang daripada biru dengan lightness 50%.
Akibatnya, step pertama yang lolos dengan teks putih berpindah-pindah menurut hue. Dengan saturasi 72% dan lightness yang sama seperti tabel di atas: biru (hue 240) sudah lolos di step 400, hijau baru di 700, kuning (hue 60) baru di 800. Pilih dengan HSL, lalu selalu ukur kontrasnya. CSS juga punya oklch(), yang angka lightness-nya lebih dekat ke terang yang dilihat mata, tapi kontrasnya tetap harus diukur.
Mengambil warna dari foto
Cara lain mencari warna: ambil dari foto tempatnya sendiri. Figma punya pipet (eyedropper), dan color picker di DevTools browser juga punya. Lab di pelajaran ini memakai gambar pemandangan pagi dari teras Homestay Kabut:
| Diambil dari | HSL | Dipakai untuk |
|---|---|---|
| Kabut di langit | hsl(210 25% 91%) |
hue netral: abu-abu kebiruan |
| Ladang kentang | hsl(142 24% 48%) |
hue brand: hijau 142 |
- Kabut memberi hue 210. Abu-abu di halaman Bu Sri (
#f1f5f9,#e2e8f0,#475569,#1f2937) semuanya punya hue 210 sampai 215 dengan saturasi rendah: abu-abu sewarna kabut, bukan abu-abu murni#808080. Abu-abu yang diberi sedikit hue terasa satu keluarga dengan warna lain di halaman. - Ladang kentang memberi hue 142, tapi saturasinya cuma 24% dan teks putih di atasnya cuma 3,38:1. Warna foto biasanya pucat dan keabu-abuan karena cahaya dan kabut. Ambil hue-nya, naikkan saturasi ke 72%, lalu pilih lightness sampai teks putih lolos: jadilah
#15803d.
Hati-hati, saturasi juga mengubah kontras: di lightness 29%, hijau dengan saturasi 100% (#009436) cuma 3,97:1. Setiap kali mengubah salah satu angka, ukur lagi.
Empat peran warna di palet
Palet UI biasanya punya empat kelompok:
- Primary: warna brand dengan skalanya. Di sini hijau
#15803d. - Neutral: abu-abu untuk teks, garis, dan latar. Di sini abu-abu kebiruan sewarna kabut.
- Accent: warna kedua yang dipakai sedikit, opsional. Homestay Kabut sengaja gak punya, jadi hijau tetap satu-satunya warna yang menonjol.
- Semantic: warna untuk status. Merah untuk error (misalnya
#b91c1c, 6,47:1 di atas putih), kuning atau oranye untuk peringatan, hijau untuk sukses, biru untuk info.
Berapa banyak tiap warna dipakai di satu layar dibahas di pelajaran prioritas warna, termasuk aturan 60-30-10.
⚠️ Jebakan yang sering ketemu
- Menganggap lightness HSL sama dengan terang.
hsl(142 72% 50%)danhsl(221 83% 53%)punya lightness mirip, tapi kontrasnya dengan putih 1,84:1 lawan 5,17:1. - Memakai warna foto apa adanya untuk tombol. Hijau ladang
hsl(142 24% 48%)dengan teks putih cuma 3,38:1. Ambil hue-nya, setel saturasi dan lightness-nya. - Abu-abu murni di samping warna brand. Beri abu-abu sedikit hue dari foto atau brand.
- Generator palet acak tanpa dicek. Palet dari generator tetap harus diukur kontrasnya satu per satu.
TL;DR: HSL (Hue, Saturation, Lightness) memecah warna jadi tiga angka. Shade dibuat dengan menurunkan Lightness, tint dengan menaikkannya; Hue dan Saturation tetap. Dari satu warna brand, buat skala 50 sampai 900 dan cek tiap step dengan teks putih: untuk hijau Bu Sri, step pertama yang lolos 4,5:1 adalah 700 (#15803d, 5,02:1). Lightness HSL bukan terang yang dilihat mata (hijau 50% cuma 1,84:1, biru 53% 5,17:1), jadi selalu ukur kontrasnya. Dari foto, ambil hue-nya: kabut memberi hue 210 untuk abu-abu, ladang kentang memberi hue 142 untuk hijau. Palet punya empat peran: primary, neutral, accent (opsional), dan semantic.
