Bikin Image Color Picker Pakai HTML, CSS, dan JavaScript 🎨

 Pernah lihat warna keren di sebuah gambar terus kepikiran,

“Ini warna apa ya? Kode warnanya berapa sih?”

Nah, di artikel ini kita bakal bikin Image Color Picker sederhana pakai HTML, CSS, dan JavaScript.
Fungsinya simpel tapi kepake banget:
👉 upload gambar
👉 klik bagian gambar
👉 langsung dapet kode warna HEX dan RGB

Cocok banget buat desainer, frontend developer, atau kamu yang sering main warna pas bikin UI.

---

Apa aja yang bakal kita pakai?

Di project ini kita cuma butuh tiga hal utama:

1. HTML

Buat struktur tampilan seperti:

• area gambar

• tombol upload

• tombol pick color

• hasil warna (HEX & RGB)

2. CSS

Buat tampilan jadi:

• rapi

• clean

• enak dilihat

• responsif

3. JavaScript

Bagian paling seru, karena di sini kita:

• ambil warna dari gambar

• konversi warna ke HEX & RGB

• copy warna ke clipboard

• pakai Eyedropper API bawaan browser

---

Gambaran Cara Kerjanya

Simpelnya begini:

1. User upload gambar

2. Klik tombol “Pick Color”

3. Klik bagian gambar yang diinginkan

4. Warna langsung muncul

5. Bisa dicopy sekali klik

Kayak eyedropper di Photoshop, tapi versi web.

---

Struktur HTML

HTML-nya bertugas menyiapkan:

• gambar

• tombol

• input hasil warna

<div class="wrapper">

  <div class="image-container">

    <img id="image" src="demo-image-3.jpg" />

  </div>

  <div class="btns-container">

    <input type="file" id="file" />

    <label for="file">Open A Photo</label>

    <button id="pick-color">Pick Color</button>

  </div>

  <div id="result" class="hide">

    <div>

      <input type="text" id="hex-val-ref" />

      <button onclick="copy('hex-val-ref')">Copy</button>

    </div>

    <div>

      <input type="text" id="rgb-val-ref" />

      <button onclick="copy('rgb-val-ref')">Copy</button>

    </div>

    <div id="picked-color-ref"></div>

  </div>

</div>

Bagian pentingnya ada di:

• img → tempat gambar ditampilkan

• Pick Color → untuk ambil warna

• hex-val-ref & rgb-val-ref → hasil warna

---

Styling dengan CSS

CSS di sini fungsinya biar tampilannya enak dilihat dan tidak berantakan.

Yang dilakukan CSS:

• background ungu soft

• card putih di tengah

• tombol rapi

• warna preview kotak kecil

• animasi alert saat copy

Contohnya:

body {
  background-color: #ddc2ff;
}

.wrapper {
  background: white;
  width: 90%;
  max-width: 500px;
  margin: auto;
  padding: 1.5em;
  border-radius: 10px;
}

Intinya bukan soal cantik, tapi jelas dan fungsional.

---

JavaScript: Bagian Paling Penting

Di sinilah semua magic terjadi.

1. Cek apakah browser support Eyedropper

if ("EyeDropper" in window) {
  eyeDropper = new EyeDropper();
} else {
  error.innerText = "Browser tidak mendukung Eyedropper API";
}

Kalau browser tidak support, tombol otomatis disembunyikan.

---

2. Ambil warna dari layar

const colorSelector = async () => {
  const color = await eyeDropper.open();
  let hexValue = color.sRGBHex;
};

Begitu user klik gambar, browser akan ambil warna pixel yang diklik.

---

3. Ubah HEX ke RGB

let rgbArr = [];
for (let i = 1; i < hexValue.length; i += 2) {
  rgbArr.push(parseInt(hexValue[i] + hexValue[i + 1], 16));
}
let rgbValue = "rgb(" + rgbArr + ")";

Ini proses konversi manual dari HEX ke RGB.

---

4. Tampilkan hasil warna

hexValRef.value = hexValue;
rgbValRef.value = rgbValue;
pickedColorRef.style.backgroundColor = hexValue;

Sekali klik, langsung muncul:

• kode HEX

• kode RGB

• preview warna

---

5. Copy warna ke clipboard

document.execCommand("copy");

Setelah klik tombol copy, muncul alert kecil bertuliskan:
“Color Code Copied!”

Simple tapi kepake banget.

---

Kenapa Project Ini Bagus Buat Pemula?

Karena kamu bisa belajar:

• Cara baca pixel warna

• Cara kerja FileReader

• Cara pakai API browser modern

• Manipulasi DOM

• Event handling

• UX sederhana tapi berguna

Dan yang paling penting…
👉 hasilnya langsung bisa dipakai di project nyata.

---

Penutup

Membuat Image Color Picker itu simpel, tapi manfaatnya besar.
Cocok buat latihan JavaScript sekaligus nambah tools pribadi buat desain atau frontend project.

Kalau kamu mau:

• belajar JavaScript sambil praktik

• bikin tools kecil tapi berguna

• paham cara kerja warna di web

Project ini wajib kamu coba.

Kalau ada error atau bingung di bagian tertentu, tenang saja.
Tinggal download source code-nya dan utak-atik pelan-pelan.
Belajar coding itu soal proses, bukan buru-buru 😄

Selamat ngoding dan selamat bermain warna 🎨✨