htmlcssjavascriptwarnautilitasPemula9 mnt baca

Color Picker Kustom

Membangun pemilih warna dengan slider RGB, preview, dan riwayat warna.

Kenapa Color Picker?

Desainer dan developer butuh alat pilih warna. Membangunnya mengajarkan model warna RGB, konversi ke HEX, dan input range, semua dalam satu komponen visual yang memuaskan.

Langkah Membangun

HTML: Preview warna besar, tiga slider (R, G, B) dengan nilai angka, tampilan kode HEX dan RGB, tombol "Salin", dan baris riwayat warna.

CSS: Preview memakai background yang diupdate JS. Slider diberi warna sesuai channel-nya (merah, hijau, biru) agar intuitif.

JS:

  1. Tiga nilai r, g, b (0-255) dari slider.
  2. Fungsi update: set background preview ke rgb(r, g, b), hitung HEX dengan konversi per channel.
  3. Konversi desimal ke hex: n.toString(16).padStart(2, "0").
  4. Tombol salin memakai navigator.clipboard.writeText(hex).
  5. Klik preview menyimpan warna ke riwayat (maks 10, di localStorage).

Model Warna RGB

Layar membentuk warna dari tiga cahaya: merah, hijau, biru. (255,0,0) = merah murni, (255,255,255) = putih, (0,0,0) = hitam. HEX hanyalah cara singkat menulis RGB dalam basis 16.

Kesalahan Umum

  • HEX satu digit untuk nilai < 16 (misal 10 jadi "a" bukan "0a"), merusak kode warna (pakai padStart).
  • Clipboard API butuh konteks aman (HTTPS/localhost); sediakan fallback dengan textarea sementara.
  • Slider tidak sinkron dengan nilai angka (update keduanya di satu fungsi).
Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tantangan: Palet Komplementer

Tampilkan 3 warna harmonis dari warna terpilih: komplementer (putar hue 180°), dan dua analog (putar ±30°). Konversi RGB ke HSL dulu, putar hue, konversi balik.