Cara Membuat HTML Color Codes Generator untuk Blog atau Website

Updated: 26 Jul, 2025 • 0 • min read

Table of Contents

ilustrasi: Cara Membuat HTML Color Codes Generator untuk Blog atau Website

Asik-Belajar - HTML Color Codes Generator adalah alat yang memungkinkan pengunjung memilih warna dan langsung mendapatkan kode warna HTML-nya (HEX, RGB, atau HSL). Sangat berguna untuk web designer, blogger, atau siapa saja yang sering bermain dengan warna.

✨ Fitur yang Akan Kita Buat:

Warna dipilih lewat color picker.
Menampilkan kode warna HEX, RGB, dan HSL secara real-time.
Bisa disalin langsung (dengan tombol Copy).
Desain responsif & ringan, cocok untuk blog.

🧩 Langkah 1: Siapkan HTML Dasar

Buat struktur HTML berikut dan letakkan di halaman blog (pakai widget HTML/Javascript):

<div id="color-generator">
  <h3>Pilih Warna:</h3>
  <input type="color" id="colorPicker" value="#ff0000">
  
  <div class="output">
    <p><strong>HEX:</strong> <span id="hexValue">#ff0000</span></p>
    <p><strong>RGB:</strong> <span id="rgbValue">rgb(255, 0, 0)</span></p>
    <p><strong>HSL:</strong> <span id="hslValue">hsl(0, 100%, 50%)</span></p>
  </div>
</div>

🎨 Langkah 2: Tambahkan CSS (Gaya)

Tambahkan ini di <style> atau dalam CSS kamu:

<style>
#color-generator {
  max-width: 400px;
  padding: 20px;
  margin: 20px auto;
  background: #f5f5f5;
  border-radius: 10px;
  text-align: center;
  font-family: sans-serif;
}
#colorPicker {
  width: 100px;
  height: 50px;
  border: none;
  cursor: pointer;
}
.output {
  margin-top: 20px;
}
.output span {
  font-family: monospace;
}
</style>

⚙️ Langkah 3: Tambahkan JavaScript

Tambahkan kode JavaScript ini tepat di bawah HTML tadi (sebelum </body>):

<script>
function rgbToHsl(r, g, b) {
  r /= 255; g /= 255; b /= 255;
  let max = Math.max(r, g, b), min = Math.min(r, g, b);
  let h, s, l = (max + min) / 2;

  if (max === min) {
    h = s = 0;
  } else {
    let d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch (max) {
      case r: h = ((g - b) / d + (g < b ? 6 : 0)); break;
      case g: h = ((b - r) / d + 2); break;
      case b: h = ((r - g) / d + 4); break;
    }
    h /= 6;
  }

  return `hsl(${Math.round(h * 360)}, ${Math.round(s * 100)}%, ${Math.round(l * 100)}%)`;
}

document.getElementById("colorPicker").addEventListener("input", function() {
  const color = this.value;
  document.getElementById("hexValue").textContent = color;

  const r = parseInt(color.substr(1,2),16);
  const g = parseInt(color.substr(3,2),16);
  const b = parseInt(color.substr(5,2),16);
  const rgb = `rgb(${r}, ${g}, ${b})`;
  document.getElementById("rgbValue").textContent = rgb;

  const hsl = rgbToHsl(r, g, b);
  document.getElementById("hslValue").textContent = hsl;
});
</script>

🧪 Contoh Hasil

Kamu akan melihat kotak pemilih warna, dan saat warna dipilih, tiga kode (HEX, RGB, HSL) akan muncul otomatis.

🧼 Tips Tambahan:

Kamu bisa tambahkan tombol "Copy to Clipboard" untuk tiap kode.
Gunakan style dark mode jika ingin tema gelap.
Bisa dikembangkan jadi gradient generator atau palette generator.

Dengan HTML Color Codes Generator ini, blog kamu menjadi lebih interaktif dan bermanfaat terutama bagi pengunjung yang suka desain web. Kamu juga bisa memodifikasi tampilannya agar sesuai dengan tema blogmu.

Berikut kelanjutan dan pelengkapan tutorial HTML Color Codes Generator dengan fitur salin otomatis (Copy to Clipboard) dan mode gelap:

