Cara Memilih Warna untuk UI

Memilih warna yang tepat bukan soal selera — ada metode dan prinsip yang bisa dipelajari.

HSL — Format Warna Terbaik untuk UI

HSL (Hue, Saturation, Lightness) adalah format warna paling intuitif untuk desain:

• Hue (0-360): warna dasar (merah=0, hijau=120, biru=240)
• Saturation (0-100%): seberapa "hidup" warna (0%=abu-abu, 100%=cerah)
• Lightness (0-100%): seberapa terang (0%=hitam, 50%=normal, 100%=putih)

/* Membuat variasi warna jadi mudah dengan HSL */
:root {
  --blue-50: hsl(220, 90%, 96%);   /* Sangat terang */
  --blue-100: hsl(220, 90%, 90%);
  --blue-500: hsl(220, 90%, 50%);  /* Base */
  --blue-700: hsl(220, 90%, 35%);  /* Gelap */
  --blue-900: hsl(220, 90%, 15%);  /* Sangat gelap */
}

Dengan HSL, kamu hanya perlu mengubah lightness untuk membuat shade dan tint dari satu warna!

Membangun Color Palette

Palette yang baik biasanya terdiri dari:

1. Primary — warna utama brand (1 warna)
2. Neutral/Gray — untuk teks, border, background (skala abu-abu)
3. Accent — warna sekunder, optional (1-2 warna)
4. Semantic — success (hijau), warning (kuning), error (merah), info (biru)

Tools untuk Memilih Warna

• Coolors.co — generate palette otomatis
• Tailwind CSS Colors — palette siap pakai yang sudah teruji
• Realtime Colors — preview palette di website mockup

Tips

1. Mulai dari 1 warna primary, lalu turunkan variasi dari situ
2. Gunakan palette gray yang warm — pure gray (#808080) terasa dingin dan mati. Tambahkan sedikit warmth
3. Jangan pilih warna dari color picker sembarangan — gunakan palette yang sudah tested

Tokopedia menggunakan hijau (#03AC0E) sebagai primary, Gojek menggunakan hijau (#00880F). Keduanya memiliki palette yang konsisten.