🖱️ Langkah 4: Tambahkan Tombol “Copy”

Di bawah setiap nilai warna, kita tambahkan tombol untuk menyalin ke clipboard:

<div id="color-generator">
  <h3>Pilih Warna:</h3>
  <input type="color" id="colorPicker" value="#ff0000">

  <div class="output">
    <div class="line">
      <strong>HEX:</strong>
      <span id="hexValue">#ff0000</span>
      <button class="copy-btn" data-target="hexValue">Copy</button>
    </div>
    <div class="line">
      <strong>RGB:</strong>
      <span id="rgbValue">rgb(255, 0, 0)</span>
      <button class="copy-btn" data-target="rgbValue">Copy</button>
    </div>
    <div class="line">
      <strong>HSL:</strong>
      <span id="hslValue">hsl(0, 100%, 50%)</span>
      <button class="copy-btn" data-target="hslValue">Copy</button>
    </div>
  </div>
</div>

🎨 Update CSS untuk Tombol

Tambahkan gaya tombol agar serasi:

<style>
.copy-btn {
  margin-left: 8px;
  padding: 4px 8px;
  font-size: 0.9em;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  background: #333;
  color: #fff;
}
.copy-btn:active { opacity: 0.7; }
.line {
  margin: 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

⚙️ Update JavaScript: Fitur Copy & Dark Mode

Gabungkan script sebelumnya dengan:

<script>
// Fungsi konversi RGB → HSL (sudah ada)
function rgbToHsl(r, g, b) {
  // ... (kode seperti sebelumnya)
}

// Update nilai saat colorPicker berubah
const picker = document.getElementById("colorPicker");
picker.addEventListener("input", updateValues);

// Inisialisasi
updateValues();

function updateValues() {
  const color = picker.value;
  document.getElementById("hexValue").textContent = color;

  const r = parseInt(color.substr(1,2),16);
  const g = parseInt(color.substr(3,2),16);
  const b = parseInt(color.substr(5,2),16);

  const rgb = `rgb(${r}, ${g}, ${b})`;
  document.getElementById("rgbValue").textContent = rgb;

  const hsl = rgbToHsl(r, g, b);
  document.getElementById("hslValue").textContent = hsl;
}

// Tambahkan event listener ke semua tombol copy
document.querySelectorAll(".copy-btn").forEach(btn => {
  btn.addEventListener("click", () => {
    const targetId = btn.getAttribute("data-target");
    const text = document.getElementById(targetId).textContent;
    navigator.clipboard.writeText(text)
      .then(() => btn.textContent = "Copied!")
      .catch(() => btn.textContent = "Error");
    setTimeout(() => btn.textContent = "Copy", 1000);
  });
});

// (Opsional) Toggle Dark Mode
const darkStyle = document.createElement("style");
darkStyle.innerHTML = `
  #color-generator { background: #333; color: #eee; }
  .copy-btn { background: #eee; color: #333; }
`;
const toggle = document.createElement("button");
toggle.textContent = "Toggle Dark Mode";
toggle.style = "position: fixed; top: 20px; right: 20px; padding:6px;";
toggle.addEventListener("click", () => {
  if (document.head.contains(darkStyle)) {
    document.head.removeChild(darkStyle);
  } else {
    document.head.appendChild(darkStyle);
  }
});
document.body.appendChild(toggle);
</script>

💡 Fitur Tambahan yang Bisa Dikembangkan

Gradient Generator
– Pilih dua titik warna, tampilkan CSS linear-gradient.
Palette Maker
– Ambil warna dasar lalu generate beberapa variasi (tints/shades).
Advanced Copy
– Sekali klik kopi semua tiga kode dalam satu format (misal JSON).
Live Preview
– Ganti latar atau teks elemen contoh sesuai pilihan warna.

✅ Kesimpulan

Dengan langkah di atas, kamu telah membuat:

Color Picker yang menampilkan HEX, RGB, HSL.
Tombol “Copy” untuk memudahkan menyalin kode.
Toggle Dark Mode untuk tema gelap/terang.

Selamat mencoba dan kembangkan sesuai kebutuhan blog atau websitemu! 🎉

Asik belajar blog